颜色插值指的是给出两个 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 ，转载请注明出处，谢谢