d3.js How to make all the nodes collapsed in Collapsible indented Tree

Question

I am trying to work on a sample d3 collapsible tree. mbostock’s block #1093025. Initially when the form is loaded, how do i make all the nodes collapsed initially?

Answer 1

The way the nodes are collapsed in this example is by removing the .children member of the data elements such that no children are drawn. You can do this statically to have everything collapsed to start with. The code would look like this.

function moveChildren(node) {
    if(node.children) {
        node.children.forEach(function(c) { moveChildren(c); });
        node._children = node.children;
        node.children = null;
    }
}
moveChildren(json);

Modified example here.

Answer 2

You have to add a function for that in your json loading. Check that example : http://mbostock.github.io/d3/talk/20111018/tree.html