variable strokeDasharray and strokeDashoffset

for dasharray it would be ambiguous to accept an array… would it be a channel of dasharrays,
or a constant dasharray? For this reason, only functions can create a variable channel.

Author: Fil

src/style.js

@@ -75,6 +75,8 @@ export function styles(
   const [vstroke, cstroke] = maybeColorChannel(stroke, defaultStroke);
   const [vstrokeOpacity, cstrokeOpacity] = maybeNumberChannel(strokeOpacity, defaultStrokeOpacity);
   const [vopacity, copacity] = maybeNumberChannel(opacity);
+  const [vstrokeDasharray, cstrokeDasharray] = maybeDasharrayChannel(strokeDasharray);
+  const [vstrokeDashoffset, cstrokeDashoffset] = maybeNumberChannel(strokeDashoffset);
 
   // For styles that have no effect if there is no stroke, only apply the
   // defaults if the stroke is not the constant none. (If stroke is a channel,
@@ -110,8 +112,8 @@ export function styles(
     mark.strokeLinejoin = impliedString(strokeLinejoin, "miter");
     mark.strokeLinecap = impliedString(strokeLinecap, "butt");
     mark.strokeMiterlimit = impliedNumber(strokeMiterlimit, 4);
-    mark.strokeDasharray = impliedString(strokeDasharray, "none");
-    mark.strokeDashoffset = impliedString(strokeDashoffset, "0");
+    mark.strokeDasharray = impliedString(cstrokeDasharray, "none");
+    mark.strokeDashoffset = impliedString(cstrokeDashoffset, "0");
   }
 
   mark.target = string(target);
@@ -130,6 +132,8 @@ export function styles(
     {name: "fill", value: vfill, scale: "color", optional: true},
     {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
     {name: "stroke", value: vstroke, scale: "color", optional: true},
+    {name: "strokeDasharray", value: vstrokeDasharray, optional: true},
+    {name: "strokeDashoffset", value: vstrokeDashoffset, optional: true},
     {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true},
     {name: "strokeWidth", value: vstrokeWidth, optional: true},
     {name: "opacity", value: vopacity, scale: "opacity", optional: true}
@@ -154,25 +158,29 @@ export function applyTextGroup(selection, T) {
   if (T) selection.text(([i]) => formatDefault(T[i]));
 }
 
-export function applyChannelStyles(selection, {target}, {ariaLabel: AL, title: T, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+export function applyChannelStyles(selection, {target}, {ariaLabel: AL, title: T, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H, strokeDasharray: SDA, strokeDashoffset: SDO}) {
   if (AL) applyAttr(selection, "aria-label", i => AL[i]);
   if (F) applyAttr(selection, "fill", i => F[i]);
   if (FO) applyAttr(selection, "fill-opacity", i => FO[i]);
   if (S) applyAttr(selection, "stroke", i => S[i]);
   if (SO) applyAttr(selection, "stroke-opacity", i => SO[i]);
   if (SW) applyAttr(selection, "stroke-width", i => SW[i]);
+  if (SDA) applyAttr(selection, "stroke-dasharray", i => SDA[i]);
+  if (SDO) applyAttr(selection, "stroke-dashoffset", i => SDO[i]);
   if (O) applyAttr(selection, "opacity", i => O[i]);
   if (H) applyHref(selection, i => H[i], target);
   applyTitle(selection, T);
 }
 
-export function applyGroupedChannelStyles(selection, {target}, {ariaLabel: AL, title: T, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+export function applyGroupedChannelStyles(selection, {target}, {ariaLabel: AL, title: T, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H, strokeDasharray: SDA, strokeDashoffset: SDO}) {
   if (AL) applyAttr(selection, "aria-label", ([i]) => AL[i]);
   if (F) applyAttr(selection, "fill", ([i]) => F[i]);
   if (FO) applyAttr(selection, "fill-opacity", ([i]) => FO[i]);
   if (S) applyAttr(selection, "stroke", ([i]) => S[i]);
   if (SO) applyAttr(selection, "stroke-opacity", ([i]) => SO[i]);
   if (SW) applyAttr(selection, "stroke-width", ([i]) => SW[i]);
+  if (SDA) applyAttr(selection, "stroke-dasharray", ([i]) => SDA[i]);
+  if (SDO) applyAttr(selection, "stroke-dashoffset", ([i]) => SDO[i]);
   if (O) applyAttr(selection, "opacity", ([i]) => O[i]);
   if (H) applyHref(selection, ([i]) => H[i], target);
   applyTitleGroup(selection, T);
@@ -339,3 +347,7 @@ export function applyFrameAnchor({frameAnchor}, {width, height, marginTop, margi
     /^top/.test(frameAnchor) ? marginTop : /^bottom/.test(frameAnchor) ? height - marginBottom : (marginTop + height - marginBottom) / 2
   ];
 }
+
+function maybeDasharrayChannel(channel) {
+  return typeof channel === "function" ? [channel] : [, channel];
+}

test/output/variableStrokeDasharray.svg

@@ -201,6 +201,7 @@ export {default as usPresidentialElection2020} from "./us-presidential-election-
 export {default as usPresidentialForecast2016} from "./us-presidential-forecast-2016.js";
 export {default as usRetailSales} from "./us-retail-sales.js";
 export {default as usStatePopulationChange} from "./us-state-population-change.js";
+export {default as variableStrokeDasharray} from "./variable-strokedasharray.js";
 export {default as vectorField} from "./vector-field.js";
 export {default as vectorFrame} from "./vector-frame.js";
 export {default as wealthBritainBar} from "./wealth-britain-bar.js";

test/plots/index.js

@@ -0,0 +1,28 @@
+import * as Plot from "@observablehq/plot";
+
+const data = Array.from(["none", "10 5", [20, 3], [30, 5, 10, 10], null],
+  (strokeDasharray) => Array.from([0, 2, 20, 60, NaN],
+    (strokeDashoffset) => ({strokeDasharray, strokeDashoffset})
+  )
+).flat();
+
+export default async function() {
+  return Plot.plot({
+    facet: {data, x: "strokeDasharray", y: "strokeDashoffset"},
+    marks: [
+      Plot.arrow(data, {
+        x1: 0,
+        x2: 1,
+        y1: 0,
+        y2: 1,
+        strokeDasharray: d => d.strokeDasharray,
+        strokeDashoffset: d => d.strokeDashoffset,
+        bend: true,
+        headLength: 0
+      })
+    ],
+    fx: {padding: 0.2},
+    fy: {padding: 0.2},
+    axis: null
+  });
+}