递归d3动画问题答案

【问题标题】：recursive d3 animation issue递归d3动画问题
【发布时间】：2013-07-17 19:40:57
【问题描述】：

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

(function animate(transition) {
    // code here

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

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

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

【问题讨论】：

标签： javascript animation recursion d3.js

【解决方案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 而不是一个不稳定的递归函数。

【讨论】：

对。它将它们链接在一起，然后慢慢播放它们，如果我有办法将计数变量保存到每个转换中，这正是我想要的。我想出了一种 hacky 方法来做到这一点，即像这样(function animate(circle_trans, counter_trans) { // ... counter_trans.call(function() { counter_trans.__data__ = count; }); // ... animate(circle_trans.transition(), counter_trans.transition()); })(); 将转换链接到柜台，但我觉得应该有更简单的方法