在使用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])
})