更新包布局上的凌乱数据

Question

我试图从包布局中删除一个圆圈及其子节点，然后重新计算其他圆圈。我使用exit来处理已删除的数据，但每当我添加或删除元素并应用转换时，其上下文都会变得混乱：

我可以看到Erlang之前是leaf，之后它会成为Clipper和Basic（！？）的父级。这是demo。

我创建了pop功能，删除最后元素：

window.pop = function() {
  data.children.pop();
  var selection = svg.datum(data).selectAll(".node").data(pack.nodes);

  // Removed nodes
  selection
    .exit()
    .remove();

  // Update it all
  selection
    .transition()
    .duration(500)
    .attr("transform", function(d) {
      return translate(d.x, d.y);
    })
    .select("circle")
    .attr("r", function(d) {
      return d.r;
    });
};

还有一个添加元素的update函数。

我想，如果文本有行为，应该是因为数据变得混乱，因为文本相对定位。贫穷的孩子正在失去父母！为什么会这样？

Answer 1

问题是D3与正确的元素不匹配正确的数据项。你可以通过提供一个关键函数作为.data()的第二个参数来告诉它如何：

var selection = svg.datum(data).selectAll(".node")
                   .data(pack.nodes, function(d) { return d.name; });

完整演示here。