strokeWidth as a common style; move the filterDefined definition to style.js

Author: Fil

README.md

@@ -473,10 +473,11 @@ All marks support the following optional channels:
 * **fill** - a fill color; bound to the *color* scale
 * **fillOpacity** - a fill opacity; bound to the *opacity* scale
 * **stroke** - a stroke color; bound to the *color* scale
+* **strokeWidth** - stroke width (in pixels)
 * **strokeOpacity** - a stroke opacity; bound to the *opacity* scale
 * **title** - a tooltip (a string of text, possibly with newlines)
 
-The **fill**, **fillOpacity**, **stroke**, and **strokeOpacity** options can be specified as either channels or constants. When the fill or stroke is specified as a function or array, it is interpreted as a channel; when the fill or stroke is specified as a string, it is interpreted as a constant if a valid CSS color and otherwise it is interpreted as a column name for a channel. Similarly when the fill or stroke opacity is specified as a number, it is interpreted as a constant; otherwise it is interpeted as a channel. When the radius is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
+The **fill**, **fillOpacity**, **stroke**, **strokeWidth**, and **strokeOpacity** options can be specified as either channels or constants. When the fill or stroke is specified as a function or array, it is interpreted as a channel; when the fill or stroke is specified as a string, it is interpreted as a constant if a valid CSS color and otherwise it is interpreted as a column name for a channel. Similarly when the fill or stroke opacity or the stroke width is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel. When the radius is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
 
 The rectangular marks ([bar](#bar), [cell](#cell), and [rect](#rect)) support insets and rounded corner constant options:
 

src/plot.js

@@ -1,10 +1,9 @@
 import {create} from "d3";
 import {Axes, autoAxisTicks, autoAxisLabels} from "./axes.js";
-import {filter} from "./defined.js";
 import {facets} from "./facet.js";
 import {values} from "./mark.js";
 import {Scales, autoScaleRange} from "./scales.js";
-import {offset} from "./style.js";
+import {offset, filterDefined} from "./style.js";
 
 export function plot(options = {}) {
   const {facet, style, caption} = options;
@@ -85,8 +84,7 @@ export function plot(options = {}) {
   for (const mark of marks) {
     const channels = markChannels.get(mark);
     const scaled = values(channels, scales);
-    const index = filter(markIndex.get(mark), scaled.fill, scaled.fillOpacity, scaled.stroke, scaled.strokeOpacity);
-    const node = mark.render(index, scales, scaled, dimensions, axes);
+    const node = mark.render(filterDefined(markIndex.get(mark), scaled), scales, scaled, dimensions, axes);
     if (node != null) svg.appendChild(node);
   }
 

src/style.js

@@ -1,4 +1,5 @@
 import {string, number, maybeColor, maybeNumber, title, titleGroup} from "./mark.js";
+import {filter} from "./defined.js";
 
 export const offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5;
 
@@ -49,12 +50,13 @@ export function styles(
   const [vfill, cfill] = maybeColor(fill, defaultFill);
   const [vfillOpacity, cfillOpacity] = maybeNumber(fillOpacity);
   const [vstrokeOpacity, cstrokeOpacity] = maybeNumber(strokeOpacity);
+  const [vstrokeWidth, cstrokeWidth] = maybeNumber(strokeWidth);
   if (defaultFill !== null) {
     mark.fill = impliedString(cfill, "currentColor");
     mark.fillOpacity = impliedNumber(cfillOpacity, 1);
   }
   mark.stroke = impliedString(cstroke, "none");
-  mark.strokeWidth = impliedNumber(strokeWidth, 1);
+  mark.strokeWidth = impliedNumber(cstrokeWidth, 1);
   mark.strokeOpacity = impliedNumber(cstrokeOpacity, 1);
   mark.strokeLinejoin = impliedString(strokeLinejoin, "miter");
   mark.strokeLinecap = impliedString(strokeLinecap, "butt");
@@ -68,23 +70,26 @@ export function styles(
     {name: "fill", value: vfill, scale: "color", optional: true},
     {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
     {name: "stroke", value: vstroke, scale: "color", optional: true},
-    {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true}
+    {name: "strokeOpacity", value: vstrokeOpacity, scale: "opacity", optional: true},
+    {name: "strokeWidth", value: vstrokeWidth, optional: true}
   ];
 }
 
-export function applyChannelStyles(selection, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}) {
+export function applyChannelStyles(selection, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW}) {
   applyAttr(selection, "fill", F && (i => F[i]));
   applyAttr(selection, "fill-opacity", FO && (i => FO[i]));
   applyAttr(selection, "stroke", S && (i => S[i]));
   applyAttr(selection, "stroke-opacity", SO && (i => SO[i]));
+  applyAttr(selection, "stroke-width", SW && (i => SW[i]));
   title(L)(selection);
 }
 
-export function applyGroupedChannelStyles(selection, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}) {
+export function applyGroupedChannelStyles(selection, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW}) {
   applyAttr(selection, "fill", F && (([i]) => F[i]));
   applyAttr(selection, "fill-opacity", FO && (([i]) => FO[i]));
   applyAttr(selection, "stroke", S && (([i]) => S[i]));
   applyAttr(selection, "stroke-opacity", SO && (([i]) => SO[i]));
+  applyAttr(selection, "stroke-width", SW && (([i]) => SW[i]));
   titleGroup(L)(selection);
 }
 
@@ -128,3 +133,7 @@ export function impliedString(value, impliedValue) {
 export function impliedNumber(value, impliedValue) {
   if ((value = number(value)) !== impliedValue) return value;
 }
+
+export function filterDefined(index, {fill, fillOpacity, stroke, strokeOpacity, strokeWidth}) {
+  return filter(index, fill, fillOpacity, stroke, strokeOpacity, strokeWidth);
+}