Javascript D3更新圆包数据新节点与现有节点重叠

我正在关注这个问题，但是在分层方面有一个问题

使用圆包布局，我打包新数据、更新、输入和退出圆元素。但是，当新元素进入时，它们与更新的圆重叠

数据键函数基于元素名称：

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

因此，我的圆圈包中有一个用于更新圆圈（位置和大小正确）的位置，但它隐藏在新输入的父圆圈后面

是否有办法将这些更新的节点发送到前端或在输入的圆上重新绘制它们

--更新-- 正如解决此问题的人所建议的，我已经尝试使用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更新模式（使用enter、update和exit选项）使选定的更新元素在重新绘制层次结构时保留在svg中，并在其上绘制新层。这些节点的父节点已正确设置，因此在这种情况下，

parentNode.appendChild

不会执行任何操作，因为这不是问题的原因

来证明我的问题。我试着把

moveToFront

代码放在不同的地方，没有明显的区别。 当您点击“更改数据”按钮时，它将重新绘制圆，但名称在两个数据集之间重叠的任何圆都不会正确嵌套在圆包中。“A组”的孩子隐藏在其中一个父圈后面。您可以通过Inspect元素验证节点是否存在

更新的fiddle中的另一张图片：

---

D3提供了一种基于与元素绑定的数据对元素重新排序的方法。在您的情况下，要检查的条件是元素的

.depth

属性--“depther”元素应该出现在前面：

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

svg.selectAll（“g”）
.排序（功能（a、b）{
如果（a.depth

---

完成演示。

@lars kotthoff您链接的解决方案不起作用。你还有什么其他建议吗？嗯，好的，我重新开张了。你能提供一个完整的例子来演示这个问题吗？@lars kotthoff我发布了一个JSFIDLE来演示这个问题。有没有办法将这些隐藏节点移动到层次结构中的适当层？当一半的圆不可见时，我真的看不到发生了什么。我已经改变了笔画，我觉得很好——所有的圆圈看起来都是正确的顺序。@lars kotthoff我从你的小提琴中添加了另一张图片，以显示一个“隐藏”节点的示例。未正确着色的节点也是“更新”选择中未正确设置样式的节点的一个示例，但这是一个需要解决的不同问题。