如何使用我自己的颜色表而不是使用 d3 颜色集（ interpolateviridis ）来创建图例

Posted 2023-02-16

【中文标题】如何使用我自己的颜色表而不是使用 d3 颜色集（ interpolateviridis ）来创建图例

【英文标题】：How to use my own color table instead of using d3 color set ( interpolateviridis ) to create legend

【发布时间】：2021-12-15 13:26:43

【问题描述】：

我有以下一组颜色表，其中第一个数组中的第一个值是指点，接下来的 3 个值是 RGB 点。 例如：对于点 0.00，RGB 值应为 1.00、0.00、0.00。目前我正在为我的图例使用 d3 interpolateViridis 颜色，不建议这样做，我应该使用自己的点和颜色集。任何人都可以指导我。我还分享了我的代码的小提琴链接。

"colorsTable": [
    [ 0.00, 1.00, 0.00, 0.00 ],
    [ 0.25, 0.71, 0.71, 0.00 ],
    [ 0.50, 0.00, 1.00, 0.00 ],
    [ 0.75, 0.00, 0.71, 0.71 ],
    [ 1.00, 0.00, 0.00, 1.00 ]
]

// defining d3 color set
var colorScale2 = d3.scaleSequential(d3.interpolateViridis).domain([0,0.38]);

// calling function and passing values
continuous("#legend2", colorScale2);

function continuous(selector_id, colorscale) 
// defining canvas and so on
// main logic
var legendscale = d3.scaleLinear()
.range([0, legendheight - margin.top - margin.bottom])
.domain(colorscale.domain());

var image = ctx.createImageData(1, legendheight);
d3.range(legendheight).forEach(function(i) 
var c = d3.rgb(colorscale(legendscale.invert(i)));
image.data[4*i] = c.r;
image.data[4*i + 1] = c.g;
image.data[4*i + 2] = c.b;
image.data[4*i + 3] = 255;
);
ctx.putImageData(image, 0, 0);

小提琴链接：https://jsfiddle.net/um863e5o/3/

【参考方案1】：

我可能误解了您的需求，但这应该能让您走上正轨。由于您的“值”是均匀分布的，因此您可以创建一个颜色数组，然后将其传递给d3.interpolateRgbBasis。然后，您可以使用此插值器创建具有所需域的色阶。

// create an array of the colors
const colors = colorsTable
  .map(([value, ...color]) => d3.rgb(...color.map(d => d * 255)));

// create color scale
const colorScale = d3.scaleSequential()
  .domain([0, .38])
  .interpolator(d3.interpolateRgbBasis(colors));

结果如下：