fix ramp legend colorSpace (#2419)

* fix opacity legend colorSpace

* promote colorSpace to RampLegendOptions

* default to display-p3

* remove colorSpace option

* remove defunct colorSpace option

Author: mbostock

src/legends.js

@@ -1,9 +1,7 @@
-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([
@@ -61,19 +59,11 @@ function legendOpacity({type, interpolate, ...scale}, {legend = true, color = "c
   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`);
-  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;
+  return legendColor({type, ...scale, interpolate: interpolateOpacity(color)}, {legend, ...options});
 }
 
-function interpolateOpacity(t) {
-  return `rgba(0,0,0,${t})`;
+function interpolateOpacity(color) {
+  return (t) => `color-mix(in srgb, transparent, ${color} ${(t * 100).toFixed(1)}%)`;
 }
 
 export function createLegends(scales, context, options) {

src/legends/ramp.js

@@ -90,7 +90,7 @@ export function legendRamp(color, options) {
     const canvas = context.document.createElement("canvas");
     canvas.width = n;
     canvas.height = 1;
-    const context2 = canvas.getContext("2d");
+    const context2 = canvas.getContext("2d", {colorSpace: "display-p3"}); // allow wide gamut
     for (let i = 0, j = n - 1; i < n; ++i) {
       context2.fillStyle = interpolator(i / j);
       context2.fillRect(i, 0, 1, 1);