3

我不确定这是 d3 错误还是我做错了什么。看看以下内容：

http://jsfiddle.net/Jakobud/SfWjB/6/

var data = [
        { value: 20, color: 'red' },
        { value: 30, color: 'blue' },
        { value: 30, color: 'purple' }  // Same value as 2nd object
    ];

var w = 140,
    h = d3.max(data, function(d){ return d.value; }) + 30,
    barPadding = 4,
    topPadding = 1,
    bottomPadding = 20;

var svg = d3.select('#chart')
    .append('svg:svg')
    .attr('width', w)
    .attr('height', h);

var rects = svg.selectAll('rect')
    .data(data, function(d){ console.log(d); return d.value; })  // All 3 objects found here
    .enter()
    .append('rect')
    .attr('x', function(d,i){ console.log(i); return i * w / data.length + 1; })  // Last data object ignored, not placed at all
    .attr('y', function(d){ return h - d.value - topPadding - bottomPadding })
    .attr('width', w / data.length - barPadding - 3 )
    .attr('height', function(d) { return d.value })
    .attr('fill', function(d) { return d.color })
    .attr('stroke', '#333')
    .attr('stroke-width', 2);

text = svg.selectAll('text')
    .data(data, function(d){ return d.value; })
    .enter()
    .append('text')
    .text(function(d){ return d.value; })
    .attr('x', function(d,i){ return i * w / data.length + 20; })
    .attr('y', function(d,i){ return h - 0; })
    .attr("text-anchor", "middle")
    .attr("font-size", "20px")
    .attr("fill", "#333");

您可以在我的数据对象中看到，第二个和第三个对象具有相同的“值”。

当创建 svg rects 时，第三个数据对象被忽略，因此不会放置在图表中。如果您将第三个对象的值从 30 更改为 31 或其他值，您会看到该条确实出现了。但由于它与第二个对象的值相同，因此不会显示。

为什么是这样？你如何防止这种情况发生？这里的代码中会导致这种情况的原因是什么？rects.data()函数 see 是所有三个对象，正如您在函数中添加的 I 所看到的那样console.log()。

4

1 回答 1

5

您将数据与现有数据匹配的方式导致了问题，尤其是行

.data(data, function(d){ return d.value; })

value这告诉 d3 如果它们的属性相同，您认为两个数据对象相同。这就是您的第二个和第三个对象的情况，因此只添加了第一个。如果你想要两者，你可以省略告诉 d3 如何比较数据对象的函数（因此依赖于通过数组索引匹配的默认行为），或者更改该函数以考虑例如color。

总而言之，您所看到的不是错误，而是功能:) 这种行为完全是预期和想要的。

于 2013-04-19T20:56:30.523 回答