className option for plot, facets, axes and marks

src/axis.js

@@ -1,7 +1,7 @@
 import {axisTop, axisBottom, axisRight, axisLeft, create, format, utcFormat} from "d3";
 import {formatIsoDate} from "./format.js";
 import {boolean, take, number, string, keyword, maybeKeyword, constant, isTemporal} from "./mark.js";
-
+import {validateClassName} from "./style.js";
 export class AxisX {
   constructor({
     name = "x",
@@ -15,7 +15,8 @@ export class AxisX {
     labelAnchor,
     labelOffset,
     line,
-    tickRotate
+    tickRotate,
+    className
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["top", "bottom"]);
@@ -29,6 +30,7 @@ export class AxisX {
     this.labelOffset = number(labelOffset);
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
+    this.className = validateClassName(className);
   }
   render(
     index,
@@ -54,12 +56,14 @@ export class AxisX {
       labelAnchor,
       labelOffset,
       line,
-      tickRotate
+      tickRotate,
+      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(createAxis(axis === "top" ? axisTop : axisBottom, x, this))
         .call(maybeTickRotate, tickRotate)
@@ -98,7 +102,8 @@ export class AxisY {
     labelAnchor,
     labelOffset,
     line,
-    tickRotate
+    tickRotate,
+    className
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["left", "right"]);
@@ -112,6 +117,7 @@ export class AxisY {
     this.labelOffset = number(labelOffset);
     this.line = boolean(line);
     this.tickRotate = number(tickRotate);
+    this.className = validateClassName(className);
   }
   render(
     index,
@@ -135,12 +141,14 @@ export class AxisY {
       labelAnchor,
       labelOffset,
       line,
-      tickRotate
+      tickRotate,
+      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(createAxis(axis === "right" ? axisRight : axisLeft, y, this))
         .call(maybeTickRotate, tickRotate)

src/facet.js

@@ -2,7 +2,7 @@ import {cross, difference, groups, InternMap} from "d3";
 import {create} from "d3";
 import {Mark, first, second, markify, where} from "./mark.js";
 import {applyScales} from "./scales.js";
-import {filterStyles} from "./style.js";
+import {filterStyles, validateClassName} from "./style.js";
 
 export function facets(data, {x, y, ...options}, marks) {
   return x === undefined && y === undefined
@@ -11,7 +11,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 = []) {
     if (data == null) throw new Error("missing facet data");
     super(
       data,
@@ -25,6 +25,7 @@ class Facet extends Mark {
     // The following fields are set by initialize:
     this.marksChannels = undefined; // array of mark channels
     this.marksIndexByFacet = undefined; // map from facet key to array of mark indexes
+    this.className = className;
   }
   initialize() {
     const {index, channels} = super.initialize();
@@ -70,6 +71,7 @@ class Facet extends Mark {
   }
   render(I, scales, channels, dimensions, axes) {
     const {marks, marksChannels, marksIndexByFacet} = this;
+    const className = validateClassName(this.className);
     const {fx, fy} = scales;
     const fyDomain = fy && fy.domain();
     const fxDomain = fx && fx.domain();
@@ -78,6 +80,7 @@ class Facet extends Mark {
     const subdimensions = {...dimensions, ...fxMargins, ...fyMargins};
     const marksValues = marksChannels.map(channels => applyScales(channels, scales));
     return create("svg:g")
+        .attr("class", className)
         .call(g => {
           if (fy && axes.y) {
             const axis1 = axes.y, axis2 = nolabel(axis1);

src/plot.js

@@ -3,10 +3,11 @@ import {Axes, autoAxisTicks, autoAxisLabels} from "./axes.js";
 import {facets} from "./facet.js";
 import {markify} from "./mark.js";
 import {Scales, autoScaleRange, applyScales} from "./scales.js";
-import {filterStyles, offset} from "./style.js";
+import {filterStyles, offset, validateClassName} from "./style.js";
 
 export function plot(options = {}) {
   const {facet, style, caption} = options;
+  const className = validateClassName(options.className === undefined ? "plot" : options.className);
 
   // When faceting, wrap all marks in a faceting mark.
   if (facet !== undefined) {
@@ -69,7 +70,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

@@ -6,6 +6,7 @@ export const offset = typeof window !== "undefined" && window.devicePixelRatio >
 export function styles(
   mark,
   {
+    className,
     title,
     fill,
     fillOpacity,
@@ -66,6 +67,7 @@ export function styles(
     mark.fillOpacity = impliedNumber(cfillOpacity, 1);
   }
 
+  mark.className = string(className);
   mark.stroke = impliedString(cstroke, "none");
   mark.strokeWidth = impliedNumber(cstrokeWidth, 1);
   mark.strokeOpacity = impliedNumber(cstrokeOpacity, 1);
@@ -106,6 +108,7 @@ export function applyGroupedChannelStyles(selection, {title: L, fill: F, fillOpa
 }
 
 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);
@@ -153,3 +156,14 @@ export function filterStyles(index, {fill: F, fillOpacity: FO, stroke: S, stroke
 function none(color) {
   return color == null || color === "none";
 }
+
+function validClassName(str) {
+  return typeof str === "string" &&
+    !!str.match(/^-?([_a-z]|[\240-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])([_a-z0-9-]|[\240-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*$/);
+}
+
+export function validateClassName(str) {
+  if (str == null) return null;
+  if (validClassName(str)) return str;
+  throw new Error(`Invalid class name ${str}`);
+}

test/plots/penguin-sex-mass-culmen-species.js

@@ -7,16 +7,23 @@ export default async function() {
     inset: 10,
     height: 320,
     grid: true,
+    className: "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(),
@@ -29,7 +36,8 @@ export default async function() {
         y: "culmen_length_mm",
         stroke: "species",
         fill: "species",
-        fillOpacity: 0.2
+        fillOpacity: 0.2,
+        className: "bin"
       }))
     ]
   });