Карта пончика - карта домена до диапазона цветов (переход)

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

Но, как Тим B указывает, что цвета от 0 до 5 едва различимы.