strokeDashoffset (#750)

Author: mbostock

README.md

@@ -622,7 +622,8 @@ All marks support the following style options:
 * **strokeLinejoin** - how to join lines (*bevel*, *miter*, *miter-clip*, or *round*)
 * **strokeLinecap** - how to cap lines (*butt*, *round*, or *square*)
 * **strokeMiterlimit** - to limit the length of *miter* joins
-* **strokeDasharray** - a comma-separated list of dash lengths (in pixels)
+* **strokeDasharray** - a comma-separated list of dash lengths (typically in pixels)
+* **strokeDashoffset** - the [stroke dash offset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset) (typically in pixels)
 * **opacity** - object opacity (a number between 0 and 1)
 * **mixBlendMode** - the [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) (*e.g.*, *multiply*)
 * **shapeRendering** - the [shape-rendering mode](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) (*e.g.*, *crispEdges*)

src/style.js

@@ -23,6 +23,7 @@ export function styles(
     strokeLinecap,
     strokeMiterlimit,
     strokeDasharray,
+    strokeDashoffset,
     opacity,
     mixBlendMode,
     paintOrder,
@@ -104,7 +105,8 @@ export function styles(
     mark.strokeLinejoin = impliedString(strokeLinejoin, "miter");
     mark.strokeLinecap = impliedString(strokeLinecap, "butt");
     mark.strokeMiterlimit = impliedNumber(strokeMiterlimit, 4);
-    mark.strokeDasharray = string(strokeDasharray);
+    mark.strokeDasharray = impliedString(strokeDasharray, "none");
+    mark.strokeDashoffset = impliedString(strokeDashoffset, "0");
   }
 
   mark.target = string(target);
@@ -185,6 +187,7 @@ export function applyIndirectStyles(selection, mark) {
   applyAttr(selection, "stroke-linecap", mark.strokeLinecap);
   applyAttr(selection, "stroke-miterlimit", mark.strokeMiterlimit);
   applyAttr(selection, "stroke-dasharray", mark.strokeDasharray);
+  applyAttr(selection, "stroke-dashoffset", mark.strokeDashoffset);
   applyAttr(selection, "shape-rendering", mark.shapeRendering);
   applyAttr(selection, "paint-order", mark.paintOrder);
 }

test/marks/area-test.js

@@ -19,6 +19,7 @@ it("area(data, options) has the expected defaults", () => {
   assert.strictEqual(area.strokeLinecap, undefined);
   assert.strictEqual(area.strokeMiterlimit, undefined);
   assert.strictEqual(area.strokeDasharray, undefined);
+  assert.strictEqual(area.strokeDashoffset, undefined);
   assert.strictEqual(area.mixBlendMode, undefined);
   assert.strictEqual(area.shapeRendering, undefined);
 });

test/marks/bar-test.js

@@ -17,6 +17,7 @@ it("barX() has the expected defaults", () => {
   assert.strictEqual(bar.strokeLinecap, undefined);
   assert.strictEqual(bar.strokeMiterlimit, undefined);
   assert.strictEqual(bar.strokeDasharray, undefined);
+  assert.strictEqual(bar.strokeDashoffset, undefined);
   assert.strictEqual(bar.mixBlendMode, undefined);
   assert.strictEqual(bar.shapeRendering, undefined);
   assert.strictEqual(bar.insetTop, 0);
@@ -110,6 +111,7 @@ it("barY() has the expected defaults", () => {
   assert.strictEqual(bar.strokeLinecap, undefined);
   assert.strictEqual(bar.strokeMiterlimit, undefined);
   assert.strictEqual(bar.strokeDasharray, undefined);
+  assert.strictEqual(bar.strokeDashoffset, undefined);
   assert.strictEqual(bar.mixBlendMode, undefined);
   assert.strictEqual(bar.shapeRendering, undefined);
   assert.strictEqual(bar.insetTop, 0);

test/marks/cell-test.js

@@ -19,6 +19,7 @@ it("cell() has the expected defaults", () => {
   assert.strictEqual(cell.strokeLinecap, undefined);
   assert.strictEqual(cell.strokeMiterlimit, undefined);
   assert.strictEqual(cell.strokeDasharray, undefined);
+  assert.strictEqual(cell.strokeDashoffset, undefined);
   assert.strictEqual(cell.mixBlendMode, undefined);
   assert.strictEqual(cell.shapeRendering, undefined);
   assert.strictEqual(cell.insetTop, 0);

test/marks/dot-test.js

@@ -18,6 +18,7 @@ it("dot() has the expected defaults", () => {
   assert.strictEqual(dot.strokeLinecap, undefined);
   assert.strictEqual(dot.strokeMiterlimit, undefined);
   assert.strictEqual(dot.strokeDasharray, undefined);
+  assert.strictEqual(dot.strokeDashoffset, undefined);
   assert.strictEqual(dot.mixBlendMode, undefined);
   assert.strictEqual(dot.shapeRendering, undefined);
 });

test/marks/frame-test.js

@@ -15,6 +15,7 @@ it("frame(options) has the expected defaults", () => {
   assert.strictEqual(frame.strokeLinecap, undefined);
   assert.strictEqual(frame.strokeMiterlimit, undefined);
   assert.strictEqual(frame.strokeDasharray, undefined);
+  assert.strictEqual(frame.strokeDashoffset, undefined);
   assert.strictEqual(frame.mixBlendMode, undefined);
   assert.strictEqual(frame.shapeRendering, undefined);
   assert.strictEqual(frame.insetTop, 0);

test/marks/line-test.js

@@ -19,6 +19,7 @@ it("line() has the expected defaults", () => {
   assert.strictEqual(line.strokeLinecap, undefined);
   assert.strictEqual(line.strokeMiterlimit, 1);
   assert.strictEqual(line.strokeDasharray, undefined);
+  assert.strictEqual(line.strokeDashoffset, undefined);
   assert.strictEqual(line.mixBlendMode, undefined);
   assert.strictEqual(line.shapeRendering, undefined);
 });

test/marks/link-test.js

@@ -17,6 +17,7 @@ it("link(data, options) has the expected defaults", () => {
   assert.strictEqual(link.strokeLinecap, undefined);
   assert.strictEqual(link.strokeMiterlimit, 1);
   assert.strictEqual(link.strokeDasharray, undefined);
+  assert.strictEqual(link.strokeDashoffset, undefined);
   assert.strictEqual(link.mixBlendMode, undefined);
   assert.strictEqual(link.shapeRendering, undefined);
 });

test/marks/rect-test.js

@@ -17,6 +17,7 @@ it("rect(data, options) has the expected defaults", () => {
   assert.strictEqual(rect.strokeLinecap, undefined);
   assert.strictEqual(rect.strokeMiterlimit, undefined);
   assert.strictEqual(rect.strokeDasharray, undefined);
+  assert.strictEqual(rect.strokeDashoffset, undefined);
   assert.strictEqual(rect.mixBlendMode, undefined);
   assert.strictEqual(rect.shapeRendering, undefined);
   assert.strictEqual(rect.insetTop, 0);