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