d3.js - 如何使用 d3 动态更新嵌套列表？

Question

我有树状结构的 JSON。我这样渲染它:

var lis = d3.select("#active ul")
    .selectAll("li")
    .data(getTopLevelChildren(), nodeId);
lis.enter().append("li").each(makeNodeView);

makeNodeView 递归地做同样的事情，在 DOM 中创建一个 ul/li 树。

不过，我也想动态更新列表。这个简单的代码不起作用:

lis.each(updateNodeView);
lis.exit().remove();

问题是 selectAll("li") 选择了所有 li 节点递归。因此，lis.exit().remove() 会删除页面上除根目录之外的所有 li 标记。

如何一次只选择树的 1 层？

Answer 1

var ul = d3.select(this).append("ul");
var lis = ul.selectAll(function () { return ul[0][0].childNodes })