recursively display n-ary tree

Question

I'm trying to display an n-ary tree structure in the browser.

Here's an example of the data structure it is being drawn from:

var jsonObj = [{
    id: "window1", 
    name: "Corporate",
    children: [
        { id: "window12", name:"IT", children: [
            { id: "window121", name:"Dev", children: [] },
            { id: "window122", name:"Web", children: [] }
        ] }, 
        { id: "window13", name:"HR", children: [] }, 
        { id: "window14", name:"Finance", children: [] }
    ]
}];

I intend for it (the structure, that is) to look like this tree (only side-on):

http://gravite.labri.fr/images/tidyTree.jpg

and currently it looks close http://imm.io/Dz3V, but not quite there.

Here is the algorithm I wrote that produced that output:

var create_graph_components = function (json, level, offset) {
    for (var i = 0; i < json.children.length; i++) {
        offset += create_graph_components(json.children[i], level + 1, offset);
    }
    if (json.children.length == 0) {
        $('#wrapper').append("<div class=\"component window\" style=\"top:"+offset+"px;left: "+level*150+"px\" id=\""+json.id+"\"><strong>"+json.name+"</strong></div>");
        offset = 50;
    } else {
        $('#wrapper').append("<div class=\"component window\" style=\"top:"+offset/2+"px;left: "+level*150+"px\" id=\""+json.id+"\"><strong>"+json.name+"</strong></div>");
    }
    return offset;
};

All that does is add the divs to the page at the correct position, which is what I'm having problems with.

Does anybody have any idea of how I could improve my algorithm to pretty-print the tree closer to how I want it - I think I'm close, but lost for ideas!

Answer 1

I see your question is from 7 old, but if you need to refactor your code this is how to did it using an angular recursive template. I'll leave a snippet of the template in case you find it useful.

<table>
     <ng-template #recursiveList let-tree>
         <div cdkDropList (cdkDropListDropped)="drop($event)">
             <div *ngFor="let node of tree; let i=index " cdkDrag>
                 <tr>
                    <app-default-node [node]="node"></app-default-node>
                    <td *ngIf="node.children!==null && node.children.length > 0" cdkDrag>
                        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: node.children }"></ng-container>
                    </td>
                 </tr>
             </div>
         </div>
     </ng-template>
</table>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tree }"></ng-container>

Answer 2

How about the following...

function create_graph_components(json, level, offsetStart) {

    var offsetEnd = offsetStart;

    for (var i = 0; i < json.children.length; i++) {
        offsetEnd = create_graph_components(json.children[i], level + 1, offsetEnd);
    }

    var offset;            
    if (json.children.length == 0) {
        offset = offsetEnd;            
        // Node is a leaf therefore extend offsetEnd
        offsetEnd += 50;
    } else {
        // Calculates position halfway between child nodes
        offset = offsetStart + (offsetEnd - offsetStart - 50) / 2;
        // Node is a branch therefore we do not extend the offsetEnd
    }

    // Create the element
    var child = $('<div id="' + json.id + '" class="component window">' +
                      '<strong>' + json.name + '</strong>' +
                  '</div>');

    // Position the element
    child.css({
        top: offset + "px",
        left: level * 150 + "px"
    });

    // Add it to the wrapper
    $("#wrapper").append(child);     

    return offsetEnd;

}

I've created a fiddle too http://jsfiddle.net/j7Pms/