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

但是，当我将其作为填充元素应用于每个 "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

d3.js applying color ranges not working with JSON

javascript

json

d3.js