【 D3.js 高级系列 — 6.0 】 值域和颜色

在【入门 - 第 10 章】作了一张中国地图，其中各省份的颜色值都是随意赋值的。如果要将一些值反映在地图上，可以利用颜色的变化来表示值的变化。

1. 思路

例如，有值域的范围为：

[10, 500]

现希望10用浅绿表示，500用深绿表示，10到500之间的值用浅绿和深绿之间的颜色表示。显然，此处需要一个函数，传入的参数是10到500之间的值，返回值是浅绿到深绿之间的颜色值。

【高级 - 第 5.1 章】介绍的颜色插值函数正好可以派上用场。

var palegreen = d3.rgb(66,251,75);	//浅绿
var darkgreen = d3.rgb(2,100,7);		//深绿

var color = d3.interpolate(a,b);		//颜色插值函数

这段代码最后得到的color可作为函数使用，参数的范围为[0, 1]，当参数为0时，返回浅绿，当参数为1时，返回深绿。但是，现在的值域是[10, 500]，范围不是[0, 1]。因此，先定义一个线性比例尺，将[10, 500]按线性关系映射到[0, 1]。

var linear = d3.scale.linear()
		.domain([10, 500])
		.range([0, 1]);

如此一来，便可结合比例尺来使用颜色插值函数。

color( linear(10) );		//返回浅绿RGB(66,251,75)
color( linear(250) );		//返回浅绿和深绿之间的值
color( linear(500) );		//返回深绿RGB(2,100,7)

2. 绘制完整的中国地图

在【入门 - 第 10 章】有绘制中国地图的方法。

本例中更改为读取 TopoJSON 文件，这种类型的文件更小，能提高读取速度。关于 TopoJSON 和 GeoJSON 的区别，请参见【