Question

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

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

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

Answer 1

将数据与现有数据匹配的方式导致了问题，特别是行

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

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

总结一下，你所看到的不是错误，而是一个功能:)这种行为是完全可以预料到的。

具有重复“值”的复杂数据对象=缺少图表栏

1 个答案: