Javascript d3js selection.enter（）取决于新添加数据的顺序？

我理解错了吗？还是应该是这样

原圆

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

单击按钮，调用下面的函数

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');
}

我想它应该为peter在cx=100处添加一个绿色圆圈，但是，它会将john的圆圈颜色更改为绿色

如果我这样做

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

---

一切正常。

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

---

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

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

---

迈克“

嗨，拉尔斯，非常感谢你的回答。真的很感谢。我很高兴你的问题得到了答案，但你需要付出更多的努力，让你的问题更容易理解，而不需要依赖他人为你编辑。特别是，您的几个问题显示了代码格式问题。在Markdown编辑器上方提供帮助，解释如何正确格式化代码；在问下一个问题之前，你应该熟悉这个过程。