javascript - 使用 D3 将分层 JSON 转换为 HTML

Question

我正在尝试使用 D3 使用递归函数来可视化分层 JSON。这里是 JSFiddle – http://jsfiddle.net/nBVcs/这里是代码的相关部分：

function addNode(selection) {
   var nodeGroup = selection.selectAll('.child')
       .data(function(d) { return d.children })

   nodeGroup
       .enter()
       .append('div')
       .attr("class", "child")

   nodeGroup
       .exit()
       .remove()

   nodeGroup
       .style("padding-left", "2em")

   nodeGroup.append("text")
       .text(function(d) { return d.name });

    nodeGroup.each(function(d) {
        if (d.children) {
            nodeGroup.call(addNode)
        };
    });
}

到目前为止，这种方法存在几个问题。首先是叶节点被渲染两次。

这种方法的另一个问题是添加更深的叶节点会导致错误，因为 D3 将尝试将不存在的数组 (d.children) 绑定到选择。

如果您能指出正确的方向，我会很高兴。

Answer 1

您的递归调用不正确，这将起作用：

nodeGroup.each(function(d) {
    if (d.children) {
        d3.select(this).call(addNode);
    };
});

我还更新了你的小提琴。

我做了另一个小修改：<text>节点应该附加到.enter()组中，否则更新树时会重复。（仅当您计划使用此代码不仅用于创建树，还用于更新它时，这才相关）有关更多信息，请参阅一般更新模式。