title: D3js collision not updating
body: <p>I'm trying to create an animated bubble chart using d3js. It seems to be working except for one small thing: when i animate the size of the nodes they start to overlap. </p>
  
  <p>My co-worker and me have been at it all morning but we seem to be missing or overlooking something.</p>
  
  <p>Our html/js:
      
      
      </p>
  
  <pre><code>.node {
    stroke: #fff;
    stroke-width: 1.5px;
  }
  
  .link {
    stroke: #999;
    stroke-opacity: .6;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;div class="buttons"&gt;
    &lt;button id="twelve"&gt;2012&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  var width = 960,
      height = 500;
  
  var force = d3.layout.force()
      .charge(0.5)
      .gravity(0.2)
      .distance(500)
      .size([width, height]);
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  d3.json("miserables.json", function(error, graph) {
    force
        .nodes(graph.nodes)
        .distance( function(d){ return d.radius})
        .start();
  
  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
        .attr("class", "node")
        .attr("r", function(d) { return d.radius; })
        .style("fill", function(d) { return d.color; })
        .call(force.drag);
  
    node.append("title")
        .text(function(d) { return d.name; });
  
    force.on("tick", function(e) {
      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
  
          var nodes = graph.nodes
          var q = d3.geom.quadtree(nodes),
        i = 0,
        n = nodes.length;
  
    while (++i &lt; n) {
      q.visit(collide(nodes[i]));
    }
  
    svg.selectAll("circle")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
    });
  
  
    $(document).ready(function(){
  
          $('.buttons button').on('click', function(){
              var showYear = $(this).attr('id');
              node.transition()
              .duration(350)
              .attr("r", function(d){ return d[showYear]["radius"]})
              .style("fill", function(d){ return d[showYear]["color"]})
          });
      })
  
  
  
  });
  
  
  function collide(node) {
  
    var r = node.radius + 16,
        nx1 = node.x - r,
        nx2 = node.x + r,
        ny1 = node.y - r,
        ny2 = node.y + r;
    return function(quad, x1, y1, x2, y2) {
      if (quad.point &amp;&amp; (quad.point !== node)) {
        var x = node.x - quad.point.x,
            y = node.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = node.radius + quad.point.radius;
        if (l &lt; r) {
          l = (l - r) / l * .5;
          node.x -= x *= l;
          node.y -= y *= l;
          quad.point.x += x;
          quad.point.y += y;
        }
      }
      return x1 &gt; nx2
          || x2 &lt; nx1
          || y1 &gt; ny2
          || y2 &lt; ny1;
    };
  
  }
  
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>and this is our json file:</p>
  
  <pre><code>    {
        "nodes":[
          {
              "name":     "Country One",
              "radius":   40,
              "color":    "#ff0000",
              "twelve" : {
                  "radius" : 60,
                  "color" : "#0ff000"
                  }
              },
              {
              "name":     "Country Two",
              "radius":   40,
              "color":    "#ffff00",
              "twelve" : {
                  "radius" : 60,
                  "color" : "#0ff000"
                  }
              }
  
        ]
      }
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>