d3.js - 重複した「値」を持つ複雑なデータ オブジェクト = チャート バーの欠落

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

私のデータ オブジェクトを見ると、2 番目と 3 番目のオブジェクトが同じ「値」を持っていることがわかります。

svg rects が作成されているとき、3 番目のデータ オブジェクトは無視され、その結果、チャートに配置されません。3 番目のオブジェクトの値を 30 から 31 などに変更すると、バーが表示されることがわかります。しかし、それは 2 番目のオブジェクトの値と同じであるため、表示されません。

どうしてこれなの？これをどのように防ぎますか？これを引き起こすのは、ここのコードの何ですか? 関数に追加されrects.data()た I でわかるように、関数は 3 つのオブジェクトすべてを参照します。console.log()