rebased

Author: Fil

src/axis.js

@@ -14,7 +14,8 @@ export class AxisX {
     label,
     labelAnchor,
     labelOffset,
-    tickRotate
+    tickRotate,
+    className
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["top", "bottom"]);
@@ -27,6 +28,7 @@ export class AxisX {
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
     this.labelOffset = number(labelOffset);
     this.tickRotate = number(tickRotate);
+    this.className = className;
   }
   render(
     index,
@@ -51,12 +53,14 @@ export class AxisX {
       label,
       labelAnchor,
       labelOffset,
-      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)
@@ -94,7 +98,8 @@ export class AxisY {
     label,
     labelAnchor,
     labelOffset,
-    tickRotate
+    tickRotate,
+    className
   } = {}) {
     this.name = name;
     this.axis = keyword(axis, "axis", ["left", "right"]);
@@ -107,6 +112,7 @@ export class AxisY {
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
     this.labelOffset = number(labelOffset);
     this.tickRotate = number(tickRotate);
+    this.className = className;
   }
   render(
     index,
@@ -129,12 +135,14 @@ export class AxisY {
       label,
       labelAnchor,
       labelOffset,
-      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

@@ -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();
@@ -70,13 +71,14 @@ 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};
     const marksValues = marksChannels.map(channels => values(channels, scales));
     return create("svg:g")
+        .attr("class", className)
         .call(g => {
           if (fy && axes.y) {
             const domain = fy.domain();

src/plot.js

@@ -6,7 +6,7 @@ import {Scales, autoScaleRange} from "./scales.js";
 import {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

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