diff --git a/src/legends.js b/src/legends.js
index 33b1b44c21..2113dbb667 100644
--- a/src/legends.js
+++ b/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) {
diff --git a/src/legends/ramp.js b/src/legends/ramp.js
index 9b11b65c70..884d3416d1 100644
--- a/src/legends/ramp.js
+++ b/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);
diff --git a/test/output/opacityLegend.svg b/test/output/opacityLegend.svg
index 1515b0a1b6..1fc6b6ed2b 100644
--- a/test/output/opacityLegend.svg
+++ b/test/output/opacityLegend.svg
@@ -12,7 +12,7 @@
white-space: pre;
}
-
+
@@ -40,8 +40,4 @@
Quantitative
-
-
-
-
\ No newline at end of file
diff --git a/test/output/opacityLegendCSS4.svg b/test/output/opacityLegendCSS4.svg
index 26cd5e879c..7a4c1d03c5 100644
--- a/test/output/opacityLegendCSS4.svg
+++ b/test/output/opacityLegendCSS4.svg
@@ -12,7 +12,7 @@
white-space: pre;
}
-
+
@@ -40,8 +40,4 @@
p3
-
-
-
-
\ No newline at end of file
diff --git a/test/output/opacityLegendColor.svg b/test/output/opacityLegendColor.svg
index 6ab1609535..fedc86c284 100644
--- a/test/output/opacityLegendColor.svg
+++ b/test/output/opacityLegendColor.svg
@@ -12,7 +12,7 @@
white-space: pre;
}
-
+
@@ -40,8 +40,4 @@
Linear
-
-
-
-
\ No newline at end of file
diff --git a/test/output/opacityLegendLinear.svg b/test/output/opacityLegendLinear.svg
index ff8f3e1beb..fedc86c284 100644
--- a/test/output/opacityLegendLinear.svg
+++ b/test/output/opacityLegendLinear.svg
@@ -12,7 +12,7 @@
white-space: pre;
}
-
+
@@ -40,8 +40,4 @@
Linear
-
-
-
-
\ No newline at end of file
diff --git a/test/output/opacityLegendLog.svg b/test/output/opacityLegendLog.svg
index 1323ced6cc..a4bca6a256 100644
--- a/test/output/opacityLegendLog.svg
+++ b/test/output/opacityLegendLog.svg
@@ -12,7 +12,7 @@
white-space: pre;
}
-
+
@@ -56,8 +56,4 @@
Log
-
-
-
-
\ No newline at end of file
diff --git a/test/output/opacityLegendRange.svg b/test/output/opacityLegendRange.svg
index 82a85417f3..0697a643a7 100644
--- a/test/output/opacityLegendRange.svg
+++ b/test/output/opacityLegendRange.svg
@@ -12,7 +12,7 @@
white-space: pre;
}
-
+
@@ -40,8 +40,4 @@
Range
-
-
-
-
\ No newline at end of file
diff --git a/test/output/opacityLegendSqrt.svg b/test/output/opacityLegendSqrt.svg
index 8f1acafa7c..7d9d44daae 100644
--- a/test/output/opacityLegendSqrt.svg
+++ b/test/output/opacityLegendSqrt.svg
@@ -12,7 +12,7 @@
white-space: pre;
}
-
+
@@ -40,8 +40,4 @@
Sqrt
-
-
-
-
\ No newline at end of file