【 D3.js 高级系列 — 5.0 】 颜色

颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值。

501

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()并不会改变当前颜色本身,而是返回一个新的颜色,新的颜色的值发生了相应的变化。请看以下代码。

函数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()很好理解,即更改该颜色的明度值。请看以下代码。

一般来说,编程人员喜欢使用RGB颜色,比较好理解。美术人员更喜欢使用HSL颜色,方便调整饱和度和亮度。

3. 插值

常常会有这种需求,要得到两个颜色值之间的值,这种时候就要用到插值(Interpolation)。D3提供了d3.interpolateRgb()来处理RGB颜色之间的插值运算,d3.interpolateHsl()来处理HSL颜色之间的运算。更方便的是使用d3.interpolate(),它会自动判断调用哪一个函数。d3.interpolate()也可以处理数值、字符串等之间的插值。请看下面的例子。

这段代码里,先定义了两个颜色:红和绿。然后调用d3.interpolate(a, b),会返回一个函数,函数保存在compute里。这时候,compute就是一个函数,它接收一个数值,数值为0时,返回红色,数值为1时,返回绿色。数值为0到1之间的值时,返回位于红色和绿色之间的颜色。如果输入值超出1,则返回的是绿色,数值小于0,则返回红色,这是根据调用d3.interpolate(a, b)的时候,传入参数的顺序决定的。

文档信息

【 D3.js 高级系列 — 5.0 】 颜色》上有2条评论

  1. 讲得很不错啊,下个月发工资了,一定买一本你的书看

评论已关闭。