以d3比例表示顏色的四捨五入值

我想要做的是不爲輸出值創建一個範圍的顏色，而是基於輸入創建一個較難的顏色。即說我有：以d3比例表示顏色的四捨五入值

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的所有數字（因爲我的輸入可能是浮點數）。

我該怎麼做？

來源

2013-07-18 yee379

使用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"

來源

2013-07-18 22:05:22

太棒了！那灰色......怎麼樣？或者我將不得不分別處理？ – yee379

忘記了！函數safeColor（num）{return isNaN（num）？ 'gray'：color（num）; } –

是的，我想知道是否有一些'scale'對象可以做到這一點，但我認爲它比在我的可視對象中硬編碼更好。謝謝！ – yee379

在這種非常具體的行爲，我會直接用手實現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' 
}

來源

2013-07-18 22:06:12

那麼，亞當皮爾斯的答案是你想要的;-) 我離開我的情況下，它可能會幫助用戶與相關的問題。 –

我正要提交：「color = d3.scale.linear（）。domain（[0,1,1,9,9,10]）。range（['green'，'green'，'orange'， '橙'，'紅'，'紅']）「。這看起來很難看，所以我仔細檢查了API，並且有一個更好的解決方案就坐在那裏！ –

@ChristopherChiche我有你的答案整潔的版本！ :) – Mahdi

在裸的javascript：

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

console.log(colorScale(94));

demo

來源

2013-08-29 13:05:20 Mahdi

以d3比例表示顏色的四捨五入值

回答

相關問題