javascript - d3.js 应用颜色范围不适用于 JSON

Question

我正在使用 d3.js 设置一个简单的条形图，并希望每个条形图根据其值有多大而具有不同的颜色。我之前已经这样做过，但它似乎不适用于外部 JSON。我的颜色变量设置如下:

var maxConv = d3.max(data, function(d) {
 return d.conversion;
}); //This finds and returns the biggest value for 'conversion'

var convColors = d3.scale.linear()
                .domain([0, maxConv]) // uses the maxConv var above as highest range point
                .range(['#ed5565','#da4453']);

但是，当我将其作为填充元素应用于每个“矩形”时，它不起作用(它显示为黑色):

d3.select('#bestConvertorBarChart').append('svg')
.selectAll('rect').data(data)
.enter()
.append('rect')
    .style('fill', convColors)

我在做一些明显愚蠢的事情吗？

Answer 1

您的 convColors 正在使用对象而不是数字进行调用。您需要一个类似于用于计算最大值的访问器函数。

.style('fill', function (d) {
    return convColors(d.conversion);
});