具體數據轉換成顏色D3.js

Question

我剛開始用D3.js，而且我通過這個閱讀：http://alignedleft.com/tutorials/d3

在上創建一個條形圖的部分，筆者給出了一個很簡單的例子使用循環中的當前數據來指定矩形的填充顏色的RGB值。這非常有用。但是相當有限。

說，例如 - 我有一個特定類型的圖表，顯示各種數據的優先級。所以，價值越高，優先級越高。優先級將分別用高，中，低，無紅色，橙色，黃色和綠色分別顯示。

這是相當簡單的使用if/else語句在.attr('fill', function(d){})方法，像這樣一個開關的情況下或做：

.attr('fill', function(d) { 
    if (percentage(d) <= 0.25) { // 0.25 is a percentage value representing the data 
    return 'green'; 
    } 
    else if (percentage(d) <= 0.50) { 
    return 'yellow'; 
    } 
    else if (percentage(d) <= 0.75) { 
    return 'orange'; 
    } 
    else if (percentage(d) <= 1) { 
    return 'red'; 
    } 
}); 

但是，如果我想動態改變顏色的強度/遮陽什麼本身基於關於數據的強度？因此，不僅將它有基本顏色的值，但通過使根據數據轉移到下一種顏色之前的強度的顏色的不同色調（或飽和度）可視化彩色範圍內的數據的強度。

我假設的一種方法是爲每個百分比組合兩種策略，但這意味着我必須有25個if語句嵌套在5個if語句中的每個語句中，每個1％百分點表示數據。有沒有更好，更有效的方法？

我知道，我可以限制每個顏色數量較少的色調的數量 - 但我想看看是否有任何其他的方式來做到這一點，除了嵌套條件語句。

Answer 1

的一種方式是使用d3.hsl，在3個pararms方面構造的彩色對象：色調，飽和度和水平。

你會用上面提出的switch語句來選擇0到360之間的數字，對應於所需的色調（綠色，黃色，橙色，紅色）。

飽和度很可能是一個常數，可能介於.5和1之間。您需要試驗它並選擇一個您喜歡的飽和度。

級別將是0到1之間的數字，但不能太接近0，因爲那樣會產生黑色。這個數字相當於強度你代表。數字越高 - 因此越亮。您可以使用d3.scale.linear()將您的數據值轉換爲0到1的範圍。

構建hsl顏色對象後，您可以調用.rgb()，這就是您設置的svg形狀的填充屬性。