paint-order (#701)

Author: mbostock

README.md

@@ -624,6 +624,7 @@ All marks support the following style options:
 * **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*)
+* **paintOrder** - the [paint order](https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order) (*e.g.*, *stroke*)
 * **dx** - horizontal offset (in pixels; defaults to 0)
 * **dy** - vertical offset (in pixels; defaults to 0)
 * **target** - link target (e.g., “_blank” for a new window); for use with the **href** channel

src/style.js

@@ -22,6 +22,7 @@ export function styles(
     strokeDasharray,
     opacity,
     mixBlendMode,
+    paintOrder,
     shapeRendering
   },
   channels,
@@ -96,6 +97,7 @@ export function styles(
   mark.target = string(target);
   mark.opacity = impliedNumber(copacity, 1);
   mark.mixBlendMode = impliedString(mixBlendMode, "normal");
+  mark.paintOrder = impliedString(paintOrder, "normal");
   mark.shapeRendering = impliedString(shapeRendering, "auto");
 
   return [
@@ -162,6 +164,7 @@ export function applyIndirectStyles(selection, mark) {
   applyAttr(selection, "stroke-miterlimit", mark.strokeMiterlimit);
   applyAttr(selection, "stroke-dasharray", mark.strokeDasharray);
   applyAttr(selection, "shape-rendering", mark.shapeRendering);
+  applyAttr(selection, "paint-order", mark.paintOrder);
 }
 
 export function applyDirectStyles(selection, mark) {