Add shape-rendering to mark style (#419)

* Add shape-rendering

* Add tests

* Update test/plots/us-presidential-forecast-2016.js

* Update test/plots/us-presidential-forecast-2016.js

* Consistent quotes

* shapeRendering defaults to auto

* rule, not bar

Co-authored-by: Philippe Rivière <[email protected]>
Co-authored-by: Mike Bostock <[email protected]>

Author: 3 people

README.md

@@ -462,6 +462,7 @@ All marks support the following style options:
 * **strokeMiterlimit** - to limit the length of *miter* joins
 * **strokeDasharray** - a comma-separated list of dash lengths (in pixels)
 * **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*)
 
 All marks support the following optional channels:
 

src/style.js

@@ -12,7 +12,8 @@ export function Style(mark, {
   strokeLinecap,
   strokeMiterlimit,
   strokeDasharray,
-  mixBlendMode
+  mixBlendMode,
+  shapeRendering
 } = {}) {
   mark.fill = impliedString(fill, "currentColor");
   mark.fillOpacity = impliedNumber(fillOpacity, 1);
@@ -24,6 +25,7 @@ export function Style(mark, {
   mark.strokeMiterlimit = impliedNumber(strokeMiterlimit, 4);
   mark.strokeDasharray = string(strokeDasharray);
   mark.mixBlendMode = impliedString(mixBlendMode, "normal");
+  mark.shapeRendering = impliedString(shapeRendering, "auto");
 }
 
 export function applyIndirectStyles(selection, mark) {
@@ -36,6 +38,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, "shape-rendering", mark.shapeRendering);
 }
 
 export function applyDirectStyles(selection, mark) {