title: D3 update circle-pack data new nodes overlap existing nodes
body: <p>I'm following the <a href="http://bl.ocks.org/mbostock/3808234" rel="nofollow noreferrer">General Update Pattern</a> but having an issue with regards to layering.</p>
  
  <p>Using a circle-pack layout, I <em>pack</em> the new data, <em>update</em>, <em>enter</em> and <em>exit</em> the circle elements. However, when new elements <em>enter</em>, they overlap the <em>updated</em> circles. </p>
  
  <p>Data key function is based on element name: </p>
  
  <pre><code>.data(nodes, function(d, i) { return d.name; });
  </code></pre>
  
  <p>So my circle pack has a spot for the <em>updated</em> circle (of the correct location and size) but it's hidden behind its newly <em>entered</em> parent circle.</p>
  
  <p><img src="https://i.stack.imgur.com/H8stR.png" alt="selecting the hidden node"></p>
  
  <p><img src="https://i.stack.imgur.com/PPgDD.png" alt="node not visible in circle-pack"></p>
  
  <p>Is there a way to send these <em>updated</em> nodes to the front or redraw them over the <em>entered</em> circles?</p>
  
  <p><strong>--UPDATE--</strong>
  As suggested by the person who closed this issue, I've tried implementing the linked to solution using moveToFront.</p>
  
  <p>I added the following code in my <em>update</em> section (which didn't change anything) and then tried adding it after the <em>enter</em> and <em>exit</em> code, which also didn't make any difference.</p>
  
  <pre><code>.each("end", function(d){ d3.select(this).moveToFront(); });
  
  
  d3.selection.prototype.moveToFront = function() {
    return this.each(function(){
      this.parentNode.appendChild(this);
    });
  };
  </code></pre>
  
  <p>For clarity, this is what the selection and update looks like:</p>
  
  <pre><code>// Load data into svg, join new data with old elements, if any.
  var nodes = pack.nodes(postData);
  node = root = postData;
  
  groupNodes = svg.selectAll("g")
    .data(nodes, function(d, i) { return d.name; });
  
  // Update and transition existing elements
  groupNodes.select("circle")
    .transition()
    .duration(duration)
    .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
    .attr('r', function(d) { return d.r; })
    .each("end", function(d){ d3.select(this).moveToFront(); });
  </code></pre>
  
  <p><strong>This moveToFront code does not make a difference to my output</strong>, and the <em>updated</em> circles remain behind the <em>entered</em> selection circles.</p>
  
  <p><strong>To summarize</strong>: the issue seems to be caused by a hierarchy layout (circle-packing) which expects the circles to be drawn in the order of the data's hierarchy. The d3 update pattern (using enter, update and exit selections) causes selected update elements to remain in the svg when the hierarchy is re-drawn, and the new layers are drawn over it. The parents of those nodes are already correctly set, so <code>parentNode.appendChild</code> doesn't do anything in this case, because it's not the cause of the issue.</p>
  
  <p><a href="http://jsfiddle.net/1f8Lqn8o/1/" rel="nofollow noreferrer">Here is a fiddle</a> to demonstrate my issue. I've tried putting the <code>moveToFront</code> code in various places, with no visible difference.
  When you hit the "Change Data" button, it'll redraw the circles, but any circles whose names overlap between the two data sets are not nested properly in the circle-pack. Children of "Group A" are hidden behind one of the parent circles. You can verify the nodes are there via Inspect Element.</p>
  
  <p>Another pic from the updated fiddle:
  <a href="https://i.stack.imgur.com/ov4r0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ov4r0.png" alt="hidden nodes"></a></p>