D3js d3-color, d3-scale-chromatic

用途

D3-color為控制顏色、調整顏色的API。`

D3-scale-chromatic提供透過序列、發散、分類來制定顏色的比例尺，類似scaleLinear，將顏色當作range，就像是我們自訂一個區間的顏色，資料對應的key平均散佈在顏色上，透過此API即可得到對應的key的顏色。`

D3-color

範例

const c = d3.hsl("steelblue");
c.opacity = 0.8;
console.log(c.formatHsl()); // "hsla(207.27272727272728, 44%, 49.01960784313726%, 0.8)"

大概了解這API，就是可以在各種格式間轉換顏色格式，透過formatHex, formatHsl, formatRgb，可轉換這三種顏色格式。

D3-scale-chromatic

範例

const color = d3.schemeCategory10;
console.log(color);
// ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]

其實這些現成的顏色組合，也只是一個陣列，透過color[0]...就可以產生出對應的顏色，但其實馬上就發現，這樣顏色應該很快就會耗盡了吧？畢竟資料源在真實環境通常是無法預期數量，那該怎麼辦呢？

Diverging

透過線性的色碼，可以產生不會重複的顏色，而透過 d3.interpolateBrBG此function，可以輸入0-1的值產生該區間的色碼。

範例

console.log(d3.interpolateBrBG(0.5)); //"rgb(238, 241, 234)"

因此其實只要能讓我們的資料源，對應出range 0 - 1之間即可。這時候d3.scaleSequential就可以協助我們了！

範例

const scale = d3.scaleSequential().domain([0, 100]);
console.log(scale(100)); // 0.5

可以看出來，其實d3.scaleSequential也只是d3.scaleLinear().range([0, 1])，而此API應用在顏色上。

範例

const rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([1, 100]);
console.log(rainbow(50)) // "rgb(177, 238, 87)"

用這種方式產顏色，基本上只要資料不會密集到特別誇張的話，應該都是有辦法辨識顏色的，我們來製作一個顏色亂數的範例吧！

應用範例

Codepen

參考

D3-scale-chromatic
D3-color