title: d3js dragging circle should rearrange other circles in main boundary circle
body: <p>I have bubble chart based on <a href="http://bl.ocks.org/mbostock/4063530" rel="noreferrer">this tutorial</a>.</p>
  
  <p>I have enabled dragging of bubbles with following code. This makes individual circles draggable, but while dragging a circle other circles don't get auto adjusted. I am using pack circle algorithm, please let me know is that possible with this algorithm.</p>
  
  <p>This is my code for dragging:</p>
  
  <pre><code>// draggable
  if(this.dragging){
      var drag = d3.behavior.drag()
      .on("drag", function( d, i) {
          var selection = d3.selectAll( '.selected');
  
          if( selection[0].indexOf( this)==-1) {
              selection.classed( "selected", false);
              selection = d3.select( this);
              selection.classed( "selected", true);
          } 
  
          selection.attr("transform", function( d, i) {
              d.x += d3.event.dx;
              d.y += d3.event.dy;
              return "translate(" + [ d.x,d.y ] + ")"
          })
          // reappend dragged element as last 
          // so that its stays on top 
          this.parentNode.appendChild( this);
          d3.event.sourceEvent.stopPropagation();
      });
      node.call( drag);
  }
  </code></pre>