diff --git a/src/marker.js b/src/marker.js index 6d76ed9ff2..f70c596ba1 100644 --- a/src/marker.js +++ b/src/marker.js @@ -1,6 +1,6 @@ import {create} from "./context.js"; import {unset} from "./memoize.js"; -import {keyof} from "./options.js"; +import {isNoneish, keyof} from "./options.js"; export function markers(mark, {marker, markerStart = marker, markerMid = marker, markerEnd = marker} = {}) { mark.markerStart = maybeMarker(markerStart); @@ -144,7 +144,13 @@ function getGroupedOrientation(path, Z) { return ([i]) => O[i]; } -function applyMarkersColor(path, {markerStart, markerMid, markerEnd, stroke}, strokeof = () => stroke, Z, context) { +function applyMarkersColor( + path, + {markerStart, markerMid, markerEnd, stroke, strokeDasharray}, + strokeof = () => stroke, + Z, + context +) { if (!markerStart && !markerMid && !markerEnd) return; const iriByMarkerColor = new Map(); const orient = Z && getGroupedOrientation(path, Z); @@ -158,6 +164,7 @@ function applyMarkersColor(path, {markerStart, markerMid, markerEnd, stroke}, st let iri = iriByColor.get(color); if (!iri) { const node = this.parentNode.insertBefore(marker(color, context), this); + if (!isNoneish(strokeDasharray)) node.setAttribute("stroke-dasharray", "none"); const id = `plot-marker-${++nextMarkerId}`; node.setAttribute("id", id); iriByColor.set(color, (iri = `url(#${id})`)); diff --git a/test/output/markerDasharray.svg b/test/output/markerDasharray.svg new file mode 100644 index 0000000000..f19dfaa5fc --- /dev/null +++ b/test/output/markerDasharray.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/markers.ts b/test/plots/markers.ts index f6c19e61e5..8974e41bbf 100644 --- a/test/plots/markers.ts +++ b/test/plots/markers.ts @@ -1,5 +1,30 @@ import * as Plot from "@observablehq/plot"; +export async function markerDasharray() { + return Plot.plot({ + axis: null, + inset: 20, + marks: [ + Plot.lineY( + [ + [0, 5], + [5, 2], + [10, 0] + ], + { + x: (d) => d[0], + y: (d) => d[1], + strokeDasharray: "1,10", + strokeWidth: 3, + markerStart: "dot", + markerMid: "arrow", + markerEnd: "circle-stroke" + } + ) + ] + }); +} + export async function markerRuleX() { return Plot.ruleX([1, 2, 3], {marker: "arrow-reverse", inset: 3}).plot(); }