我正在做什么…
我正在用D3做一个复合动画.我有以下最终状态：
本质上我想连接点的动画 – 添加第一个圆.然后将该线绘制到第二个圆.绘制线后,将添加第二个圆.
为了添加一些视觉吸引力,我执行其他转换,例如改变第一个和第二个圆的圆半径作为线绘制.
我试过了…
我可以添加圆圈并单独绘制线,包括动画.然而,我不知道如何继续链接过渡到一起形成复合动画.
我有read about transitions/animations,建议使用每个(“结束”).虽然这可以用于绘制初始对象,但是在其他转换之后才会触发结束.
问题
>正在使用每个(“end”,…)链接转换的正确方法？
>如何开始另一个动画(即开始绘制线),同时仍允许另一个转换完成(即第一个圆半径突发).
解决方法
转换更容易链接,因为d3.v3而不使用“结束”.见说明
here.
例如,看看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); });
这是为同一个元素上的转换.对于不同的元素,看看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元素并链接在那里.
