Question

对于每个数据项，我添加一个组（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();

有人可以提供一些提示或指出一个很好的例子吗？

Answer 1

数据绑定到父母，因此您需要为与父母相关的圈子添加输入/转换/退出：

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);

以下是一个示例：http://jsfiddle.net/3M4xh/2/

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

1 个答案: