追加在D3

Question

多个元素任何人都可以解释为什么全选+数据+回车+追加初始优秀作品，但是当我再次调用它，它只是追加一个元素？

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

这里的问题是，有你有约束力的数据没有钥匙的功能，所以D3采用了指数，而不是 - 因此前四（预存）元素绑定新的数据，单第五元素获得添加。

看到这个近期的关键功能进行了详细的教程：http://bost.ocks.org/mike/constancy/

也许你真的只是想添加一个元素，而且还改变了现有的元素来代表他们的新绑定的数据，如：http://jsfiddle.net/jsl6906/wQJen/2/

Answer 2

调用.enter()方法的结果为新元素的一组。使用现有元素的原始选择。请参阅D3网站上的Enter and Exit。

// Update… 
var p = d3.select("body").selectAll("p") 
    .data([4, 8, 15, 16, 23, 42]) 
    .text(String); 

// Enter… 
p.enter().append("p") 
    .text(String); 

// Exit… 
p.exit().remove();