【 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)的时候,传入参数的顺序决定的。

文档信息

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。