在d3js中扩展

Question

如果我有一组百分比范围在-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的中间值，这是有道理的，但我不希望它是这样。有什么帮助吗？

Answer 1

幸运的是，有一个非常简单的方法来完成你想要的。只需使用多线性比例，这只是一个常规的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)'])

scale执行所有插值，您只需在要着色的对象上设置.attr('fill',function(d){return polylinear_color(d);});，而不是使用类。

我做了一个jsfiddle来说明，here。

Answer 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