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

我有树状结构的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

标记

---

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

一个简单的方法是向所有指定其级别的

li

元素添加一个类（例如

level1

等），然后根据该类进行选择。

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