opacity legend 2

src/legends.js

@@ -1,8 +1,9 @@
-import {rgb} from "d3";
+import {select} from "d3";
 import {createContext} from "./context.js";
 import {legendRamp} from "./legends/ramp.js";
 import {isSymbolColorLegend, legendSwatches, legendSymbols} from "./legends/swatches.js";
 import {inherit, isScaleOptions} from "./options.js";
+import {getFilterId} from "./style.js";
 import {normalizeScale} from "./scales.js";
 
 const legendRegistry = new Map([
@@ -56,16 +57,23 @@ function legendColor(color, {legend = true, ...options}) {
   }
 }
 
-function legendOpacity({type, interpolate, ...scale}, {legend = true, color = rgb(0, 0, 0), ...options}) {
+function legendOpacity({type, interpolate, ...scale}, {legend = true, color = "currentColor", ...options}) {
   if (!interpolate) throw new Error(`${type} opacity scales are not supported`);
   if (legend === true) legend = "ramp";
   if (`${legend}`.toLowerCase() !== "ramp") throw new Error(`${legend} opacity legends are not supported`);
-  return legendColor({type, ...scale, interpolate: interpolateOpacity(color)}, {legend, ...options});
+  const node = legendColor({type, ...scale, interpolate: interpolateOpacity}, {legend, ...options});
+  if (!node) return;
+  const fid = getFilterId();
+  const svg = select(node);
+  svg.select("image").attr("filter", `url(#${fid})`);
+  const filter = svg.append("filter").attr("id", fid);
+  filter.append("feFlood").attr("flood-color", color);
+  filter.append("feComposite").attr("in2", "SourceGraphic").attr("operator", "in");
+  return node;
 }
 
-function interpolateOpacity(color) {
-  const {r, g, b} = rgb(color) || rgb(0, 0, 0); // treat invalid color as black
-  return (t) => `rgba(${r},${g},${b},${t})`;
+function interpolateOpacity(t) {
+  return `rgba(0,0,0,${t})`;
 }
 
 export function createLegends(scales, context, options) {

src/style.js

@@ -13,12 +13,17 @@ export function setOffset(o) {
 }
 
 let nextClipId = 0;
+let nextFilterId = 0;
 let nextPatternId = 0;
 
 export function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
 
+export function getFilterId() {
+  return `plot-filter-${++nextFilterId}`;
+}
+
 export function getPatternId() {
   return `plot-pattern-${++nextPatternId}`;
 }

test/plot-snapshot.js

@@ -17,9 +17,10 @@ export function test(plot) {
       svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
     }
     reindexStyle(root);
-    reindexMarker(root);
-    reindexClip(root);
-    reindexPattern(root);
+    reindexIri(root, "clip", ["clip-path"]);
+    reindexIri(root, "filter", ["filter"]);
+    reindexIri(root, "marker", ["marker-start", "marker-mid", "marker-end"]);
+    reindexIri(root, "pattern", ["fill", "stroke"]);
     const actual = normalizeHtml(root.outerHTML);
     const outfile = join("test", "output", `${name}.${ext}`);
     const diffile = join("test", "output", `${name}-changed.${ext}`);
@@ -63,50 +64,16 @@ function reindexStyle(root) {
   }
 }
 
-function reindexMarker(root) {
+function reindexIri(root, name, attributes) {
   let index = 0;
   const map = new Map();
-  for (const node of root.querySelectorAll("[id^=plot-marker-]")) {
+  for (const node of root.querySelectorAll(`[id^=plot-${name}-]`)) {
     let id = node.getAttribute("id");
     if (map.has(id)) id = map.get(id);
-    else map.set(id, (id = `plot-marker-${++index}`));
+    else map.set(id, (id = `plot-${name}-${++index}`));
     node.setAttribute("id", id);
   }
-  for (const key of ["marker-start", "marker-mid", "marker-end"]) {
-    for (const node of root.querySelectorAll(`[${key}]`)) {
-      let id = node.getAttribute(key).slice(5, -1);
-      if (map.has(id)) node.setAttribute(key, `url(#${map.get(id)})`);
-    }
-  }
-}
-
-function reindexClip(root) {
-  let index = 0;
-  const map = new Map();
-  for (const node of root.querySelectorAll("[id^=plot-clip-]")) {
-    let id = node.getAttribute("id");
-    if (map.has(id)) id = map.get(id);
-    else map.set(id, (id = `plot-clip-${++index}`));
-    node.setAttribute("id", id);
-  }
-  for (const key of ["clip-path"]) {
-    for (const node of root.querySelectorAll(`[${key}]`)) {
-      let id = node.getAttribute(key).slice(5, -1);
-      if (map.has(id)) node.setAttribute(key, `url(#${map.get(id)})`);
-    }
-  }
-}
-
-function reindexPattern(root) {
-  let index = 0;
-  const map = new Map();
-  for (const node of root.querySelectorAll("[id^=plot-pattern-]")) {
-    let id = node.getAttribute("id");
-    if (map.has(id)) id = map.get(id);
-    else map.set(id, (id = `plot-pattern-${++index}`));
-    node.setAttribute("id", id);
-  }
-  for (const key of ["fill", "stroke"]) {
+  for (const key of attributes) {
     for (const node of root.querySelectorAll(`[${key}]`)) {
       let id = node.getAttribute(key).slice(5, -1);
       if (map.has(id)) node.setAttribute(key, `url(#${map.get(id)})`);

test/plots/legend-opacity.ts

@@ -24,3 +24,7 @@ test(function opacityLegendLog() {
 test(function opacityLegendSqrt() {
   return Plot.legend({opacity: {type: "sqrt", domain: [0, 1], label: "Sqrt"}});
 });
+
+test(function opacityLegendCSS4() {
+  return Plot.legend({opacity: {type: "linear", domain: [0, 1], label: "p3"}, color: "color(display-p3 0 1 0)"});
+});