使用 d3 颜色创建 d3 线性颜色图例

Question

我想使用线性渐变创建颜色图例> https://bl.ocks.org/HarryStevens/6eb89487fc99ad016723b901cbd57fde。但是我怎样才能在这里传递我的 d3 颜色，因为它的形式类似于 d3.scaleSequential(d3.interpolateViridis).domain([0,1])。在线性渐变中，颜色传递如下：

var data = [{"color":"#000004","value":0},{"color":"#02020c","value":5}]

linearGradient.selectAll("stop")
.data(data)
.enter().append("stop")
.attr("offset", d => ((d.value - extent[0]) / (extent[1] - extent[0]) * 100) + "%")
.attr("stop-color", d => d.color);

注意：我的数据集如下：

export const colorScales: Record<string, (num: number) => string> = {
Rainbow: d3.interpolateHslLong("red", "blue"),
Spectral: d3.interpolateSpectral,
RdYlBu: d3.interpolateRdYlBu,
RdYlGn: d3.interpolateRdYlGn,
RdBu: d3.interpolateRdBu,
PiYG: d3.interpolatePiYG,
Warm: d3.interpolateWarm,
Cool: d3.interpolateCool,
Viridis: d3.interpolateViridis,
Inferno: d3.interpolateInferno,
Magma: d3.interpolateMagma,
Plasma: d3.interpolatePlasma,
CubeHelix: d3.interpolateCubehelixDefault,
YlOrRd: d3.interpolateYlOrRd,
Blues: d3.interpolateBlues,
};

Answer 1

这是一个使用 d3.interpolateSpectral 的示例。您可以使用 d3.range 和 map:

创建数据

// create an array of steps based on the color scale
var data = d3.range(10).map(d=> ({color:d3.interpolateSpectral(d/10), value:d}))
// get the array's min and max value
var extent = d3.extent(data, d => d.value); 

linearGradient.selectAll("stop")
.data(data)
.enter().append("stop")
.attr("offset", d => ((d.value - extent[0]) / (extent[1] - extent[0]) * 100) + "%")
.attr("stop-color", d => d.color);

从技术上讲，您可以使用这些分类方案中的颜色来完成，但对我来说意义不大。

 // d3.schemeCategory10 is just an array of color
 // use map to add some values (index in this case)

var data = d3.schemeCategory10.map((d,i) => ({color:d, value:i}))

linearGradient.selectAll("stop")
    .data(data)
    .enter().append("stop")
    .attr("offset", d => d.value/9 * 100) + "%") // index/length
    .attr("stop-color", d => d.color);

使用 d3 颜色创建 d3 线性颜色图例

Create d3 linear color legend using d3 colors

colors

legend

linear-gradients

d3.js