propagate className option to legends (#1441)

Author: mbostock

src/context.d.ts

@@ -8,6 +8,9 @@ export interface Context {
    */
   document: Document;
 
+  /** The Plot’s (typically generated) class name, for custom styles. */
+  className: string;
+
   /** The current projection, if any. */
   projection?: GeoStreamWrapper;
 }

src/context.js

@@ -1,9 +1,9 @@
 import {creator, select} from "d3";
 import {createProjection} from "./projection.js";
 
-export function createContext(options = {}, dimensions) {
+export function createContext(options = {}, dimensions, className) {
   const {document = typeof window !== "undefined" ? window.document : undefined} = options;
-  return {document, projection: createProjection(options, dimensions)};
+  return {document, className, projection: createProjection(options, dimensions)};
 }
 
 export function create(name, {document}) {

src/legends.js

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

src/plot.js

@@ -141,7 +141,7 @@ export function plot(options = {}) {
   const {fx, fy} = scales;
   const subdimensions = fx || fy ? innerDimensions(scaleDescriptors, dimensions) : dimensions;
   const superdimensions = fx || fy ? actualDimensions(scales, dimensions) : dimensions;
-  const context = createContext(options, subdimensions, scaleDescriptors);
+  const context = createContext(options, subdimensions, className);
 
   // Reinitialize; for deriving channels dependent on other channels.
   const newByScale = new Set();