javascript - d3如何做并发动画？

Question

如何在同一组上执行并发动画？

例如，我有一个包含大量矩形的组，并且有一个动画可以选择该组并为其设置动画。但我还有一个按钮，可以选择同一组矩形并为矩形设置动画。我的问题是，当第一个动画发生并且我在按钮仍在运行时按下按钮时，按钮组动画会取消前一个动画，并且前一个动画不会完全执行。

    //Contains lots of rects
    var group = canvas.append("g") 
    //Animation 1 - slowly changes rects width to be wider
    group.selectAll("rect").transition().duration(2000).attr(width, 5000);
    //Animation 2 - slowly changes colour of rect to blue
    //Happens on button click
    group.selectAll("rect").transition().duration(2000).style("fill","blue") 

有没有办法让两个动画同时发生，这样第二个动画就不会停止第一个动画？

Answer 1

一种可能的解决方案是对“矩形”的宽度进行动画处理，然后在单击按钮时对“g”的填充进行动画处理。

d3.selectAll("rect").transition().duration(2000).attr("width", 5000);

d3.select("button").on("click", function() { 
        d3.select("g").transition().duration(2000).style("fill", "blue");
});

View example on jsfiddle