className

src/axis.js

@@ -13,7 +13,8 @@ export class AxisX {
     grid,
     label,
     labelAnchor,
-    labelOffset
+    labelOffset,
+    className = "axisX"
   } = {}) {
     this.name = name;
     this.axis = (axis + "").toLowerCase();
@@ -26,6 +27,7 @@ export class AxisX {
     this.label = label;
     this.labelAnchor = labelAnchor;
     this.labelOffset = labelOffset;
+    this.className = className;
   }
   render(
     index,
@@ -59,6 +61,7 @@ export class AxisX {
     const offsetSign = axis === "top" ? -1 : 1;
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
     return create("svg:g")
+        .classed(this.className, true)
         .attr("transform", `translate(0,${ty})`)
         .call((axis === "top" ? axisTop : axisBottom)(round(x))
             .ticks(Array.isArray(ticks) ? null : ticks, typeof tickFormat === "function" ? null : tickFormat)
@@ -100,7 +103,8 @@ export class AxisY {
     grid,
     label,
     labelAnchor,
-    labelOffset
+    labelOffset,
+    className = "axisY"
   } = {}) {
     this.name = name;
     this.axis = axis = (axis + "").toLowerCase();
@@ -113,6 +117,7 @@ export class AxisY {
     this.label = label;
     this.labelAnchor = labelAnchor;
     this.labelOffset = labelOffset;
+    this.className = className;
   }
   render(
     index,
@@ -144,6 +149,7 @@ export class AxisY {
     const offsetSign = axis === "left" ? -1 : 1;
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);
     return create("svg:g")
+        .classed(this.className, true)
         .attr("transform", `translate(${tx},0)`)
         .call((axis === "right" ? axisRight : axisLeft)(round(y))
             .ticks(Array.isArray(ticks) ? null : ticks, typeof tickFormat === "function" ? null : tickFormat)

src/facet.js

@@ -9,7 +9,7 @@ export function facets(data, {x, y, ...options}, marks) {
 }
 
 class Facet extends Mark {
-  constructor(data, {x, y, transform} = {}, marks = []) {
+  constructor(data, {x, y, className = "facet", transform} = {}, marks = []) {
     super(
       data,
       [
@@ -23,6 +23,7 @@ class Facet extends Mark {
     this.marksChannels = undefined; // array of mark channels
     this.marksIndex = undefined; // array of mark indexes (for non-faceted marks)
     this.marksIndexByFacet = undefined; // map from facet key to array of mark indexes
+    this.className = className;
   }
   initialize() {
     const {index, channels} = super.initialize();
@@ -73,7 +74,9 @@ class Facet extends Mark {
     const fyMargins = fy && {marginTop: 0, marginBottom: 0, height: fy.bandwidth()};
     const fxMargins = fx && {marginRight: 0, marginLeft: 0, width: fx.bandwidth()};
     const subdimensions = {...dimensions, ...fxMargins, ...fyMargins};
+    const className = this.className;
     return create("svg:g")
+        .classed(className, true)
         .call(g => {
           if (fy && axes.y) {
             const domain = fy.domain();

src/marks/area.js

@@ -43,7 +43,7 @@ export class Area extends Mark {
       transform
     );
     this.curve = Curve(curve);
-    Style(this, {fill: cfill, stroke: cstroke, ...style});
+    Style(this, {fill: cfill, stroke: cstroke, className: "area", ...style});
   }
   render(I, {x, y, color}, {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, z: Z, title: L, fill: F, stroke: S}) {
     return create("svg:g")
@@ -73,10 +73,10 @@ export function area(data, options) {
 
 export function areaX(data, {x, x1, x2, y = indexOf, ...options} = {}) {
   ([x1, x2] = maybeZero(x, x1, x2));
-  return new Area(data, {...options, x1, x2, y1: y, y2: undefined});
+  return new Area(data, {className: "areaX", ...options, x1, x2, y1: y, y2: undefined});
 }
 
 export function areaY(data, {x = indexOf, y, y1, y2, ...options} = {}) {
   ([y1, y2] = maybeZero(y, y1, y2));
-  return new Area(data, {...options, x1: x, x2: undefined, y1, y2});
+  return new Area(data, {className: "areaY", ...options, x1: x, x2: undefined, y1, y2});
 }

src/marks/bar.js

@@ -36,7 +36,7 @@ export class AbstractBar extends Mark {
       ],
       transform
     );
-    Style(this, {fill: cfill, stroke: cstroke, ...style});
+    Style(this, {fill: cfill, stroke: cstroke, className: "bar", ...style});
     this.insetTop = number(insetTop);
     this.insetRight = number(insetRight);
     this.insetBottom = number(insetBottom);

src/marks/bin.js

@@ -10,6 +10,7 @@ export function bin(data, {x, y, domain, thresholds, normalize, transform, ...op
     {
       insetTop: 1,
       insetLeft: 1,
+      className: "bin",
       ...options,
       transform: bin2({x, y, domain, thresholds}),
       fill: normalize ? normalizer(normalize, data.length) : length,
@@ -36,6 +37,7 @@ export function binX(data, {
     data,
     {
       insetLeft: 1,
+      className: "binX",
       ...options,
       transform: bin1({value: x, domain, thresholds, cumulative}),
       y: normalize ? normalizer(normalize, data.length) : length,
@@ -60,6 +62,7 @@ export function binY(data, {
     data,
     {
       insetTop: 1,
+      className: "binY",
       ...options,
       transform: bin1({value: y, domain, thresholds, cumulative}),
       x: normalize ? normalizer(normalize, data.length) : length,

src/marks/cell.js

@@ -10,7 +10,7 @@ export class Cell extends AbstractBar {
         {name: "x", value: x, scale: "x", type: "band", optional: true},
         {name: "y", value: y, scale: "y", type: "band", optional: true}
       ],
-      options
+      {className: "cell", ...options}
     );
   }
   _transform() {
@@ -26,9 +26,9 @@ export function cell(data, options) {
 }
 
 export function cellX(data, {x = identity, ...options} = {}) {
-  return new Cell(data, {...options, x, y: null});
+  return new Cell(data, {className: "cellX", ...options, x, y: null});
 }
 
 export function cellY(data, {y = identity, ...options} = {}) {
-  return new Cell(data, {...options, y, x: null});
+  return new Cell(data, {className: "cellY", ...options, y, x: null});
 }

src/marks/dot.js

@@ -40,6 +40,7 @@ export class Dot extends Mark {
       fill: cfill,
       stroke: cstroke,
       strokeWidth: cstroke === "none" ? undefined : 1.5,
+      className: "dot",
       ...style
     });
   }

src/marks/frame.js

@@ -9,7 +9,7 @@ export class Frame extends Mark {
     ...style
   } = {}) {
     super();
-    Style(this, {fill, stroke, ...style});
+    Style(this, {fill, stroke, className: "frame", ...style});
   }
   render(
     index,

src/marks/group.js

@@ -13,6 +13,7 @@ export function group(data, {
   return cell(
     data,
     {
+      className: "group",
       ...options,
       transform: group2(x, y),
       x: maybeLabel(first, x),
@@ -36,6 +37,7 @@ export function groupX(data, {
   return barY(
     data,
     {
+      className: "groupX",
       ...options,
       transform: group1(x),
       x: maybeLabel(first, x),
@@ -59,6 +61,7 @@ export function groupY(data, {
   return barX(
     data,
     {
+      className: "groupY",
       ...options,
       transform: group1(y),
       x1,

src/marks/line.js

@@ -43,6 +43,7 @@ export class Line extends Mark {
       fill: cfill,
       stroke: cstroke,
       strokeWidth: cstroke === "none" ? undefined : 1.5,
+      className: "line",
       ...style
     });
   }
@@ -71,9 +72,9 @@ export function line(data, {x = first, y = second, ...options} = {}) {
 }
 
 export function lineX(data, {x = identity, ...options} = {}) {
-  return new Line(data, {...options, x, y: indexOf});
+  return new Line(data, {className: "lineX", ...options, x, y: indexOf});
 }
 
 export function lineY(data, {y = identity, ...options} = {}) {
-  return new Line(data, {...options, x: indexOf, y});
+  return new Line(data, {className: "lineY", ...options, x: indexOf, y});
 }

src/marks/link.js

@@ -33,7 +33,7 @@ export class Link extends Mark {
       ],
       transform
     );
-    Style(this, {stroke: cstroke, ...style});
+    Style(this, {stroke: cstroke, className: "link", ...style});
   }
   render(
     I,

src/marks/rect.js

@@ -43,7 +43,7 @@ export class Rect extends Mark {
       ],
       transform
     );
-    Style(this, {fill: cfill, stroke: cstroke, ...style});
+    Style(this, {fill: cfill, stroke: cstroke, className: "rect", ...style});
     this.insetTop = number(insetTop);
     this.insetRight = number(insetRight);
     this.insetBottom = number(insetBottom);
@@ -84,9 +84,9 @@ export function rect(data, options) {
 }
 
 export function rectX(data, {x, y1, y2, ...options} = {}) {
-  return new Rect(data, {...options, x1: zero, x2: x, y1, y2});
+  return new Rect(data, {className: "rectX", ...options, x1: zero, x2: x, y1, y2});
 }
 
 export function rectY(data, {x1, x2, y, ...options} = {}) {
-  return new Rect(data, {...options, x1, x2, y1: zero, y2: y});
+  return new Rect(data, {className: "rectY", ...options, x1, x2, y1: zero, y2: y});
 }

src/marks/rule.js

@@ -31,7 +31,7 @@ export class RuleX extends Mark {
       ],
       transform
     );
-    Style(this, {stroke: cstroke, ...style});
+    Style(this, {stroke: cstroke, className: "ruleX", ...style});
   }
   render(
     I,
@@ -85,7 +85,7 @@ export class RuleY extends Mark {
       ],
       transform
     );
-    Style(this, {stroke: cstroke, ...style});
+    Style(this, {stroke: cstroke, className: "ruleY", ...style});
   }
   render(
     I,

src/marks/stack.js

@@ -3,17 +3,17 @@ import {areaX, areaY} from "./area.js";
 import {barX, barY} from "./bar.js";
 
 export function stackAreaX(data, options) {
-  return areaX(...stackX(data, options));
+  return areaX(...stackX(data, {className: "stackAreaX", ...options}));
 }
 
 export function stackAreaY(data, options) {
-  return areaY(...stackY(data, options));
+  return areaY(...stackY(data, {className: "stackAreaY", ...options}));
 }
 
 export function stackBarX(data, options) {
-  return barX(...stackX(data, options));
+  return barX(...stackX(data, {className: "stackBarX", ...options}));
 }
 
 export function stackBarY(data, options) {
-  return barY(...stackY(data, options));
+  return barY(...stackY(data, {className: "stackBarY", ...options}));
 }

src/marks/text.js

@@ -34,7 +34,7 @@ export class Text extends Mark {
       ],
       transform
     );
-    Style(this, {fill: cfill, ...style});
+    Style(this, {fill: cfill, className: "text", ...style});
     this.textAnchor = string(textAnchor);
     this.dx = string(dx);
     this.dy = string(dy);
@@ -68,11 +68,11 @@ export function text(data, options) {
 }
 
 export function textX(data, {x = identity, ...options} = {}) {
-  return new Text(data, {...options, x, y: indexOf});
+  return new Text(data, {className: "textX", ...options, x, y: indexOf});
 }
 
 export function textY(data, {y = identity, ...options} = {}) {
-  return new Text(data, {...options, x: indexOf, y});
+  return new Text(data, {className: "textY", ...options, x: indexOf, y});
 }
 
 function applyTextStyles(selection, style) {

src/marks/tick.js

@@ -27,7 +27,7 @@ class AbstractTick extends Mark {
       ],
       transform
     );
-    Style(this, {stroke: cstroke, ...style});
+    Style(this, {stroke: cstroke, className: "tick", ...style});
   }
   render(I, scales, channels) {
     const {color} = scales;
@@ -59,7 +59,7 @@ export class TickX extends AbstractTick {
         {name: "x", value: x, scale: "x"},
         {name: "y", value: y, scale: "y", type: "band"}
       ],
-      options
+      {className: "tickX", ...options}
     );
   }
   _transform(selection, {x}) {
@@ -87,7 +87,7 @@ export class TickY extends AbstractTick {
         {name: "x", value: x, scale: "x", type: "band"},
         {name: "y", value: y, scale: "y"}
       ],
-      options
+      {className: "tickY", ...options}
     );
   }
   _transform(selection, {y}) {

src/plot.js

@@ -96,7 +96,10 @@ export function plot(options = {}) {
     const channels = markChannels.get(mark);
     const index = markIndex.get(mark);
     const node = mark.render(index, scales, channels, dimensions, axes);
-    if (node != null) svg.append(() => node);
+    if (node != null) {
+      if (mark.className != null) node.classList.add(mark.className);
+      svg.append(() => node);
+    }
   }
 
   return svg.node();

src/style.js

@@ -10,7 +10,8 @@ export function Style(mark, {
   strokeLinecap,
   strokeMiterlimit,
   strokeDasharray,
-  mixBlendMode
+  mixBlendMode,
+  className
 } = {}) {
   mark.fill = impliedString(fill, "currentColor");
   mark.fillOpacity = impliedNumber(fillOpacity, 1);
@@ -22,6 +23,7 @@ export function Style(mark, {
   mark.strokeMiterlimit = impliedNumber(strokeMiterlimit, 1);
   mark.strokeDasharray = string(strokeDasharray);
   mark.mixBlendMode = impliedString(mixBlendMode, "normal");
+  mark.className = impliedString(className);
 }
 
 export function applyIndirectStyles(selection, mark) {
@@ -34,6 +36,7 @@ export function applyIndirectStyles(selection, mark) {
   applyAttr(selection, "stroke-linecap", mark.strokeLinecap);
   applyAttr(selection, "stroke-miterlimit", mark.strokeMiterlimit);
   applyAttr(selection, "stroke-dasharray", mark.strokeDasharray);
+  applyClass(selection, mark.className);
 }
 
 export function applyDirectStyles(selection, mark) {
@@ -44,6 +47,10 @@ export function applyAttr(selection, name, value) {
   if (value != null) selection.attr(name, value);
 }
 
+export function applyClass(selection, value) {
+  if (value != null) selection.classed(value, true);
+}
+
 export function applyStyle(selection, name, value) {
   if (value != null) selection.style(name, value);
 }