Add className option for marks

src/plot.js

@@ -19,7 +19,7 @@ import {
 } from "./options.js";
 import {Scales, ScaleFunctions, autoScaleRange, exposeScales} from "./scales.js";
 import {position, registry as scaleRegistry} from "./scales/index.js";
-import {applyInlineStyles, maybeClassName, maybeClip, styles} from "./style.js";
+import {applyInlineStyles, maybeClassName, maybeClassNameOptional, maybeClip, styles} from "./style.js";
 import {basic, initializer} from "./transforms/basic.js";
 import {maybeInterval} from "./transforms/interval.js";
 import {consumeWarnings, warn} from "./warnings.js";
@@ -683,6 +683,7 @@ export class Mark {
     this.dx = +dx || 0;
     this.dy = +dy || 0;
     this.clip = maybeClip(clip);
+    this.className = maybeClassNameOptional(options.className);
   }
   initialize(facets, facetChannels) {
     let data = arrayify(this.data);

src/style.js

@@ -297,6 +297,7 @@ export function applyIndirectStyles(selection, mark, scales, dimensions) {
   applyAttr(selection, "aria-label", mark.ariaLabel);
   applyAttr(selection, "aria-description", mark.ariaDescription);
   applyAttr(selection, "aria-hidden", mark.ariaHidden);
+  applyAttr(selection, "class", mark.className);
   applyAttr(selection, "fill", mark.fill);
   applyAttr(selection, "fill-opacity", mark.fillOpacity);
   applyAttr(selection, "stroke", mark.stroke);
@@ -378,6 +379,10 @@ export function maybeClassName(name) {
   return name;
 }
 
+export function maybeClassNameOptional(name) {
+  return name === undefined ? undefined : maybeClassName(name);
+}
+
 export function applyInlineStyles(selection, style) {
   if (typeof style === "string") {
     selection.property("style", style);

test/plots/className-on-marks.js

@@ -0,0 +1,40 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function () {
+  const sales = await d3.csv("data/fruit-sales.csv", d3.autoType);
+  const plotSelection = d3.select(
+    Plot.plot({
+      marginLeft: 50,
+      y: {
+        label: null,
+        reverse: true
+      },
+      marks: [
+        Plot.barX(
+          sales,
+          Plot.groupY({x: "sum"}, {x: "units", y: "fruit", sort: {y: "x", reverse: true}, className: "fruitbars"})
+        ),
+        Plot.ruleX([0])
+      ]
+    })
+  );
+
+  const div = d3.create("div");
+  div.node().appendChild(plotSelection.node());
+
+  plotSelection.select(".fruitbars").attr("stroke", "gold");
+  plotSelection
+    .select(".fruitbars")
+    .on("mouseover", function (d) {
+      d3.select(d.target).attr("fill", "red");
+    })
+    .on("mouseout", function (d) {
+      d3.select(d.target).attr("fill", "black");
+    });
+  plotSelection.select(".fruitbars").attr("fill", "black");
+
+  const numRects = plotSelection.selectAll(".fruitbars rect").size();
+  div.append("p").text(`There are ${numRects} instances of 'fruitbars' class rects.`);
+  return div.node();
+}

test/plots/index.js

@@ -36,6 +36,7 @@ export {default as carsJitter} from "./cars-jitter.js";
 export {default as carsMpg} from "./cars-mpg.js";
 export {default as carsParcoords} from "./cars-parcoords.js";
 export {default as clamp} from "./clamp.js";
+export {default as classNameOnMarks} from "./className-on-marks.js";
 export {default as collapsedHistogram} from "./collapsed-histogram.js";
 export {default as covidIhmeProjectedDeaths} from "./covid-ihme-projected-deaths.js";
 export {default as crimeanWarArrow} from "./crimean-war-arrow.js";