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

Donut Chart - map domain to range of colors (transition)

本文关键字：范围 过渡 颜色 映射 圆环图      更新时间：2023-09-26

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

如果您想要#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);
    });
}

这是一把工作小提琴

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

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

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

那些颜色太近了，你看不出有什么区别。

相关文章：