3

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?

VividD
  • 10,456
  • 6
  • 64
  • 111
user2657632
  • 31
  • 2
  • You could hack it by looping through all your nodes and calling the `click` function on them. Or in the json file, find/replace "`children`" with "`_children`". – elsherbini Aug 06 '13 at 18:46
  • Modification of json file with "children" to "_children" did not work. Not sure where you would implement the loop to implement click function on all the nodes. Do you have a sample script that could work with page at http://mbostock.github.io/d3/talk/20111116/force-collapsible.html – user2657632 Aug 07 '13 at 14:25

2 Answers2

2

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])};
mdim
  • 105
  • 1
  • 10
1
       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);
                 });
knives22
  • 303
  • 1
  • 2
  • 13