D3的顏色有RGB和HSL兩種方法,可以互相轉換。
d3.rgb(r,g,b)
以rgb作參數,範圍都為0~255d3.rgb(color)
輸入顏色字串,可用多種的格式包含"rgb(255,255,255)"、"hsl(120,0.5,0.5)"、"#ff0000"、"red"rgb.brighter(k)
顏色變更亮rgb.darker(k)
顏色變更暗rgb.hsl()
RGB轉換為HSL物件rgb.toString()
RGB物件轉字串,輸出格式為"#ff0000"
測試範例
var color1 = d3.rgb(40,80,0)
var color2 = d3.rgb("red")
var color3 = d3.rgb("rgb(0,255,255)")
console.log(color2.hsl()) // 轉換為hsl h:0,s:1,l:0.5
console.log(color3) // 取得物件
console.log(color3.darker(2).toString()) // #007c7c
console.log(color1.toString()) // #285000
console.log(color1.brighter(1).toString()) // #397200
HSL的方法和RGB類似
d3.hsl(h,s,l)
h為色相(Hue)範圍0~360、s為飽和度(Saturation)範圍0~1、l為亮度(Lightness)範圍0~1d3.hsl(color)
輸入顏色字串
也可以使用brighter()
、darker()
、rgb()
(轉換為rgb)、toString()
方法
要計算介於兩個顏色之間的顏色,可以使用內插(Interpolation),使用方法為
d3.interpolate(a,b)
a,b指的是兩個顏色物件,上述的rgb和hsl兩種方法的物件都可使用interpolate()會自己判斷所需使用的計算方式。
當作函式使用時輸入參數的範圍是0~1,為0時輸出a、為1時輸出b,介於之間的數字會計算出相對的顏色。
測試範例
var a = d3.rgb("blue")
var b = d3.rgb("green")
var interpolate = d3.interpolate(a,b)
console.log(interpolate(0)) // #0000ff
console.log(interpolate(1)) // #008000
console.log(interpolate(0.5)) // #004080