javascript - 在 D3 中同时混合两个过渡

Question

我已经开始学习 D3 并开始尝试使用它。 我创建了一个小动画。然而，它并没有完全按照我想要的方式进行。

这是动画。 ---> FIDDLE

现在，如果您在 JS 中看到，有一小段代码用于圆圈的转换。下面是代码。

过渡

 C.transition()
            .attr("cy", 150)
            .duration(2000)
            .each("end", function () {
            d3.select(this).transition()
            .attr("cx", 150)
            .duration(2000);

我想要的是纵向和横向交易同时发生。 我知道 D3 不是一个广泛使用的库，但我很确定我会从 SO 社区获得帮助

Answer 1

只需将两个属性放在一个动画中(更新 fiddle http://jsfiddle.net/DAEvQ/1/)

   C.transition()
        .attr("cy", 150)
        .attr("cx", 150)
        .duration(2000)