D3.js 链式过渡，用于不同形状的复合动画 [英] D3.js chain transitions for compound animations for different shapes

问题描述

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

I'm toying with D3 to make a compound animation. I have the following final state:

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

Essentially I want to animation connecting the dots - add the first circle. Then draw the line to the second circle. Once the line is drawn, the second circle is added.

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

To add some visual appeal, I perform other transitions, such as changing circle radius for the first and second circle as the line is draw.

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

I can add the circles and draw the line individually, including animations. However, I'm not sure how to proceed with chaining the transitions together to form the compound animation.

我阅读了关于过渡/动画的内容，建议使用each("end").虽然这可以用于绘制初始对象，但 end 直到其他转换之后才会触发.

I've read about transitions/animations, which suggests using each("end"). While this would work to draw the initial objects, end doesn't fire until after the other transitions.

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

• Is using each("end", ...) the correct approach for chaining transitions?
• How do I start another animation (i.e. start draw the line) while still allowing another transition to complete (i.e. the first circle radius burst).

推荐答案

从 d3.v3 开始，过渡更容易链接，无需使用end".请参阅此处的注释.

The transition are easier to chain since d3.v3 without using "end". See the notes here.

例如，看看这个:

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

这是针对同一元素的过渡.对于不同的元素，请查看这个.

That's for transitions on the same element. For different elements, look at this one.

// 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 元素并从那里链接.

The transition is attached to the svg element and chained from there.

这篇关于D3.js 链式过渡，用于不同形状的复合动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！