D3.js链转换为不同形状的复合动画 [英] D3.js chain transitions for compound animations for different shapes

问题描述

我要做什么...

我用D3制作一个复合动画。我有以下最终状态：

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

要添加一些视觉吸引力，我会执行其他转换，例如更改圆形

我尝试过的...

我可以添加圈子并单独绘制线条，包括动画。但是，我不知道如何继续链接转换一起形成复合动画。

我有了解转换/动画，建议使用每个（end）。

问题

ul>

正在使用每个（end，...）链接转换的正确方法？

如何开始另一个动画（即开始绘制线条），同时仍允许完成另一个转换（即第一个圆形半径突发）。

解决方案

从d3.v3开始，转换更容易链接，而不使用end。请参阅此处的注释。

例如，查看这一个：

  rect.transition（）
 .duration（500）
 .delay（function（d，i）{return i * 10;}）
 .attr（x，function（d，i，j）{return x（dx）+ x.rangeBand（）/ n * j;}）
 .attr（width，x。 rangeBand（）/ n）
 .transition（）
 .attr（y，function（d）{return y（dy）;}）
 .attr （d）{return height-y（dy）;}）; 
  

这是对同一元素的转换。对于不同的元素，请查看这一个。

  //首先转换行&标签到新城市。 
 var t0 = svg.transition（）。duration（750）; 
 t0.selectAll（。line）。attr（d，line）; 
 t0.selectAll（。label）。attr（transform，transform）.text（city）; 
 
 //然后转换y轴。 
 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元素并从中链接。

What I'm trying to do...

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.

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.

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).

解决方案

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

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.

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