縮放在d3js

如果我有一組是百分比從-0.75至0.3數據的數字，我想創建一個熱地圖，-0.75是「鮮紅的」磚和.3值是「明亮的綠色價值「並且介於兩者之間的所有內容都被縮放。縮放在d3js

目前，我有這樣的：

var color = d3.scale.quantize() 
.domain([-.7, .3]) 
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));

CSS

.RdYlGn .q0-11{fill:rgb(255,0,0)} 
.RdYlGn .q1-11{fill:rgb(255,50,50)} 
.RdYlGn .q2-11{fill:rgb(255,100,100)} 
.RdYlGn .q3-11{fill:rgb(255,150,150)} 
.RdYlGn .q4-11{fill:rgb(255,200,200)} 
.RdYlGn .q5-11{fill:rgb(255,255,255)} 
.RdYlGn .q6-11{fill:rgb(200,255,200)} 
.RdYlGn .q7-11{fill:rgb(150,255,150)} 
.RdYlGn .q8-11{fill:rgb(100,255,100)} 
.RdYlGn .q9-11{fill:rgb(50,255,50)} 
.RdYlGn .q10-11{fill:rgb(0,255,0)}

但這些數字似乎不正確的擴展。百分比似乎縮放，像這樣：

.3 = q0 Green 
.0 = q2 
-.1 = q4 
-.5 = q5 White 
-.7 = q11 Red

這是有道理的，-0.5是我的白布中間值，因爲這是1.3和-.7位數，但我不希望它是那個。任何幫助？

來源

2013-02-10 iTake

哪個值做你想做的是白色的？如果你想要白色以0爲中心，那麼你應該給一個對稱域，例如[-0.7，0.7]。 – 2013-02-13 16:29:06

看看內置的色彩插值here

在你的情況D3的它會是這個樣子：

var interpolator = d3.interpolateHsl('rgb(255,0,0)', 'rgb(0,255,0)'); 
var scale = d3.scale.linear() 
    .domain([-.7, .3]) 
    .range([0, 1]) 
// interpolator(scale(0)) will return a color in between red and green

來源

2013-02-10 02:50:13

幸運的是完成你想要的一個非常簡單的方法。只需使用一個polylinear規模，這只是一個普通的d3.scale.linear()在每個地方一個新的顏色應該開始值錨點。

爲了有紅色的負值，白色爲零，而綠色爲陽性，使用：

polylinear_color = d3.scale.linear() 
    .domain([-0.3, 0, 0.7]) 
    .range(['rgb(255,0,0)','rgb(255,255,255)','rgb(0,255,0)'])

規模完成所有的插值而不是使用類，您只需設置.attr('fill',function(d){return polylinear_color(d);});上的東西被着色。

我做了一個的jsfiddle說明，here。

來源

2013-08-30 12:14:52

回答

相關問題