rule strokeOpacity channel (#468)

* fix #466; strokeOpacity channel for rules

* add rule strokeOpacity channel test

Author: mbostock

src/marks/rule.js

@@ -1,6 +1,6 @@
 import {create} from "d3";
 import {filter} from "../defined.js";
-import {Mark, identity, maybeColor, title, number} from "../mark.js";
+import {Mark, identity, maybeColor, title, number, maybeNumber} from "../mark.js";
 import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
 
 export class RuleX extends Mark {
@@ -12,32 +12,35 @@ export class RuleX extends Mark {
       y2,
       title,
       stroke,
+      strokeOpacity,
       inset = 0,
       insetTop = inset,
       insetBottom = inset,
       ...options
     } = {}
   ) {
     const [vstroke, cstroke] = maybeColor(stroke, "currentColor");
+    const [vstrokeOpacity, cstrokeOpacity] = maybeNumber(strokeOpacity);
     super(
       data,
       [
         {name: "x", value: x, scale: "x", optional: true},
         {name: "y1", value: y1, scale: "y", optional: true},
         {name: "y2", value: y2, scale: "y", optional: true},
         {name: "title", value: title, optional: true},
-        {name: "stroke", value: vstroke, scale: "color", optional: true}
+        {name: "stroke", value: vstroke, scale: "color", optional: true},
+        {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true}
       ],
       options
     );
-    Style(this, {stroke: cstroke, ...options});
+    Style(this, {stroke: cstroke, strokeOpacity: cstrokeOpacity, ...options});
     this.insetTop = number(insetTop);
     this.insetBottom = number(insetBottom);
   }
   render(
     I,
     {x, y},
-    {x: X, y1: Y1, y2: Y2, title: L, stroke: S},
+    {x: X, y1: Y1, y2: Y2, title: L, stroke: S, strokeOpacity: SO},
     {width, height, marginTop, marginRight, marginLeft, marginBottom}
   ) {
     const index = filter(I, X, Y1, Y2, S);
@@ -53,6 +56,7 @@ export class RuleX extends Mark {
             .attr("y1", Y1 ? i => Y1[i] + this.insetTop : marginTop + this.insetTop)
             .attr("y2", Y2 ? (y.bandwidth ? i => Y2[i] + y.bandwidth() - this.insetBottom : i => Y2[i] - this.insetBottom) : height - marginBottom - this.insetBottom)
             .call(applyAttr, "stroke", S && (i => S[i]))
+            .call(applyAttr, "stroke-opacity", SO && (i => SO[i]))
             .call(title(L)))
       .node();
   }
@@ -67,32 +71,35 @@ export class RuleY extends Mark {
       y,
       title,
       stroke,
+      strokeOpacity,
       inset = 0,
       insetRight = inset,
       insetLeft = inset,
       ...options
     } = {}
   ) {
     const [vstroke, cstroke] = maybeColor(stroke, "currentColor");
+    const [vstrokeOpacity, cstrokeOpacity] = maybeNumber(strokeOpacity);
     super(
       data,
       [
         {name: "y", value: y, scale: "y", optional: true},
         {name: "x1", value: x1, scale: "x", optional: true},
         {name: "x2", value: x2, scale: "x", optional: true},
         {name: "title", value: title, optional: true},
-        {name: "stroke", value: vstroke, scale: "color", optional: true}
+        {name: "stroke", value: vstroke, scale: "color", optional: true},
+        {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true}
       ],
       options
     );
-    Style(this, {stroke: cstroke, ...options});
+    Style(this, {stroke: cstroke, strokeOpacity: cstrokeOpacity, ...options});
     this.insetRight = number(insetRight);
     this.insetLeft = number(insetLeft);
   }
   render(
     I,
     {x, y},
-    {y: Y, x1: X1, x2: X2, title: L, stroke: S},
+    {y: Y, x1: X1, x2: X2, title: L, stroke: S, strokeOpacity: SO},
     {width, height, marginTop, marginRight, marginLeft, marginBottom}
   ) {
     const index = filter(I, Y, X1, X2);
@@ -108,6 +115,7 @@ export class RuleY extends Mark {
             .attr("y1", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
             .attr("y2", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
             .call(applyAttr, "stroke", S && (i => S[i]))
+            .call(applyAttr, "stroke-opacity", SO && (i => SO[i]))
             .call(title(L)))
       .node();
   }