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

颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到。线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可。

511

1. 颜色插值

在【高级 – 第 5.0 章】里已经提到了颜色插值,在这里做一个例子。先定义颜色插值函数如下,

如此一来,compute 可当做函数使用,参数的范围为[0, 1]。compute(0) 返回红色,compute(1) 返回绿色,传入 0 ~ 1 之间的值时,返回红色到绿色之间的插值颜色。

有时候,某个值域的范围并不在 0 到 1 之间,例如在 0 到 150 之间,怎么讲二者对应起来呢?使用一个线性比例尺即可,定义如下,

在计算颜色值时,只要 compute(linear(x))即可,x的范围是 0 到 150 。

下面绘制150个矩形,分为10行,每行15个,用颜色插值函数分别计算每个矩形的填充色。

结果如下图,

512

2. 线性渐变过滤器

有时需要在一个图形上使用渐变的颜色,渐变表示一种颜色平滑过渡到另一种颜色。SVG中有线性渐变<linearGradient>和放射性渐变<radialGradient>。下面以线性渐变为例来说明渐变的使用方法。

渐变也是定义在<defs>标签中的,然后给渐变定义一个id号,在需要使用的图形上调用此id号即可。

x1、y1、x2、y2用于定义渐变的方向,此处表示的是水平渐变。offset定义渐变开始的位置,stop-color定义此位置的颜色。接下来使用此渐变:

那么,在 D3 中的代码是怎样的呢?按照线性渐变的元素结构添加相应的元素即可,

然后再添加到一个矩形上,代码如下,

结果如下图,

511

3. 结果

总结上面的内容,并添加了一些交互式的内容,以便各位读者看清楚,结果如下。

点击下面的地址,右键点浏览器查看代码:

http://www.ourd3js.com/demo/G-5.1/colorinterpolate.html

谢谢阅读。

文档信息

【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变》上有1条评论

  1. Pingback引用通告: 【 D3.js 高级系列 】 总结 - Web前端 - 阿里欧歌

评论已关闭。