使用HSL或RGB製作動態漸變

Question

我有一個用d3構建的標準50態地圖，其中我根據各種數據集動態着色狀態。無論數據集是什麼，這些值都以0到1的比例進行歸一化，其中1對應於具有最高值的狀態。我正在尋找一種方法來使用歸一化數據點的值來計算狀態的陰影。

過去，我選擇了我喜歡的基本顏色 - 比方說＃900 - 並將每種狀態的fill設置爲該顏色，將opacity設置爲標準化值。這個工程可以保存兩個問題：

• 當畫布有背景色時，它需要在每個陰影狀態下繪製一個空白狀態;和
• 淡出顏色這樣可以看看糊狀

但我真的很喜歡能夠設置彩色動態而不是處理箱的數據和梯度的RGB值的設定數組。所以我想知道是否有更好的方法。如果替代顏色系統可以更好地工作，我可以照顧轉換。

D3具有烤入HSL轉換器，所以我想這：

// 0 <= val <= 1 
function colorize(val) { 
    // nudge in the extremes 
    val = 0.2 + 0.6 * val; 
    return d3.hsl(0, val, 1 - val); 
} 

它工作正常 - 這是地圖捕魚作業，這是最普遍的在緬因州和俄勒岡州的 - 但我懷疑有更好的方法。想法？

Answer 1

我喜歡你真正做了什麼，但如果你希望做不同的事情，你總是可以做一個D3規模。例如：

var scale = d3.scale.linear().domain([rangeMin, rangeMid, 
rangeMax]).range(["#Color1","#Color2","#Color3"]); 

然後通過

return scale(dataValue); 

您可以設置rangeMin和的RangeMax變量是數據的最小值和最大值設置每個狀態。我添加的中值數字rangeMid是可選的。我建議使用這個，如果你想在你的顏色的一些變化。我已經使用這個縮放功能來製作一個出色的詞頻熱圖。我希望我能夠以某種方式提供幫助！

注：我用這個與CSS十六進制值，但我相信RGB和HSL也可以工作。