【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
来源:互联网 发布:mysql数据库基础教程 编辑:程序博客网 时间:2024/05/16 12:41
颜色插值指的是给出两个 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 可当做函数使用,参数的范围为[0, 1]。compute(0) 返回红色,compute(1) 返回绿色,传入 0 ~ 1 之间的值时,返回红色到绿色之间的插值颜色。
有时候,某个值域的范围并不在 0 到 1 之间,例如在 0 到 150 之间,怎么讲二者对应起来呢?使用一个线性比例尺即可,定义如下,
var linear = d3.scale.linear().domain([0,150]).range([0,1]);
在计算颜色值时,只要 compute(linear(x))即可,x的范围是 0 到 150 。
下面绘制150个矩形,分为10行,每行15个,用颜色插值函数分别计算每个矩形的填充色。
var rects = svg.selectAll("rect").data(d3.range(150)).enter().append("rect").attr("x",function(d,i){return i%15 * 15;}).attr("y",function(d,i){return Math.floor(i/15) * 15;}).attr("width",15).attr("height",15).style("fill",function(d){return compute(linear(d));});
结果如下图,
2. 线性渐变过滤器
有时需要在一个图形上使用渐变的颜色,渐变表示一种颜色平滑过渡到另一种颜色。SVG中有线性渐变<linearGradient>和放射性渐变<radialGradient>。下面以线性渐变为例来说明渐变的使用方法。
渐变也是定义在<defs>标签中的,然后给渐变定义一个id号,在需要使用的图形上调用此id号即可。
<defs><linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F00" /><stop offset="100%" stop-color="#0FF" /></linearGradient></defs>
x1、y1、x2、y2用于定义渐变的方向,此处表示的是水平渐变。offset定义渐变开始的位置,stop-color定义此位置的颜色。接下来使用此渐变:
<rect fill="url(#myGradient)" x="10" y="10" width="300" height="100"/>
那么,在 D3 中的代码是怎样的呢?按照线性渐变的元素结构添加相应的元素即可,
//定义一个线性渐变var defs = svg.append("defs");var linearGradient = defs.append("linearGradient").attr("id","linearColor").attr("x1","0%").attr("y1","0%").attr("x2","100%").attr("y2","0%");var stop1 = linearGradient.append("stop").attr("offset","0%").style("stop-color",a.toString());var stop2 = linearGradient.append("stop").attr("offset","100%").style("stop-color",b.toString());
然后再添加到一个矩形上,代码如下,
//添加一个矩形,并应用线性渐变var colorRect = svg.append("rect").attr("x", 15).attr("y", 200).attr("width", 200).attr("height", 30).style("fill","url(#" + linearGradient.attr("id") + ")");
结果如下图,
3. 结果
总结上面的内容,并添加了一些交互式的内容,以便各位读者看清楚,结果如下。
点击下面的地址,右键点浏览器查看代码:
http://www.ourd3js.com/demo/G-5.1/colorinterpolate.html谢谢阅读。
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2015 年 5 月 9 日
- 更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
- 【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
- 【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
- 【 D3.js 高级系列 — 6.0 】 值域和颜色
- 【 D3.js 高级系列 — 5.0 】 颜色
- d3,颜色插值
- 【 D3.js 高级系列 — 2.0 】 捆图
- 【 D3.js 高级系列 — 8.0 】 标线
- 【 D3.js 高级系列 】 总结
- 【 D3.js 高级系列 — 1.0 】 文本的换行
- 【 D3.js 高级系列 — 1.1 】 封装文本自动换行
- 【 D3.js 高级系列 — 3.0 】 堆栈图
- 【 D3.js 高级系列 — 4.0 】 矩阵树图
- 【 D3.js 高级系列 — 7.0 】 标注地点
- 【 D3.js 高级系列 — 9.0 】 交互式提示框
- 【 D3.js 高级系列 — 10.0 】 思维导图
- 【 D3.js 高级系列 — 10.0 】 思维导图
- iOS 颜色线性渐变
- CSS3-颜色渐变--线性渐变+径向渐变
- 装箱问题---动态规划
- poj1028 模拟浏览器后退和前进(栈)
- 《Http下午茶》-http请求
- uboot移植OK6410
- Coursera class library(xlsx) rJava加载失败
- 【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
- 深入了解Android图形管道-part1
- 深入了解Android图形管道-part2
- Linux文件系统管理
- LeetCode Implement Trie (Prefix Tree)
- 06_Java基础_反射、正则表达式、图形界面
- J2EE中的文件上传插件使用方法
- javascript 点滴
- Java中 final finally finalize