Question

在d3.js中是否可以根据当前数据追加或插入新元素？

我举了一个例子来说明我想要实现的目标

基本上，新的红色圆圈总是绘制在所有蓝色圆圈之上，而新的蓝色圆圈总是位于所有红色圆圈之下。

到目前为止，这是通过过滤数据集（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在内部实现的方式，因此如果您真的想将节点创建合并到单个数据绑定传递中，您可以有效地使用它。该函数获取当前数据，并将使用您返回的任何节点作为选择元素中的节点。

但我认为你在预过滤方面做得更直接。

D3.js - 根据当前数据追加或插入元素

1 个答案: