iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
Modern Web

D3.js新手開發基本圖表系列 第 18

Day18 繪製產生器 (1)

  • 分享至 

  • xImage
  •  

顏色

D3的顏色有RGBHSL兩種方法,可以互相轉換。

d3.rgb(r,g,b) 以rgb作參數,範圍都為0~255
d3.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~1
d3.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

上一篇
Day17 練習 - 散布圖 (3)
下一篇
Day19 繪製產生器 (2)
系列文
D3.js新手開發基本圖表30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言