ドーナツチャート - ドメインを色の範囲にマップする（遷移）

Question

「ドーナツ」チャートを作成しようとしていますが、現在D3スケールと色で苦労しています。現在のグラフ：https://jsfiddle.net/dtr7hrg2/を開くと、値0と5.26がまったく同じ色を共有していることがわかります。これらの2つの値が同じ範囲内にあるからです。私のドメインは[0、100]です。私が達成したいのは、このドメインを次の色[["#000000", "#5F192A", "#B12848", "#EC335C"]]の間の直線遷移に対応する範囲[0、100]にマップすることです.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の間の色がほとんど識別できないことを指摘する。