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'  
}