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

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