D3 updates round packet data new nodes overlap existing nodes

Question

I follow the “General Update Pattern” , but has a separation problem.

Using the layout of the circle package, I collect new data, update, enter and exit the elements of the circle. However, when new elements appear, they overlap the updated circles.

The data key function is based on the element name:

.data(nodes, function(d, i) { return d.name; });

So, my round pack has room for an updated circle (the correct location and size), but it's hidden behind its newly introduced parent circle.

Is there a way to send these updated nodes to the foreground or redraw them in the entered circles?

- - , , moveToFront.

( ), , .

.each("end", function(d){ d3.select(this).moveToFront(); });


d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

:

// 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(); });

moveToFront , .

: , , ( ), , . d3 ( , ) , svg, , . , parentNode.appendChild , .

, . moveToFront , . " ", , , , -. " " . , Inspect.

:

Answer 1

D3 , , .sort(). .depth - " " :

svg.selectAll("g")
  .sort(function (a, b) {
    if (a.depth < b.depth) return -1;
    else return 1;
  });

.