Javascript 使用D3将分层JSON转换为HTML

我试图使用D3和递归函数来可视化层次化JSON。这是JSFIDLE –以下是代码的相关部分：

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）绑定到选择

---

如果您能为我指出正确的方向，我将非常高兴。

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

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

我也更新了

我做了另一个小修改：

节点应该附加到

.enter（）

组中，否则在更新树时它将被复制。 （仅当您计划使用此代码不仅用于创建树，而且用于更新树时，此代码才相关）

---

有关更多信息，请参阅。

您正在寻找一个新的解决方案吗？看起来不错！我不使用SVG进行渲染，但这绝对是一个灵感。谢谢，谢谢！你能再详细说明一下节点吗？