6

D3.jsで次のように順序尺度を設定しましたが、これまでのところうまく機能しています。

var color = d3.scale.ordinal().range([ 'blue', 'red', 'green' ]); 
color.domain();  
console.log(color(0)); // returns 'blue'

ただし、私が本当にやりたいのは、 2つの数値をスケールに渡して、青、赤、または緑の特定のサブシェード（最初の数値に応じたプライマリシェード、サブシェード）を返すようにすることです。 2番目の番号によって異なります。

おそらく、これを行うために、d3.scale.ordinal（）をd3.interpolateRgb （）と組み合わせることができますか？ただし、入力番号に応じて色が一貫していることが重要であるため、interpolateRgbが正しい選択であるかどうかはわかりません。

だからこれが私が達成したいことです：

color(0, 256); // return a shade of blue
color(0, 257); // return a second shade of blue
color(0, 256); // return the first shade of blue again

D3でこれを達成するためのアイデアはありますか？ご協力ありがとうございました。

4

1 に答える 1

13

次のようなものを考えることができます：

var colorgroup = d3.scale.ordinal()
    .domain(d3.range(3))
    .range([ 'blue', 'red', 'green' ]); 
var brightrange = d3.scale.linear()
    .domain([0,300])
    .range([0,3]);  
function color(group,shift) {
     if (shift >= 0) {return d3.hsl(colorgroup(group)).darker(brightrange(shift));}
     else {return d3.hsl(colorgroup(group)).brighter(brightrange(-shift));}             
}

例:

console.log(color(0,255)); //dark blue
console.log(color(0,0)); //med blue
console.log(color(0,-150)); //light blue
于 2012-05-01T01:40:58.317 に答える