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

Question

我正在尝试做的...

我正在玩弄 D3 来制作复合动画。我有以下最终状态：

本质上我想要连接点的动画 - 添加第一个圆圈。然后将线画到第二个圆圈。绘制线后，将添加第二个圆圈。

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

我试过的...

我可以添加圆圈并单独绘制线条，包括动画。但是，我不确定如何将过渡链接在一起以形成复合动画。

我读过关于 transitions/animations的文章，它建议使用each("end"). 虽然这可以绘制初始对象，但 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 元素并从那里链接。