d3.js - 具有重复 'values' = 缺少图表条的复杂数据对象

Question

我不确定这是 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 矩形时，第三个数据对象将被忽略，因此不会放置在图表中。如果将第 3 个对象的值从 30 更改为 31 或其他值，您可以看到该条确实出现了。但由于它与第二个对象的值相同，因此不会显示。

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

Answer 1

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

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

这告诉 d3 如果两个数据对象的 value 属性相同，您认为它们相同。您的第二个和第三个对象就是这种情况，因此只添加了第一个。如果两者都需要，您可以省略告诉 d3 如何比较数据对象的函数(因此依赖于按数组索引匹配的默认行为)，或者更改该函数以采用例如颜色也考虑在内。

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