如果我有一组数据,其百分比范围从-0.75到0.3,我想创建一个热图,其中-0.75是“鲜红色”瓷砖,.3值是“亮绿色值”和一切在它之间缩放。
我目前有这个:
JS
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
有意义的是-.5是我的白色中间值,因为这是.3和-7的中位数,但我不希望它是那样。有什么帮助吗?
答案 0 :(得分:5)
幸运的是,有一种非常简单的方法可以实现您想要的效果。只需使用多线性刻度,这只是一个常规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。
答案 1 :(得分:2)
看看d3的内置颜色插值器here
在你的情况下,它看起来像这样:
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