甜甜圈圖 - 地圖域的顏色範圍（過渡）

Question

我想製作一個'甜甜圈'圖表，我目前正在努力與D3尺度和顏色。如果您打開我目前的圖表：https://jsfiddle.net/dtr7hrg2/，您會注意到值0和5.26共享完全相同的顏色。我想這是因爲這兩個值落在相同的範圍內。我的域名是[0，100]。我想要實現的是將該域映射到範圍[0，100]，該範圍對應於以下顏色["#000000", "#5F192A", "#B12848", "#EC335C"]之間的線性轉換，其中0.0屬於#000，而100.0屬於#B12848。 有人可以給我一個暗示我做錯了什麼嗎？任何幫助將不勝感激！

Answer 1

它不是完全一樣的顏色，你做了什麼是正確的

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

這些顏色是如此接近，你可以不出區別。

Answer 2

如果要的顏色#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

但是，正如添乙指出0到5之間的顏色幾乎不可辨別。