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是如何在内部实现的，所以如果您真的想将节点创建合并为单个数据绑定传递，您可以使用此功能。该函数获取当前数据，并将使用您返回的任何节点作为选择元素中的节点。

但我觉得你在做前期过滤更直截了当。