使用 D3 将分层 JSON 转换为 HTML

Transforming hierarchical JSON to HTML using D3

本文关键字：转换 HTML JSON 分层 D3 使用      更新时间：2023-09-26

我正在尝试使用递归函数使用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） 绑定到所选内容。

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

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

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

我也更新了你的小提琴。

我做了另一个小修改：<text>节点应该附加到.enter()组，否则当你更新树时，它将被复制。（仅当您计划不仅使用此代码创建树，还用于更新树时，这才有意义）有关详细信息，请参阅常规更新模式。

相关文章：