paint

Author: mbostock

src/index.d.ts

@@ -37,6 +37,7 @@ export * from "./marks/tip.js";
 export * from "./marks/tree.js";
 export * from "./marks/vector.js";
 export * from "./options.js";
+export * from "./paint.js";
 export * from "./plot.js";
 export * from "./projection.js";
 export * from "./reducer.js";

src/index.js

@@ -45,3 +45,4 @@ export {pointer, pointerX, pointerY} from "./interactions/pointer.js";
 export {formatIsoDate, formatWeekday, formatMonth} from "./format.js";
 export {scale} from "./scales.js";
 export {legend} from "./legends.js";
+export {linearGradient} from "./paint.js";

src/mark.d.ts

@@ -1,6 +1,7 @@
 import type {Channel, ChannelDomainSort, ChannelValue, ChannelValues, ChannelValueSpec} from "./channel.js";
 import type {Context} from "./context.js";
 import type {Dimensions} from "./dimensions.js";
+import type {Paint} from "./paint.js";
 import type {plot} from "./plot.js";
 import type {ScaleFunctions} from "./scales.js";
 import type {InitializerFunction, SortOrder, TransformFunction} from "./transforms/basic.js";
@@ -309,7 +310,7 @@ export interface MarkOptions {
    *
    * [1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill
    */
-  fill?: ChannelValueSpec;
+  fill?: ChannelValueSpec | Paint;
 
   /**
    * The [fill-opacity][1]; a constant number between 0 and 1, or a channel
@@ -329,7 +330,7 @@ export interface MarkOptions {
    *
    * [1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke
    */
-  stroke?: ChannelValueSpec;
+  stroke?: ChannelValueSpec | Paint;
 
   /**
    * The [stroke-dasharray][1]; a constant number indicating the length in

src/options.js

@@ -442,12 +442,19 @@ export function isEvery(values, is) {
   return every;
 }
 
+// TODO Make isPaint the generic one (either a color or a custom paint
+// implementation), rather than making isColor the generic one?
+export function isPaint(value) {
+  return typeof value?.paint === "function";
+}
+
 // Mostly relies on d3-color, with a few extra color keywords. Currently this
 // strictly requires that the value be a string; we might want to apply string
 // coercion here, though note that d3-color instances would need to support
 // valueOf to work correctly with InternMap.
 // https://www.w3.org/TR/SVG11/painting.html#SpecifyingPaint
 export function isColor(value) {
+  if (isPaint(value)) return true;
   if (typeof value !== "string") return false;
   value = value.toLowerCase().trim();
   return (

src/paint.d.ts

@@ -0,0 +1,10 @@
+import type {Context} from "./context.js";
+
+/** TODO */
+export interface Paint {
+  /** TODO */
+  paint(context: Context): void;
+}
+
+/** TODO */
+export function linearGradient(): Paint;

src/paint.js

@@ -0,0 +1,13 @@
+import {create} from "./context.js";
+
+export function linearGradient() {
+  return {
+    paint(context) {
+      const gradient = create("svg:linearGradient", context).attr("gradientTransform", "rotate(90)");
+      gradient.append("stop").attr("offset", "5%").attr("stop-color", "purple");
+      gradient.append("stop").attr("offset", "75%").attr("stop-color", "red");
+      gradient.append("stop").attr("offset", "100%").attr("stop-color", "gold");
+      return gradient.node();
+    }
+  };
+}

src/style.js

@@ -2,17 +2,8 @@ import {geoPath, group, namespaces} from "d3";
 import {create} from "./context.js";
 import {defined, nonempty} from "./defined.js";
 import {formatDefault} from "./format.js";
-import {
-  string,
-  number,
-  maybeColorChannel,
-  maybeNumberChannel,
-  maybeKeyword,
-  isNoneish,
-  isNone,
-  isRound,
-  keyof
-} from "./options.js";
+import {isNone, isNoneish, isPaint, isRound} from "./options.js";
+import {keyof, maybeColorChannel, maybeKeyword, maybeNumberChannel, number, string} from "./options.js";
 import {warn} from "./warnings.js";
 
 export const offset = (typeof window !== "undefined" ? window.devicePixelRatio > 1 : typeof it === "undefined") ? 0 : 0.5; // prettier-ignore
@@ -115,7 +106,7 @@ export function styles(
 
   // Some marks don’t support fill (e.g., tick and rule).
   if (defaultFill !== null) {
-    mark.fill = impliedString(cfill, "currentColor");
+    mark.fill = isPaint(cfill) ? cfill : impliedString(cfill, "currentColor");
     mark.fillOpacity = impliedNumber(cfillOpacity, 1);
   }
 
@@ -364,7 +355,14 @@ function applyClip(selection, mark, dimensions, context) {
 // Note: may mutate selection.node!
 export function applyIndirectStyles(selection, mark, dimensions, context) {
   applyClip(selection, mark, dimensions, context);
-  applyAttr(selection, "fill", mark.fill);
+  if (isPaint(mark.fill)) {
+    const paint = mark.fill.paint(context);
+    paint.setAttribute("id", "test-paint");
+    context.ownerSVGElement.append(paint);
+    selection.attr("fill", "url(#test-paint)");
+  } else {
+    applyAttr(selection, "fill", mark.fill);
+  }
   applyAttr(selection, "fill-opacity", mark.fillOpacity);
   applyAttr(selection, "stroke", mark.stroke);
   applyAttr(selection, "stroke-width", mark.strokeWidth);

test/output/penguinSpeciesPaint.svg

@@ -29,6 +29,16 @@ export async function penguinSpeciesCheysson() {
   });
 }
 
+export async function penguinSpeciesPaint() {
+  const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
+  return Plot.plot({
+    marks: [
+      Plot.barY(penguins, Plot.groupX({y: "count"}, {x: "species", fill: Plot.linearGradient()})),
+      Plot.ruleY([0])
+    ]
+  });
+}
+
 export async function penguinSpeciesGradient() {
   const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
   return Plot.plot({