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

使用threshold scale：

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

在这种非常具体的行为中，我会直接手动实现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'  
}

Answer 3

在naked-javascript中：

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

console.log(colorScale(94));

demo

d3比例的颜色舍入值

3 个答案: