复方动画的不同形状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.

我已经了解过渡/动画的，使用提示每个（结束）。虽然这会工作绘制最初的对象，最终不火，直到其他过渡后。

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.

• 中使用每个（结束，...）的链接过渡正确的做法？


• 如何启动另一个动画（即开始画线），同时仍允许另一个过渡完成（即第一个圆半径突发）。

• 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容易链，而无需使用结束。这里见注释。

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屋！