maybeDasharrayChannel identifies arrays of numbers (possibly joined by white space or commas) as constant

Author: Fil

src/style.js

@@ -366,6 +366,9 @@ export function applyFrameAnchor({frameAnchor}, {width, height, marginTop, margi
   ];
 }
 
-function maybeDasharrayChannel(channel) {
-  return typeof channel === "function" ? [channel] : [, channel];
+// A constant stroke-dasharray can be specified as an array of numbers
+// or as a string joining numbers with white space or comma
+function maybeDasharrayChannel(value) {
+  if (value == null) return [undefined, "none"];
+  return (typeof value === "string" && value.match(/^([\d.]+(\s+|,)){1,}[\d.]+$/) || Array.isArray(value) && typeof value[0] === "number") ? [undefined, `${value}`] : [value, undefined];
 }

test/output/strokeDasharrayConstant.svg

@@ -211,6 +211,8 @@ export {default as stargazersBinned} from "./stargazers-binned.js";
 export {default as stargazersHourly} from "./stargazers-hourly.js";
 export {default as stargazersHourlyGroup} from "./stargazers-hourly-group.js";
 export {default as stocksIndex} from "./stocks-index.js";
+export {default as strokeDasharrayConstant} from "./strokedasharray-constant.js";
+export {default as strokeDasharrayVariable} from "./strokedasharray-variable.js";
 export {default as thisIsJustToSay} from "./this-is-just-to-say.js";
 export {default as trafficHorizon} from "./traffic-horizon.js";
 export {default as travelersYearOverYear} from "./travelers-year-over-year.js";
@@ -229,7 +231,6 @@ 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/output/variableStrokeDasharray.svg renamed to test/output/strokeDasharrayVariable.svg

@@ -20,8 +20,8 @@ export default async function() {
         x2: 1,
         y1: 0,
         y2: 1,
-        strokeDasharray: d => d.strokeDasharray,
-        strokeDashoffset: d => d.strokeDashoffset,
+        strokeDasharray: "1,2,3",
+        strokeDashoffset: "strokeDashoffset",
         bend: true,
         headLength: 0
       })

test/plots/index.js

@@ -0,0 +1,30 @@
+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({
+    height: 640,
+    x: {inset: 10},
+    y: {inset: 10},
+    axis: null,
+    facet: {data, x: "strokeDasharray", y: "strokeDashoffset"},
+    marks: [
+      Plot.frame(),
+      Plot.arrow(data, {
+        x1: 0,
+        x2: 1,
+        y1: 0,
+        y2: 1,
+        strokeDasharray: "strokeDasharray",
+        strokeDashoffset: "strokeDashoffset",
+        bend: true,
+        headLength: 0
+      })
+    ]
+  });
+}