在【入门 - 第 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 的区别,请参见【