deterministic class name (#1446)

* deterministic class name

* fix marginLeft

* minimize diff

Author: mbostock

src/legends.js

@@ -40,7 +40,7 @@ export function exposeLegends(scales, context, defaults = {}) {
 }
 
 function legendOptions({className, ...context}, {label, ticks, tickFormat} = {}, options) {
-  return inherit(options, {className: `${className}-legend`, ...context}, {label, ticks, tickFormat});
+  return inherit(options, {className, ...context}, {label, ticks, tickFormat});
 }
 
 function legendColor(color, {legend = true, ...options}) {

src/legends/ramp.js

@@ -29,26 +29,27 @@ export function legendRamp(color, options) {
   if (tickFormat === null) tickFormat = () => null;
 
   const svg = create("svg", context)
-    .attr("class", className)
+    .attr("class", `${className}-ramp`)
     .attr("font-family", "system-ui, sans-serif")
     .attr("font-size", 10)
     .attr("width", width)
     .attr("height", height)
     .attr("viewBox", `0 0 ${width} ${height}`)
     .call((svg) =>
-      svg.append("style").text(`
-        .${className} {
-          display: block;
-          background: white;
-          height: auto;
-          height: intrinsic;
-          max-width: 100%;
-          overflow: visible;
-        }
-        .${className} text {
-          white-space: pre;
-        }
-      `)
+      // Warning: if you edit this, change defaultClassName.
+      svg.append("style").text(
+        `.${className}-ramp {
+  display: block;
+  background: white;
+  height: auto;
+  height: intrinsic;
+  max-width: 100%;
+  overflow: visible;
+}
+.${className}-ramp text {
+  white-space: pre;
+}`
+      )
     )
     .call(applyInlineStyles, style);
 

src/legends/swatches.js

@@ -15,22 +15,16 @@ function maybeScale(scale, key) {
 export function legendSwatches(color, {opacity, ...options} = {}) {
   if (!isOrdinalScale(color) && !isThresholdScale(color))
     throw new Error(`swatches legend requires ordinal or threshold color scale (not ${color.type})`);
-  return legendItems(
-    color,
-    options,
-    (selection, scale) =>
-      selection
-        .append("svg")
-        .attr("fill", scale.scale)
-        .attr("fill-opacity", maybeNumberChannel(opacity)[1])
-        .append("rect")
-        .attr("width", "100%")
-        .attr("height", "100%"),
-    (className) => `.${className}-swatch svg {
-        width: var(--swatchWidth);
-        height: var(--swatchHeight);
-        margin-right: 0.5em;
-      }`
+  return legendItems(color, options, (selection, scale, width, height) =>
+    selection
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("fill", scale.scale)
+      .attr("fill-opacity", maybeNumberChannel(opacity)[1])
+      .append("rect")
+      .attr("width", "100%")
+      .attr("height", "100%")
   );
 }
 
@@ -55,36 +49,27 @@ export function legendSymbols(
   fillOpacity = maybeNumberChannel(fillOpacity)[1];
   strokeOpacity = maybeNumberChannel(strokeOpacity)[1];
   strokeWidth = maybeNumberChannel(strokeWidth)[1];
-  return legendItems(
-    symbol,
-    options,
-    (selection) =>
-      selection
-        .append("svg")
-        .attr("viewBox", "-8 -8 16 16")
-        .attr("fill", vf === "color" ? (d) => sf.scale(d) : null)
-        .attr("stroke", vs === "color" ? (d) => ss.scale(d) : null)
-        .append("path")
-        .attr("d", (d) => {
-          const p = path();
-          symbol.scale(d).draw(p, size);
-          return p;
-        }),
-    (className) => `.${className}-swatch > svg {
-        width: var(--swatchWidth);
-        height: var(--swatchHeight);
-        margin-right: 0.5em;
-        overflow: visible;
-        fill: ${cf};
-        fill-opacity: ${fillOpacity};
-        stroke: ${cs};
-        stroke-width: ${strokeWidth}px;
-        stroke-opacity: ${strokeOpacity};
-      }`
+  return legendItems(symbol, options, (selection, scale, width, height) =>
+    selection
+      .append("svg")
+      .attr("viewBox", "-8 -8 16 16")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("fill", vf === "color" ? (d) => sf.scale(d) : cf)
+      .attr("fill-opacity", fillOpacity)
+      .attr("stroke", vs === "color" ? (d) => ss.scale(d) : cs)
+      .attr("stroke-opacity", strokeOpacity)
+      .attr("stroke-width", strokeWidth)
+      .append("path")
+      .attr("d", (d) => {
+        const p = path();
+        symbol.scale(d).draw(p, size);
+        return p;
+      })
   );
 }
 
-function legendItems(scale, options = {}, swatch, swatchStyle) {
+function legendItems(scale, options = {}, swatch) {
   let {
     columns,
     tickFormat,
@@ -102,35 +87,28 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
   className = maybeClassName(className);
   tickFormat = maybeAutoTickFormat(tickFormat, scale.domain);
 
-  const swatches = create("div", context)
-    .attr("class", className)
-    .attr(
-      "style",
-      `
-        --swatchWidth: ${+swatchWidth}px;
-        --swatchHeight: ${+swatchHeight}px;
-      `
-    );
+  const swatches = create("div", context).attr(
+    "class",
+    `${className}-swatches ${className}-swatches-${columns != null ? "columns" : "wrap"}`
+  );
 
   let extraStyle;
 
   if (columns != null) {
-    extraStyle = `
-      .${className}-swatch {
-        display: flex;
-        align-items: center;
-        break-inside: avoid;
-        padding-bottom: 1px;
-      }
-      .${className}-swatch::before {
-        flex-shrink: 0;
-      }
-      .${className}-label {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    `;
+    extraStyle = `.${className}-swatches-columns .${className}-swatch {
+  display: flex;
+  align-items: center;
+  break-inside: avoid;
+  padding-bottom: 1px;
+}
+.${className}-swatches-columns .${className}-swatch::before {
+  flex-shrink: 0;
+}
+.${className}-swatches-columns .${className}-swatch-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}`;
 
     swatches
       .style("columns", columns)
@@ -139,59 +117,52 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       .enter()
       .append("div")
       .attr("class", `${className}-swatch`)
-      .call(swatch, scale)
+      .call(swatch, scale, swatchWidth, swatchHeight)
       .call((item) =>
-        item.append("div").attr("class", `${className}-label`).attr("title", tickFormat).text(tickFormat)
+        item.append("div").attr("class", `${className}-swatch-label`).attr("title", tickFormat).text(tickFormat)
       );
   } else {
-    extraStyle = `
-      .${className} {
-        display: flex;
-        align-items: center;
-        min-height: 33px;
-        flex-wrap: wrap;
-      }
-      .${className}-swatch {
-        display: inline-flex;
-        align-items: center;
-        margin-right: 1em;
-      }
-    `;
+    extraStyle = `.${className}-swatches-wrap {
+  display: flex;
+  align-items: center;
+  min-height: 33px;
+  flex-wrap: wrap;
+}
+.${className}-swatches-wrap .${className}-swatch {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 1em;
+}`;
 
     swatches
       .selectAll()
       .data(scale.domain)
       .enter()
       .append("span")
       .attr("class", `${className}-swatch`)
-      .call(swatch, scale)
+      .call(swatch, scale, swatchWidth, swatchHeight)
       .append(function () {
         return this.ownerDocument.createTextNode(tickFormat.apply(this, arguments));
       });
   }
 
   return swatches
     .call((div) =>
-      div.insert("style", "*").text(`
-        .${className} {
-          font-family: system-ui, sans-serif;
-          font-size: 10px;
-          margin-bottom: 0.5em;${
-            marginLeft === undefined
-              ? ""
-              : `
-          margin-left: ${+marginLeft}px;`
-          }${
-        width === undefined
-          ? ""
-          : `
-          width: ${width}px;`
-      }
-        }
-        ${swatchStyle(className)}
-        ${extraStyle}
-      `)
+      div.insert("style", "*").text(
+        `.${className}-swatches {
+  font-family: system-ui, sans-serif;
+  font-size: 10px;
+  margin-bottom: 0.5em;
+}
+.${className}-swatch > svg {
+  margin-right: 0.5em;
+  overflow: visible;
+}
+${extraStyle}`
+      )
     )
+    .style("margin-left", marginLeft ? `${+marginLeft}px` : null)
+    .style("width", width === undefined ? null : `${+width}px`)
     .style("font-variant", impliedString(fontVariant, "normal"))
     .call(applyInlineStyles, style)
     .node();

src/plot.js

@@ -216,19 +216,20 @@ export function plot(options = {}) {
     .attr("aria-label", ariaLabel)
     .attr("aria-description", ariaDescription)
     .call((svg) =>
-      svg.append("style").text(`
-        .${className} {
-          display: block;
-          background: white;
-          height: auto;
-          height: intrinsic;
-          max-width: 100%;
-        }
-        .${className} text,
-        .${className} tspan {
-          white-space: pre;
-        }
-      `)
+      // Warning: if you edit this, change defaultClassName.
+      svg.append("style").text(
+        `.${className} {
+  display: block;
+  background: white;
+  height: auto;
+  height: intrinsic;
+  max-width: 100%;
+}
+.${className} text,
+.${className} tspan {
+  white-space: pre;
+}`
+      )
     )
     .call(applyInlineStyles, style)
     .node();

src/style.js

@@ -419,7 +419,9 @@ const validClassName =
   /^-?([_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])*$/i;
 
 export function maybeClassName(name) {
-  if (name === undefined) return `plot-${Math.random().toString(16).slice(2)}`;
+  // The default should be changed whenever the default styles are changed, so
+  // as to avoid conflict when multiple versions of Plot are on the page.
+  if (name === undefined) return "plot-d6a7b5";
   name = `${name}`;
   if (!validClassName.test(name)) throw new Error(`invalid class name: ${name}`);
   return name;