D3.js - 根據當前數據添加或插入元素

Question

根據當前數據，d3.js中是否可以追加或插入新元素？

我把一個例子，共同展示我要實現

http://jsfiddle.net/DorjeDuck/uDBau/

基本上新的紅色圓圈什麼總是在所有的藍色圓圈和新的藍色的始終把下面的所有紅色的頂部繪製。

這到目前爲止通過過濾數據集（JavaScript數組過濾器，而不是d3過濾器）來實現。過濾器功能：

var selectNewOnesByColor = function (selection, color) { 
    return selection.data(data.filter(function (d) { 
     return d.color === color; 
    }), function (d) { 
     return d.id; 
    }) 
     .enter(); 
} 

隨後爲這一個子集添加圓圈並插入另一個子集。雖然這個工作，我想知道是否有一個更直接的方式來實現這一點。

感謝

馬丁

Answer 1

我想過濾數據的方式來實現兩種不同的輸入選擇是正確的道路要走。以下是關於這個主題的主題（鏈接到其他兩個有趣的主題）：https://groups.google.com/forum/#!msg/d3-js/PKsknGxmZ8g/ULxwneU00J4J。

在其中一個子線程中，有一個示例顯示使用selection.select以及返回新添加或插入的節點的函數。實際上，selection.append和selection.insert是如何在內部實現的，所以如果您真的想將節點創建合併爲單個數據綁定傳遞，您可以使用此功能。該函數獲取當前數據，並將使用您返回的任何節點作爲選擇元素中的節點。

但我覺得你在做前期過濾更直截了當。