javascript D3.js 链式过渡，用于不同形状的复合动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15794619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3.js chain transitions for compound animations for different shapes
提问by Jason McCreary
What I'm trying to do...
我正在尝试做什么...
I'm toying with D3 to make a compound animation. I have the following final state:
我正在玩弄 D3 来制作复合动画。我有以下最终状态：
Essentially I want to animation connecting the dots - add the first circle. Then draw the lineto 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 circleradius for the first and second circle as the line is draw.
为了增加一些视觉吸引力，我执行了其他过渡，例如在绘制线条时更改第一个和第二个圆的圆半径。
What I've tried...
我试过的...
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.
我可以添加圆圈并单独绘制线条，包括动画。但是，我不确定如何继续将过渡链接在一起以形成复合动画。
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.
我读过关于 transitions/animations 的文章，它建议使用each("end"). 虽然这可以用于绘制初始对象，但 end 直到其他转换之后才会触发。
Questions
问题
- 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).
- 是否使用
each("end", ...)正确的方法链接转换？ - 我如何开始另一个动画（即开始画线），同时仍然允许另一个过渡完成（即第一个圆半径突发）。
回答by Biovisualize
The transition are easier to chain since d3.v3 without using "end". See the notes here.
从 d3.v3 开始，过渡更容易链接，无需使用“end”。请参阅此处的注释。
For example, look at this one:
例如，看看这个：
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);
The transition is attached to the svg element and chained from there.
过渡附加到 svg 元素并从那里链接。
