Animation D3.js-嵌套对象的动画退出

对于每个数据项，我添加一个组（g class=“parent”），其中有一个圆圈。添加它们并设置它们的属性效果很好

但我不知道如何处理删除。如何在退出时设置嵌套对象的动画

// parents
var parents = svg.selectAll("parent").data(glyphs);
parents.enter()
    .append("g")
    .attr("class", "parent")
    .attr("transform", function (glyph) { 
        return "translate(" + glyph.x + "," + glyph.y + ")";
    });

// children
var circles = parents.append("circle");
circles
    .attr("r", 0)
    .attr("fill", function (glyph) { return glyph.color; });
// animated entry
circles.transition()
    .attr("r", function (glyph) { return glyph.radius; });

这是不起作用的部分。我不知道如何在退出时设置孩子们的动画

// animate exit
circles
    .exit() // <-- not valid
    .transition()
    .duration(250)
    .attr("r", 0);
parents
    .exit()
    .transition()
    .delay(250)
    .remove();

//设置退出动画
圈子
.exit（）//数据绑定到父对象，因此需要为与父对象相关的圆添加输入/转换/退出：

function draw(glyphs){
  console.log(glyphs)
  // parents
  var parents = svg.selectAll(".parent").data(glyphs);
  parents.enter()
    .append("g")
    .attr("class", "parent")
    .attr("transform", function (glyph) { 
        return "translate(" + glyph.x + "," + glyph.y + ")"; 
    })
    // Parent's data enter -> add circle -> do entry animation
    .append("circle")
      .attr("r", 0)
      .attr("fill", function (glyph) { return glyph.color; })
      .transition()
        .duration(250)
        .attr("r", function (glyph) { return glyph.radius; });

  // parents data changes -> select circles -> transition nested circles
  parents.select("circle")
   .transition()
     .duration(250)
     .attr("r", function (glyph) { return glyph.radius; });

  // Parent's data exit -> select circle -> do exit animation    
  parents.exit()
    .select("circle")
      .transition()
      .duration(250)
      .attr("r", 0);

  // Delay removal of parent for 250.
  parents.exit()
    .transition()
    .duration(250)
    .remove();    
}

draw(glyphs);

setTimeout(function(){
  draw(glyphs.map(function(g){g.radius = g.radius + 20; return g;}));
}, 1000);

setTimeout(function(){
  glyphs.pop();
  glyphs.pop();
  glyphs.pop();
  glyphs.pop();
  glyphs.pop();
  draw(glyphs);
}, 3000);

下面是一个示例：
请尝试在parents.exit（）上进行转换，而不要使用circles.exit（）。好的，我看到您已经在这样做了。您可以尝试parents.selectAll（'g'）.transition（）.duration（）…remove（），但请在删除parents之前执行此操作。非常有用-谢谢。感觉我什么都试过了直到我看到这个。现在我明白了，这是另一个可能比这里的示例代码稍微简单的示例：