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

【问题标题】：How to use my own color table instead of using d3 color set ( interpolateviridis ) to create legend如何使用我自己的颜色表而不是使用 d3 颜色集（ interpolateviridis ）来创建图例
【发布时间】：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/

【问题讨论】：

标签： d3.js colors legend scale linear-interpolation

【解决方案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));

结果如下：

【讨论】：