D3.js绘制 颜色:RGB、HSL和插值 (V3版本)

颜色和插值

计算机中的颜色,常用的标准有RGB和HSL。

RGB:色彩模式是通过对红(Red)绿(Green)蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色。三个通道的值得范围都是0~255,因此总共能表示16777216(255*255*255)种,即一千六百多万种颜色。几乎包括了人类所能识别的所有颜色,是应用最广泛的色彩模式。

HSL:色彩模式是通过色相(Hue)饱和度(Saturation)明度(Lightness)三个通道的相互叠加来得到各种颜色的。其中,色相的范围为0°~360°,饱和度的范围为0~1,明度的范围为0~1.色相的取值是一个角度,每个角度可以代表之中的一种颜色,需要记住的是0°或360°代表红色,120°代表绿色,240°代表蓝色。饱和度的数值越大,颜色越鲜艳,灰色越少。明度值用于控制色彩的明暗变化,值越大,越明亮,越接近于白色。值越小,越暗,越接近黑色。

RGB颜色和HSL颜色可以相互转换。

一 、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()返回一个新的颜色对象,不会改变当前颜色对象。hsl()返回当前颜色对应的HSL值,也是一个新的对象。举个例子:

 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

二 、HSL颜色的创建和使用与d3.rgb几乎一样,只是各颜色通道的意义不同。

d3.hsl(h,s,l)

//根据h、s、l的值来创建HSL颜色。

d3.hsl(color)

//根据字符串来创建HSL颜色。

hsl.beighter([k])

//变得更亮

hsl.darker([k])

//变得更暗

hsl.rgb()

//返回对应的RGB颜色。

hsl.toString()

//以RGB字符串形式输出该颜色。

对于HSL颜色来说,brighter()darker()更好理解,因为HSL的"L"就是明亮度。也就是说,应用brighter()darker()后,只有h、s、l中的第三个颜色通道"l"发生变化。举个例子:

 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

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

三 、插值

如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation)。D3提供了d3.intrerpolateRgb()来处理RGB颜色之间的插值运算,d3.interpolateHsl()来处理HSL颜色之间的插值运算。更方便的是使用d3.interpolate(),它会自动判断颜色的类型。d3.interpolate()也可以处理数值、字符串等之间的插值。举个例子:

 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

这段代码里,定义了两个RGB颜色:红(255,0,0)绿(0,255,0)。然后,以这两个颜色对象作为d3.interpolate(a,b)的参数。d3.interpolate返回一个函数,保存在变量compute里。于是,compute可当做函数使用,参数是一个数值。

当数值为0时,返回红色。

当数值为1时,返回绿色。

当数值为0~1之间的值时,返回介于红色和绿色之间的颜色。

如果数值超过1,则返回绿色:数值小于0,则返回红色。

原文地址:https://www.cnblogs.com/littleSpill/p/10847057.html

时间: 2024-10-01 12:53:41

D3.js绘制 颜色:RGB、HSL和插值 (V3版本)的相关文章

使用D3.js绘制地图并打点

本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件 去网上下载要绘制地图的geoJson文件. 使用d3.json()加载地图文件,这里为了方便加载我把geoJson文件放在了js文件里. 绘制地图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具.利用它画了一幅中国地图,如下图所示: 源码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="d3.csv.js">&l

利用d3.js绘制雷达图

利用d3,js将数据可视化,可以做到数据与代码的分离,方便以后修改数据. 这次利用d3.js绘制了一个五维的雷达图,即将多个对象的五种属性在一张图上对比. 数据写入data.csv.数据类型写入type.csv文件. 效果如下图所示 源码连接:http://download.csdn.net/detail/svap1/7358123 使用是只需调用 radar()函数即可,如下是测试页面代码. <!DOCTYPE html> <html> <head> <meta

使用d3.js 绘制交互树

d3.js 中包含了丰富的用于表达树和图的例子: http://d3js.org 以下代码示例中,用于表示交互的树: <!DOCTYPE html> <meta charset="utf-8"> <style> .node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px s

d3.js 绘制北京市地铁线路状况图(部分)

地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件包括两部分,一部分是站点信息,另一部分就是线路信息,由于时间问题,我只写了5条线路(10号线站点太tm多了): 然后就是构造类文件,不多说: 之后就是主要的操作线路图的逻辑,还画了一个天安门. 好了废话不多说,下面上代码 1.主要代码 <!DOCTYPE html> <html lang=&

基于D3.js 绘制一个折柱混合图

测试题目:使用 D3 绘制一个折柱混合图,示例数据如下: data = [ ["时间", "销售额", "增长率(%)"], ["一月", 27506, 20.8], ["二月", 24399, 5.4], ["三月", 23120, 22], ["四月", 22053, 0.4], ["五月", 21221, 3.1], ["六月&qu

D3.js 绘制散点图

对于散点图,使用的数组需要包含坐标元素,即 x, y.同时,散点图需要使用 circle 元素. var svg = d2.select("body") .append("svg") .attr({ width:w, height:h }) svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx",functio

【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变

颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值 在[高级 - 第 5.0 章]里已经提到了颜色插值,在这里做一个例子.先定义颜色插值函数如下, var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compute = d3.interpolate(a,b); 如此一来,compute 可当做函数使用,参数的范

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

颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到各式各样的颜色.三个通道的值的范围都为0~255,因此总共能表示16777216(256 * 256 * 256)种,即一千六百多万种.几乎包括了人类所能识别的所有颜色,是最广泛也是最容易理解的颜色系统之一. HSL色彩模式是通过对色相(Hue).饱和度(Saturation).明度(Ligh