追加在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();