d3 force collapsible layout - start page with all nodes collapsed

Question

I just need a simple modification of the layout available here http://mbostock.github.io/d3/talk/20111116/force-collapsible.html

The above visualization starts with all the nodes being expanded and so the user can visualize the complete hierarchy. The only problem is if the graph is dense, and the hairball that is formed is meaningless.

I would be interested in starting with just the root node and gradually expanding all the nodes as needed. Is it feasible? How much code change is needed?

Answer 1

The way I found that works for this is to call the click function on all of the children nodes. You can accomplish this by inserting the following two lines to the example that you provided above (insert these two lines right underneath the d3.json call near the beginning of the script that calls "update" at the end of it)

d3.json("flare.json", function(json) {
  root = json;
  root.fixed = true;
  root.x = w / 2;
  root.y = h / 2 - 80;
  update();
});

//new code
var collapseMe = flatten(root);
for(var j = 0; j< collapseMe.length; j++){click(collapseMe[j])};

Answer 2

       just do it like this 
        d3.json("json/results.json", function(json) {
               root = json;
               root.x0 = h / 2;
                root.y0 = 0;

                function toggleAll(d) {
                   if (d.children) {
                   d.children.forEach(toggleAll);
                  toggle(d);
                   }
               }

                 root.children.forEach(toggleAll);

                  toggle(root);
                update(root);
                 });