【 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 ,转载请注明出处,谢谢
【 D3.js 高级系列 — 5.0 】 颜色的更多相关文章
- 【 D3.js 高级系列 — 6.0 】 值域和颜色
在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...
- 【 D3.js 高级系列 — 4.0 】 矩阵树图
矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. ...
- 【 D3.js 高级系列 — 1.0 】 文本的换行
在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...
- 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图
机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...
- 【 D3.js 高级系列 — 3.0 】 堆栈图
堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...
- 【 D3.js 高级系列 — 2.0 】 捆图
捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...
- 【 D3.js 高级系列 — 10.0 】 思维导图
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
- 【 D3.js 高级系列 — 9.0 】 交互式提示框
一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...
- 【 D3.js 高级系列 — 8.0 】 标线
有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么 标线,是指地图上需要两个坐标以上才能表示 ...
随机推荐
- 开博第一篇:DHT 爬虫的学习记录
经过一段时间的研究和学习,大致了解了DHT网络的一些信息,大部分还是参会别人的相关代码,一方面主要对DHT爬虫原理感兴趣,最主要的是为了学习python,大部分是别人的东西原理还是引用别人的吧 DHT ...
- svn团队环境
1.安装VisualSVN Server VisualSVN-Server-3.3.1-x64.msi 下载,并安装标准版(免费) 2.下载TortoiseSVN TortoiseSVN-1.8.11 ...
- [SQL SERVER系列]存储过程,游标和触发器实例[原创]
自己写的存储过程与游标结合使用的实例,与大家分享,也供自己查阅,仅供参考: --使用游标循环处理,删除重复的记录 declare @UserID int ) ) declare @UnitFlag i ...
- Nhibernate 一对一关系映射(主键映射)
参考:点击这里 妈的,搞了一天了,终于可以了,现在总结下,以防下次再出现这样痛苦的问题了,有两个表:user(用户)和Blog(设置表),它们之间的关系正如我所说的是一对一的关系.现在我们来映射这两个 ...
- The 5th Zhejiang Provincial Collegiate Programming Contest---ProblemF:Faster, Higher, Stronger
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2970 唔...第二水题.除了Faster是输出最小外,另外两个都是输出最大 ...
- Bypass Preventing CSRF
CSRF在过去的n年(n>2)一直都火,在bh/defcon/owasp等会议上多次探讨CSRF的攻防[具体你可以看看以往的那些pp].前 段时间PLAYHACK.net上发表了一个总结性的pp ...
- 搭建 Android 开发环境,初试HelloWorld (win7) (下) (转)
5. 创建AVD 为使Android应用程序可以在模拟器上运行,必须创建AVD. 在Eclipse菜单中,选择 Windows -> Android Virtual Device Manage ...
- WPF性能优化经验总结
WPF性能优化一.Rendering Tier 1. 根据硬件配置的不同,WPF采用不同的Rendering Tier做渲染.下列情况请特别注意,因为在这些情况下,即使是处于Rendering Tie ...
- Tiny6410 LED字符设备驱动
1.查看用户手册 led1.led2.led3.led4 连接的分别是 GPK4.GPK5.GPK6.GPK7 2.查询6410芯片手册 下面还需要3个步骤: 1.设置GPIO为OUTPUT. 将GP ...
- POJ2527+多项式除法
模拟一遍即可. 注意一些特殊情况,见代码. #include<stdio.h> #include<stdlib.h> #include<math.h> #inclu ...