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

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

文档信息

posted on 2015-04-19 19:17  三少爷的剑123  阅读(888)  评论(0)  编辑  收藏  举报

导航