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']);

但是，当我将此应用于每个“rect”作为填充元素时，它不起作用（以黑色显示）：

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);
});

d3.js应用不使用JSON的颜色范围

1 个答案: