标签：ring 色值 变量 转换 常用 方便 根据 col 对象
1 //RGB
2 var color1 = d3.rgb(40,80,0)
3 var color2 = d3.rgb("red")
4 var color3 = d3.rgb("rgb(0,255,255)")
5
6 //将color1的颜色变亮
7 console.log(color1.brighter(2)) //返回值的颜色为{r: 81, g: 163, b: 0}
8 console.log(color1) //原颜色值不变依然返回{r: 40, g: 80, b: 0}
9
10 //将color2的颜色变亮
11 console.log(color2.darker(2)) //返回值的颜色为{r: 124, g: 0, b: 0}
12 console.log(color2) //原颜色值不变依然返回{r: 255, g: 0, b: 0}
13
14 //输出color3颜色的HSL值
15 console.log(color3.hsl()) //返回值{h: 180, s: 1, l: 0.5}
16
17 console.log(color3.toString()) //返回#00ffff
1 //HSL
2 var hsl = d3.hsl(120,1.0,0.5);
3
4 //变得更亮
5 console.log(hsl.brighter()) //输出{h: 120, s: 1, l: 0.7142857142857143}
6
7 //变得更暗
8 console.log(hsl.darker()) //输出 {h: 120, s: 1, l: 0.35}
9
10 //返回对应的rgb值
11 console.log(hsl.rgb()) //输出{r: 0, g: 255, b: 0}
12
13 console.log(hsl.toString()) //输出#00ff00
1 //插值
2 var a = d3.rgb(255,0,0) //红色
3 var b = d3.rgb(0,255,0) //绿色
4 var compute = d3.interpolate(a,b)
5
6 console.log(compute(0)) //输出#ff0000
7 console.log(compute(0.2)) //输出#cc3300
8 console.log(compute(0.5)) //输出#808000
9 console.log(compute(1)) //输出#00ff00
10
11 console.log(compute(2)) //输出#00ff00
12 console.log(compute(-1)) //输出#ff0000
标签：ring 色值 变量 转换 常用 方便 根据 col 对象
原文地址：https://www.cnblogs.com/littleSpill/p/10847057.html
