Improvements to collapsible force example.

examples/force/force-collapsible.html

@@ -10,8 +10,8 @@
 
 circle.node {
   cursor: pointer;
-  stroke: #3182bd;
-  stroke-width: 1.5px;
+  stroke: #000;
+  stroke-width: .5px;
 }
 
 line.link {
@@ -34,6 +34,8 @@ var w = 960,
 
 var force = d3.layout.force()
     .on("tick", tick)
+    .charge(function(d) { return d._children ? -d.size / 100 : -30; })
+    .linkDistance(function(d) { return d.target._children ? 80 : 30; })
     .size([w, h]);
 
 var vis = d3.select("#chart").append("svg:svg")
@@ -42,6 +44,9 @@ var vis = d3.select("#chart").append("svg:svg")
 
 d3.json("../data/flare.json", function(json) {
   root = json;
+  root.fixed = true;
+  root.x = w / 2;
+  root.y = h / 2;
   update();
 });
 
@@ -75,12 +80,15 @@ function update() {
       .data(nodes, function(d) { return d.id; })
       .style("fill", color);
 
+  node.transition()
+      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; });
+
   // Enter any new nodes.
   node.enter().append("svg:circle")
       .attr("class", "node")
       .attr("cx", function(d) { return d.x; })
       .attr("cy", function(d) { return d.y; })
-      .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; })
+      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; })
       .style("fill", color)
       .on("click", click)
       .call(force.drag);
@@ -121,12 +129,13 @@ function flatten(root) {
   var nodes = [], i = 0;
 
   function recurse(node) {
-    if (node.children) node.children.forEach(recurse);
+    if (node.children) node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
     if (!node.id) node.id = ++i;
     nodes.push(node);
+    return node.size;
   }
 
-  recurse(root);
+  root.size = recurse(root);
   return nodes;
 }