可以輸入（）選擇在追加/插入後重用嗎？

Question

我有一個場景，我想使用數據連接爲每個數據元素追加2個新元素。

我原本是做這樣的事情：

var y = d3.selectAll("line") 
    .data([123, 456]); 

y.enter().append("line"); // assume attr and style set 
y.enter().append("line"); 

y.transition()... 

之前，我想通了，我期待在我的過渡使用更新選擇將包含合併從輸入選擇追加。但是，這當然不起作用，因爲每個數據元素的選擇只有一個插槽。

所以我改變了代碼，使它仍然使用兩次相同的enter（）選擇，但是爲了進行轉換而重新選擇新元素。

這種方法的工作，但我的問題是這是否是一個推薦的方式去做的事情。在添加/插入後，我應該確保停止使用enter（）嗎？或者是否可以使用它來創建多個元素，只要我記得更新選擇將只包含最後創建的元素？

如果確實發現這是錯誤的，有什麼更好的方法來實現這一點？

Answer 1

否。數據連接的目的是synchronize elements with data，根據需要創建，刪除或更新元素。如果您創建元素兩次，則元素將不再與綁定的數據數組一一對應。

如果您希望兩個元素對應每個數據，那麼首先附加一個組（G）元素以建立從數據到元素的一對一映射。然後根據需要附加子元素。所得到的結構是這樣的：

<g> 
    <line class="line1"></line> 
    <line class="line2"></line> 
</g> 
<g> 
    <line class="line1"></line> 
    <line class="line2"></line> 
</g> 

例如：

var g = svg.selectAll("g") 
    .data([123, 456]); 

var gEnter = g.enter().append("g"); 
gEnter.append("line").attr("class", "line1"); 
gEnter.append("line").attr("class", "line2");