rebased

Author: Fil

src/axis.js

@@ -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 = 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 = 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

@@ -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();
@@ -69,7 +70,7 @@ class Facet extends Mark {
     return {index, channels: [...channels, ...subchannels]};
   }
   render(I, scales, channels, dimensions, axes) {
-    const {marks, marksChannels, marksIndexByFacet} = this;
+    const {marks, marksChannels, marksIndexByFacet, className} = this;
     const {fx, fy} = scales;
     const fyDomain = fy && fy.domain();
     const fxDomain = fx && fx.domain();
@@ -78,6 +79,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

@@ -6,7 +6,7 @@ import {Scales, autoScaleRange, applyScales} from "./scales.js";
 import {filterStyles, offset} from "./style.js";
 
 export function plot(options = {}) {
-  const {facet, style, caption} = options;
+  const {facet, style, caption, className = "plot"} = options;
 
   // When faceting, wrap all marks in a faceting mark.
   if (facet !== undefined) {
@@ -69,7 +69,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);

test/output/penguinSexMassCulmenSpecies.svg

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