D3.js - 根据当前基准面追加或插入元素

D3.js - Appending or Inserting an element depending on the current datum

本文关键字：追加 基准面 插入 元素 js D3      更新时间：2023-09-26
是否可以

在 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();
}
随后，为一个子集

附加圆圈，为另一个子集插入圆圈。虽然这有效，但我想知道是否有更直接的方法来实现这一点。

谢谢

马丁

我认为过滤数据以实现两个不同的输入选择的方法是正确的方法。 这是关于这个主题的一个线程（链接到另外两个有趣的线程）：https://groups.google.com/forum/#!msg/d3-js/PKsknGxmZ8g/ULxwneU00J4J。

在其中一个子线程中，有一个示例显示了将selection.select与返回新附加或插入的节点的函数一起使用。 这实际上是内部实现selection.append和selection.insert的方式，因此，如果您真的想将节点创建合并到单个数据绑定传递中，则可以有效地使用它。 该函数将获得当前基准面，并将使用您返回的任何节点作为选择元素中的节点。

但我认为你对预过滤所做的更直接。

相关文章：