colors - d3 スケールでの色の丸め値

Question

私がやりたいのは、出力値の色の範囲ではなく、入力に基づくハードカラーを作成することです。つまり、私が持っていると言います:

color = d3.scale.linear().domain( [0,1,10] ).range( [ 'green', 'orange', 'red' ] )
d3.range(0,10).forEach( (d) ->
    console.log d + ' ' + color(d)
)

これにより、オレンジと赤の間の色の範囲が作成されます。ただし、次のことを希望します。

0   = green
1-9 = orange
10  = red

NaNさらに、ケースが灰色になるように処理できるようにする必要があります。

私は遊んでordinalいましたが、すべての数値を特に指定したくありませんdomain（入力が浮動小数点数である可能性があるため）。

どうすればいいですか？

Answer 1

しきい値スケールを使用します:

color = d3.scale.threshold()
          .domain([1, 10])
          .range(['green', 'orange', 'red'])

> color(0)
"green"
> color(1)
"orange"
> color(8)
"orange"
> color(10)
"red"

Answer 2

裸のJavaScriptで：

function colorScale(i) {
    return i >= 100 ? '#000' :
           i >= 75  ? '#333' :
           i >= 50  ? '#666' :
           i >= 25  ? '#999' :
                      '#fff' ;
}

console.log(colorScale(94));

デモ

Answer 3

この種の非常に特殊な動作では、color関数を手動で直接実装します。

var color = function(d){
    if(isNaN(d)) return 'gray' //handle NaN 
    else if(d<0||d>10) return color(d%11) //handle out of range values
    else if(d==0) return 'green'
    else if(d==10) return 'red'
    else return 'orange'  
}