dynamic - 在 D3 中追加多个元素

Question

谁能解释为什么 selectAll + data + enter + append 最初工作正常，但当我再次调用它时它只 append 一个元素？

http://jsfiddle.net/scottieb/wQJen/

当我运行时

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   .attr("cx", function(d) { return x(d.x)})
   .attr("cy", function(d) { return y(d.y)})
   .attr("fill", "red").attr("r", 15);

我得到四分(对应于“datafiltered.”中的四对数据)。但是在单击按钮时，我运行

vis.selectAll("circle")
    .data(datafiltered2)
    .enter().append("svg:circle")
    .attr("cx", function(d) {
        return x(d.x)
    }).attr("cy", function(d) {
        return y(d.y)
    }).attr("fill", "black").attr("r", 5);

并且只添加“datafiltered2”的最后一个元素(这个有五对)。所以，数据不同，第二个数据发生在按钮点击时，但不确定为什么我只得到一分!

Answer 1

这里的问题是您绑定(bind)的数据没有键函数，因此 D3 使用索引代替 - 因此前四个(预先存在的)元素与新数据绑定(bind)，并添加第 5 个元素.

有关关键功能的详细信息，请参阅最近的教程:http://bost.ocks.org/mike/constancy/

可能您真的只想添加单个元素，但也更改现有元素以表示它们新绑定(bind)的数据，如:http://jsfiddle.net/jsl6906/wQJen/2/