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

Question

I have following set of color table where first value in the first array refers to point and following 3 values are RGB points. Ex: For the point 0.00, the RGB value should be 1.00, 0.00, 0.00. Currently I am using d3 interpolateViridis colors for me legend and that is not recommended and I am supposed to use my own points and color set. Can anyone guide me on this. I have also shared Fiddle link of my code.

"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);
}

Fiddle link: https://jsfiddle.net/um863e5o/3/

Answer 1

I may be misinterpreting your needs, but this should get you on the right track. Since your "values" are evenly spaced, you can create an array of colors and then pass that to d3.interpolateRgbBasis . You can then use this interpolator to create a color scale with your desired domain.

// 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));

The result looks like this: