【 D3.js 高级系列 — 5.0 】 颜色
颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值。
RGB色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来得到各式各样的颜色。三个通道的值的范围都为0~255,因此总共能表示16777216(256 * 256 * 256)种,即一千六百多万种。几乎包括了人类所能识别的所有颜色,是最广泛也是最容易理解的颜色系统之一。
HSL色彩模式是通过对色相(Hue)、饱和度(Saturation)、明度(Lightness)三个通道的相互叠加来得到各种颜色的。其中,色相的范围为0°~360°,饱和度的范围为0~1,明度的范围为0~1。色相的取值是一个角度,每个角度可以代表之中颜色,需要记住的是0°或360°代表红色,120°代表绿色,240°代表蓝色。饱和度的数值越大,颜色越鲜艳,灰色越少。明度值用于控制色彩的明暗变化,值越大,越明亮,越接近于白色;值越小,越暗,越接近黑色。
RGB颜色和HSL颜色是可以互相转换的。
1. RGB
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()并不会改变当前颜色本身,而是返回一个新的颜色,新的颜色的值发生了相应的变化。请看以下代码。
var color1 = d3.rgb(40,80,0); var color2 = d3.rgb("red"); var color3 = d3.rgb("rgb(0,255,255)"); //将color1的颜色变亮,返回值的颜色为 r: 81, g: 163, b:0 console.log( color1.brighter(2) ); //原颜色值不变,依然是 r: 40, g: 80, b:0 console.log( color1 ); //将color2的颜色变亮,返回值的颜色为 r: 124, g: 0, b:0 console.log( color2.darker(2) ); //原颜色值不变,依然是 r: 255, g: 0, b:0 console.log( color2 ); //输出color3颜色的HSL值,h: 180, s: 1, l: 0.5 console.log( color3.hsl() ); //输出#00ffff console.log( color3.toString() );
函数brighter()、darker()、hsl()返回的都是对象,不是字符串,前两个函数返回的是 RGB 对象,最后一个函数返回的是 HSL 对象。
2. HSL
HSL颜色的创建和使用方法与RGB颜色几乎是一样的,只是颜色各通道的值不同而已。
- d3.hsl(h, s, l):根据h、s、l的值来创建HSL颜色
- d3.hsl(color):根据字符串来创建HSL颜色
- hsl.brighter([k]):变得更亮
- hsl.darker([k]):变得更暗
- hsl.rgb():返回对应的RGB颜色
- hsl.toString():以RGB字符串形式输出该颜色
对于HSL颜色来说,brighter()和darker()很好理解,即更改该颜色的明度值。请看以下代码。
var hsl = d3.hsl(120,1.0,0.5); //返回的对象中,h:120, s:1.0, l:0.714 console.log( hsl.brighter() ); //返回的对象中,h:120, s:1.0, l:0.35 console.log( hsl.darker() ); //返回的对象中,r:0, g:255, b:0 console.log( hsl.rgb() ); //输出#00ff00 console.log( hsl.toString() );
一般来说,编程人员喜欢使用RGB颜色,比较好理解。美术人员更喜欢使用HSL颜色,方便调整饱和度和亮度。
3. 插值
常常会有这种需求,要得到两个颜色值之间的值,这种时候就要用到插值(Interpolation)。D3提供了d3.interpolateRgb()来处理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); 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
这段代码里,先定义了两个颜色:红和绿。然后调用d3.interpolate(a, b),会返回一个函数,函数保存在compute里。这时候,compute就是一个函数,它接收一个数值,数值为0时,返回红色,数值为1时,返回绿色。数值为0到1之间的值时,返回位于红色和绿色之间的颜色。如果输入值超出1,则返回的是绿色,数值小于0,则返回红色,这是根据调用d3.interpolate(a, b)的时候,传入参数的顺序决定的。
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2015 年 4 月 19 日
- 更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。