如何使用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标记，但树根处的标记除外。

如何一次只选择一个树级？

Answer 1

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