D3.js繪制 顏色:RGB、HSL和插值 (V3版本)

顏色和插值

 

計算機中的顏色，常用的標准有RGB和HSL。

 

RGB ：色彩模式是通過對紅(Red)、綠(Green)、藍(Blue)三個顏色通道相互疊加來得到額各式各樣的顏色。三個通道的值得范圍都是0~255，因此 總共能表示16777216(255*255*255)種，即一千六百多萬種顏色。幾乎包括了人類所能識別的所有顏色，是應用最廣泛的色彩模式。

HSL：色彩模式是通過色相(Hue)、飽和度(Saturation)、明度(Lightness)三個通道的相互疊加來得到各種顏色的。其中，色相的范圍為0°~360°，飽和度的范圍為0~1，明度的范圍為0~1. 色相的取值是一個角度，每個角度可以代表之中的一種顏色，需要記住的是0°或360°代表紅色，120°代表綠色，240°代表藍色。飽和度的數值越大，顏色越鮮艷，灰色越少。 明度值用於控制色彩的明暗變化，值越大，越明亮，越接近於白色。值越小，越暗，越接近黑色。

 

RGB顏色和HSL顏色可以相互轉換。

 

一 、D3中提供了RGB顏色的創建、調整明暗、轉換為HSL模式的方法，方法如下:

 

d3.rgb(r,g,b)

//分別輸出r、g、b值來創建顏色，范圍都為[0,255]。

 

d3.rgb(color)

//輸入相應的字符串來創建顏色，例如:

(1)RGB的十進制值；"rgb(255,255,255)"。

(2)HSL的十進制值: "hsl(120,0.5,0.5)"。

(3)RGB的十六進制值: "#ffeeaa"。

(4)RGB的十六進制值得縮寫形式:"#fea"。

(5)顏色的名稱: "red","white"。

 

rgb.brighter([k])

//顏色變得更明亮。RGB各通道的值乘以0.7^-k。如果k省略，k的值為1.只有當某通道的值得范圍在30~255之間時，才會進行相應的計算。

 

rgb.darker([k])

//顏色變得更暗。RGB各通道的值乘以0.7^k。

 

rgb.hsl()

//返回該顏色對應的HSL值。

 

rgb.toString()

//以字符串形式返回該顏色的值，如"#ffeeaa"。

brighter()和darker()返回一個新的顏色對象，不會改變當前顏色對象。hsl()返回當前顏色對應的HSL值，也是一個新的對象。舉個例子:

 

//RGB
        var color1 = d3.rgb(40,80,0)  3         var color2 = d3.rgb("red")  4         var color3 = d3.rgb("rgb(0,255,255)")  5 
        //將color1的顏色變亮
        console.log(color1.brighter(2))         //返回值的顏色為{r: 81, g: 163, b: 0}
        console.log(color1)                     //原顏色值不變依然返回{r: 40, g: 80, b: 0}

        //將color2的顏色變亮
        console.log(color2.darker(2))           //返回值的顏色為{r: 124, g: 0, b: 0}
        console.log(color2)                     //原顏色值不變依然返回{r: 255, g: 0, b: 0}

        //輸出color3顏色的HSL值
        console.log(color3.hsl())               //返回值{h: 180, s: 1, l: 0.5}

        console.log(color3.toString())          //返回#00ffff

 

 

二 、HSL顏色的創建和使用與d3.rgb幾乎一樣，只是各顏色通道的意義不同。

 

d3.hsl(h,s,l)

//根據h、s、l的值來創建HSL顏色。

 

d3.hsl(color)

//根據字符串來創建HSL顏色。

 

hsl.beighter([k])

//變得更亮

 

hsl.darker([k])

//變得更暗

 

hsl.rgb()

//返回對應的RGB顏色。

 

hsl.toString()

//以RGB字符串形式輸出該顏色。

 

對於HSL顏色來說，brighter()和darker()更好理解，因為HSL的"L"就是明亮度。也就是說，應用brighter()或darker()后，只有h、s、l中的第三個顏色通道"l"發生變化。舉個例子:

 

//HSL
        var hsl = d3.hsl(120,1.0,0.5);  3 
        //變得更亮
        console.log(hsl.brighter())             //輸出{h: 120, s: 1, l: 0.7142857142857143}

        //變得更暗
        console.log(hsl.darker())               //輸出 {h: 120, s: 1, l: 0.35}

        //返回對應的rgb值
        console.log(hsl.rgb())                  //輸出{r: 0, g: 255, b: 0}

        console.log(hsl.toString())             //輸出#00ff00

 

一般來說，編程人員喜歡使用RGB顏色，比較好理解。美術人員更喜歡使用HSL顏色，方便調整飽和度和亮度。

 

 

三 、插值

 

如果要計算介於兩個顏色之間的顏色，需要用到插值(Interpolation)。D3提供了d3.intrerpolateRgb()來處理RGB顏色之間的插值運算，d3.interpolateHsl()來處理HSL顏色之間的插值運算。更方便的是使用d3.interpolate()，它會自動判斷顏色的類型。d3.interpolate()也可以處理數值、字符串等之間的插值。舉個例子:

 

//插值
        var a = d3.rgb(255,0,0)                 //紅色
        var b = d3.rgb(0,255,0)                 //綠色
        var compute = d3.interpolate(a,b)  5 
        console.log(compute(0))                 //輸出#ff0000
        console.log(compute(0.2))               //輸出#cc3300
        console.log(compute(0.5))               //輸出#808000
        console.log(compute(1))                 //輸出#00ff00

        console.log(compute(2))                 //輸出#00ff00
        console.log(compute(-1))                //輸出#ff0000

 

這段代碼里，定義了兩個RGB顏色：紅(255,0,0)和綠(0,255,0)。然后，以這兩個顏色對象作為d3.interpolate(a,b)的參數。d3.interpolate返回一個函數，保存在變量compute里。於是，compute可當做函數使用，參數是一個數值。

當數值為0時，返回紅色。

當數值為1時，返回綠色。

當數值為0~1之間的值時，返回介於紅色和綠色之間的顏色。

如果數值超過1，則返回綠色：數值小於0，則返回紅色。