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);
    };
});

我还更新了your fiddle。

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

使用D3将分层JSON转换为HTML

1 个答案: