javascript - d3js selection.enter() 取决于新添加数据的顺序？

Question

我理解错了吗？或者它应该是那样的？

原圆

d3.select("svg").selectAll('circle')
.data([{'name':'john', 'age': '50'}]).enter().append('circle')
.attr("cx", function(d){return d.age;}).attr("cy", '200').attr("r", '10').attr("fill",    'red');

点击按钮A调用下面的函数

function prependValue(){
    d3.select("svg").selectAll('circle')
    .data([{'name':'peter', 'age': '100'}, {'name':'john', 'age': '50'} ])
    .enter().append('circle').attr("cx", function(d){return d.age;}).attr("cy", '200').attr("r", '10').attr("fill", 'green');
}

我假设它应该在 cx = 100 处为彼得添加一个绿色圆圈，但是，它将约翰的圆圈颜色更改为绿色。

如果我做

.data([{'name':'john', 'age': '50'}, {'name':'peter', 'age': '100'} ])

一切都按预期工作。

Answer 1

在这里，我引用了 Mike 在 google group 上对这个问题的回答，以防有人想知道加入是如何工作的：“如果你想按名称加入，你需要指定一个键函数。否则默认行为是按索引加入。

http://bost.ocks.org/mike/constancy/ https://github.com/mbostock/d3/wiki/Selections#wiki-data

迈克“

Answer 2

如果您没有指定用于匹配数据元素的函数（ 的可选参数.data()），D3 会按元素的索引匹配元素。也就是说，它确实假设您将以相同的顺序传递元素。

为防止这种情况，请传入一个告诉它如何匹配元素的函数（例如按名称）。有关更多信息，请参阅文档。