Question

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

(function animate(transition) {
    // code here

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

可视化本身可以工作，但我正在尝试跟踪函数被调用的次数，因此我可以在屏幕上与动画同步显示它。但是，递归会在第一个转换结束之前将转换链接在一起，因此我的计数器始终只是最后一个转换的数量。

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

Answer 1

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

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

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

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

递归d3动画问题

1 个答案: