className option for plot, facets, axes and marks

supersedes #126

Author: Fil

src/axis.js

@@ -13,7 +13,8 @@ export class AxisX {
     grid,
     label,
     labelAnchor,
-    labelOffset
+    labelOffset,
+    className
   } = {}) {
     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,
@@ -53,12 +55,14 @@ export class AxisX {
       grid,
       label,
       labelAnchor,
-      labelOffset
+      labelOffset,
+      className
     } = this;
     const offset = this.name === "x" ? 0 : axis === "top" ? marginTop - facetMarginTop : marginBottom - facetMarginBottom;
     const offsetSign = axis === "top" ? -1 : 1;
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
     return create("svg:g")
+        .attr("class", className)
         .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 +104,8 @@ export class AxisY {
     grid,
     label,
     labelAnchor,
-    labelOffset
+    labelOffset,
+    className
   } = {}) {
     this.name = name;
     this.axis = axis = (axis + "").toLowerCase();
@@ -113,6 +118,7 @@ export class AxisY {
     this.label = label;
     this.labelAnchor = labelAnchor;
     this.labelOffset = labelOffset;
+    this.className = className;
   }
   render(
     index,
@@ -138,12 +144,14 @@ export class AxisY {
       grid,
       label,
       labelAnchor,
-      labelOffset
+      labelOffset,
+      className
     } = this;
     const offset = this.name === "y" ? 0 : axis === "left" ? marginLeft - facetMarginLeft : marginRight - facetMarginRight;
     const offsetSign = axis === "left" ? -1 : 1;
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);
     return create("svg:g")
+        .attr("class", className)
         .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, ...options} = {}, marks = []) {
+  constructor(data, {x, y, className, ...options} = {}, 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();
@@ -68,12 +69,13 @@ class Facet extends Mark {
     return {index, channels: [...channels, ...subchannels]};
   }
   render(index, scales, channels, dimensions, axes) {
-    const {marks, marksChannels, marksIndex, marksIndexByFacet} = this;
+    const {marks, marksChannels, marksIndex, marksIndexByFacet, className} = this;
     const {fx, fy} = scales;
     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};
     return create("svg:g")
+        .attr("class", className)
         .call(g => {
           if (fy && axes.y) {
             const domain = fy.domain();

src/plot.js

@@ -4,7 +4,7 @@ import {facets} from "./facet.js";
 import {Scales, autoScaleRange} from "./scales.js";
 
 export function plot(options = {}) {
-  const {facet, style} = options;
+  const {facet, style, className = "plot"} = options;
 
   // When faceting, wrap all marks in a faceting mark.
   if (facet !== undefined) {
@@ -73,7 +73,7 @@ export function plot(options = {}) {
   const {width, height} = dimensions;
 
   const svg = create("svg")
-      .attr("class", "plot")
+      .attr("class", className)
       .attr("fill", "currentColor")
       .attr("text-anchor", "middle")
       .attr("width", width)

src/style.js

@@ -3,6 +3,7 @@ import {string, number} from "./mark.js";
 export const offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5;
 
 export function Style(mark, {
+  className,
   fill,
   fillOpacity,
   stroke,
@@ -14,6 +15,7 @@ export function Style(mark, {
   strokeDasharray,
   mixBlendMode
 } = {}) {
+  mark.className = string(className);
   mark.fill = impliedString(fill, "currentColor");
   mark.fillOpacity = impliedNumber(fillOpacity, 1);
   mark.stroke = impliedString(stroke, "none");
@@ -27,6 +29,7 @@ export function Style(mark, {
 }
 
 export function applyIndirectStyles(selection, mark) {
+  applyAttr(selection, "class", mark.className);
   applyAttr(selection, "fill", mark.fill);
   applyAttr(selection, "fill-opacity", mark.fillOpacity);
   applyAttr(selection, "stroke", mark.stroke);

test/output/penguinSexMassCulmenSpecies.svg

@@ -7,25 +7,35 @@ export default async function() {
     inset: 10,
     height: 320,
     grid: true,
+    className: "plot classtest",
     x: {
       ticks: 10,
-      tickFormat: "~s"
+      tickFormat: "~s",
+      className: "axis-x"
     },
     y: {
-      ticks: 10
+      ticks: 10,
+      className: "axis-y"
     },
     facet: {
       data,
-      x: "sex"
+      x: "sex",
+      className: "facet"
+    },
+    fx: {
+      className: "axis-fx"
     },
     marks: [
-      Plot.frame(),
+      Plot.frame({
+        className: "frame"
+      }),
       Plot.dot(data, Plot.binR({
         x: "body_mass_g",
         y: "culmen_length_mm",
         stroke: "species",
         fill: "species",
-        fillOpacity: 0.1
+        fillOpacity: 0.1,
+        className: "bin"
       }))
     ]
   });