D3.js颜色插值

在使用d3.js根据数值映射到颜色的过程中，我遇到的有两种情况：
一：数值跨度不大，变化幅度小，可以根据线性比例尺映射颜色。
首先定义颜色的起始区间以及颜色插值函数，颜色插值函数可以将颜色映射到[0,1]区间。

var a=d3.rgb(66,251,75);//浅绿
var b=d3.rgb(2,100,7);//深绿
var color=d3.interpolate(a,b);//颜色插值函数

定义线性比例尺，定义域为数值区间，值域为[0,1]

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

最后调用上述定义以实现效果。

.attr("fill",function(d){
return color(linear(d[2])).toString();
});

二：数值跨度很大，变化幅度大，不适合使用线性比例尺，此时可以使用阈值比例尺。
首先定义CSS，下面代码中定义六个类，类中分别定义了六种颜色

.q0-6{fill:rgb(165,0,38)}
.q1-6{fill:rgb(215,48,39)}
.q2-6{fill:rgb(244,109,67)}
.q3-6{fill:rgb(253,174,97)}
.q4-6{fill:rgb(254,224,139)}
.q5-6{fill:rgb(255,255,191)}

在阈值比例尺中定义了六个范围，<100,100-200,200-300,....>1550，将这六个范围作为定义域，值域为上述的类名。

var colorRange=d3.range(6).map(function(i) { return "q" + i + "-6"; });
var threshold=d3.scale.threshold()//阈值比例尺
        .domain([100,200,300,1000,1550])
        .range(colorRange);

调用方式：

.attr("class",function (d) {
            return threshold(d[2])
        })