Question

我正在努力制作一个甜甜圈＆＃39;图表，我目前正在努力与D3鳞片和颜色。如果您打开我当前的图表：https://jsfiddle.net/dtr7hrg2/，您会注意到值0和5.26共享完全相同的颜色。我想这是因为这两个值落在同一范围内。我的域名是[0,100]。我想要实现的是将此域映射到范围[0,100]，该范围对应于以下颜色["#000000", "#5F192A", "#B12848", "#EC335C"]之间的线性过渡，其中0.0落入#000而100.0落入#B12848 。有人能给我一个提示我做错了吗？任何帮助将不胜感激！

Answer 1

如果您想在#000000和#B12848之间使用线性范围的颜色，则可以创建插值函数并将其输入缩放到介于0.0和1.0之间：

var chart = d3.select("#chart");

var color = d3.interpolate('#000000', '#B12848');

for (var i = 0; i <= 100; i++) {
    chart.append('span').attr('class', 'colorBlock').attr('style', function (d) {
        return 'background-color: ' + color(i / 100.0);
    });
}

Here's a working fiddle

但是，正如Tim B所指出的那样，0到5之间的颜色几乎无法辨别。

Answer 2

它不是完全相同的颜色，你所做的是正确的

console.log(heat_map_color(5)) // rgb(14, 4, 6)
console.log(heat_map_color(0)) // rgb(0, 0, 0)

那些颜色如此接近你无法看出差异。

圆环图 - 将域映射到颜色范围（过渡）

2 个答案: