D3.js用于不同形状的复合动画的链转换

Question

我想做什么......

我正在玩D3以制作复合动画.我有以下最终状态:

基本上我想要动画连接点 - 添加第一个圆圈.然后将线条绘制到第二个圆圈.绘制线后,添加第二个圆.

为了增加一些视觉吸引力,我执行其他过渡,例如在绘制线条时更改第一个和第二个圆圈的圆半径.

我试过的......

我可以添加圆圈并单独绘制线条,包括动画.但是,我不确定如何继续将转换链接在一起以形成复合动画.

我已经阅读了有关过渡/动画的内容,建议使用each("end").虽然这可以用于绘制初始对象,但是在其他过渡之后才结束.

问题

• 使用each("end", ...)正确的方法链接转换？
• 如何启动另一个动画(即开始画线),同时仍然允许另一个过渡完成(即第一个圆半径突发).

Answer 1

从d3.v3开始,转换更容易链接而不使用"end".请参阅此处的说明.

例如,看看这一个:

rect.transition()
  .duration(500)
  .delay(function(d, i) { return i * 10; })
  .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
  .attr("width", x.rangeBand() / n)
  .transition()
  .attr("y", function(d) { return y(d.y); })
  .attr("height", function(d) { return height - y(d.y); });

这是针对同一元素的转换.对于不同的元素,请看这一个.

// First transition the line & label to the new city.
var t0 = svg.transition().duration(750);
t0.selectAll(".line").attr("d", line);
t0.selectAll(".label").attr("transform", transform).text(city);

// Then transition the y-axis.
y.domain(d3.extent(data, function(d) { return d[city]; }));
var t1 = t0.transition();
t1.selectAll(".line").attr("d", line);
t1.selectAll(".label").attr("transform", transform);
t1.selectAll(".y.axis").call(yAxis);

转换附加到svg元素并从那里链接.