0

-0.75 から 0.3 の範囲のパーセンテージである一連のデータ数値があり、-0.75 が「明るい赤」のタイルで、.3 値が「明るい緑の値」であり、その間のすべてがその間にスケーリングされます。

私は現在これを持っています:

js

var color = d3.scale.quantize()
.domain([-.7, .3])
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

CSS

.RdYlGn .q0-11{fill:rgb(255,0,0)}
.RdYlGn .q1-11{fill:rgb(255,50,50)}
.RdYlGn .q2-11{fill:rgb(255,100,100)}
.RdYlGn .q3-11{fill:rgb(255,150,150)}
.RdYlGn .q4-11{fill:rgb(255,200,200)}
.RdYlGn .q5-11{fill:rgb(255,255,255)}
.RdYlGn .q6-11{fill:rgb(200,255,200)}
.RdYlGn .q7-11{fill:rgb(150,255,150)}
.RdYlGn .q8-11{fill:rgb(100,255,100)}
.RdYlGn .q9-11{fill:rgb(50,255,50)}
.RdYlGn .q10-11{fill:rgb(0,255,0)}

しかし、数字は正しくスケーリングされていないようです。パーセンテージは次のようにスケーリングされているようです。

.3 = q0  Green
.0 = q2
-.1 = q4
-.5 = q5  White
-.7 = q11 Red

-.5 が私の白の中間値であることは理にかなっています。なぜなら、それは .3 と -.7 の中央値だからです。何か助けはありますか?

4

2 に答える 2

5

幸いなことに、目的を達成するための非常に簡単な方法があります。ポリリニア スケールを使用するだけです。これはd3.scale.linear()、新しい色を開始する各値にアンカー ポイントを持つ通常のスケールです。

赤を負の値、白をゼロ、緑を正の値にするには、次を使用します。

polylinear_color = d3.scale.linear()
    .domain([-0.3, 0, 0.7])
    .range(['rgb(255,0,0)','rgb(255,255,255)','rgb(0,255,0)'])

.attr('fill',function(d){return polylinear_color(d);});スケールはすべての補間を行い、色付けされているものに設定したクラスを使用する代わりに.

ここで説明するためにjsfiddleを作成しました。

于 2013-08-30T12:14:52.153 に答える
2

ここでd3の組み込みカラー補間器を見てください

あなたの場合、それは次のようになります:

var interpolator = d3.interpolateHsl('rgb(255,0,0)', 'rgb(0,255,0)');
var scale = d3.scale.linear()
  .domain([-.7, .3])
  .range([0, 1])
// interpolator(scale(0)) will return a color in between red and green 
于 2013-02-10T02:50:13.660 に答える