0

我正在尝试通过将动画与递归链接在一起来使用 d3 运行动画。我有一个函数 animate 像这样调用自己，直到所有动画链接在一起

(function animate(transition) {
    // code here

    animate(transition.transition())
})(selection.transition());

可视化本身有效，但我试图跟踪该函数被调用的次数，以便我可以在屏幕上与动画同步显示它。然而，递归在第一个转换完成之前将转换链接在一起，所以我的计数器总是只是最后一个转换的编号。

这是一个 jsfiddle，它显示了我正在尝试做的事情。奇怪的是圆的半径设置正确，即在设置属性时它得到正确的计数，而在同一个动画调用中它是不正确的。我查看了旧的堆栈溢出问题，并且查看了 d3 文档，但我找不到在整个递归过程中跟踪计数的好方法。有谁知道这样的方式？

4

1 回答 1

0

您的递归函数立即运行 - 替换count++;为console.log(count++);- 并且您会看到控制台将立即填充 1、2、3、...、59。由于 d3 会自动链接转场，因此转场继续播放缓慢，因此：

svg.selectAll('circle')
  .transition().style("fill","pink")
  .transition().duration(10000).style("fill", "green")
  .transition().duration(400).style("fill", "red")

将所有圆圈变为svg粉红色，然后慢慢变为绿色，然后快速变为红色。您拥有的递归函数基本上将一长串 60 个转换的列表链接在一起，然后 d3 慢慢将其播放出来。

我不确定您的代码中保持计数与动画同步的最佳位置 - 也许其他人可以加入？我可能会使用d3.timer而不是一个不稳定的递归函数。

于 2013-07-17T21:34:14.677 回答