使用D3将分层JSON转换为HTML

Question

I am trying to visualize hierarchical JSON using D3 using recursive function. Here is JSFiddle – http://jsfiddle.net/nBVcs/ and here is relevant part of the code:

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

So far, this approach has several problems. First is that leaf nodes are rendered twice.

Another issue with this approach is that adding deeper leaf nodes will lead to error because D3 will try to bind non-existing array (d.children) to the selection.

I would be glad if you could point me to the right direction.

Answer 1

Your recursive call was incorrect, this will work:

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

I also updated your fiddle .

I made another small modification: The <text> node should be appended to the .enter() group, otherwise it will be duplicated when you update the tree. (this is only relevant if you plan on using this code not only for creating the tree, but also for updating it) See general update pattern for more information.