递归D3动画问题 [英] recursive d3 animation issue

问题描述

我试图运行使用D3用递归链接在一起动画的动画。我有一个函数动画调用自身下去，直到所有的动画链接在一起

I am trying to run an animation using d3 by chaining animations together with recursion. I have a function animate that calls itself like this until all the animations are chained together

(function animate(transition) {
    // code here

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

可视化本身的工作，但我试图跟踪多少次函数被调用，所以我可以与动画同步在屏幕上显示。但是，递归链的过渡之前在一起的第一个连完成，所以我的柜台永远只是在最后的过渡数目。

The visualization itself works, but I'm trying to keep track of how many times the function has been called so I can display it on screen in sync with the animation. However, the recursion chains the transitions together before the first one even finishes, so my counter is always just the number of the last transition.

下面的一个的jsfiddle ，显示我想要做的。奇怪的是，该圆的半径设置正确，即设置属性时，它得到正确的数量，而在动画的同一呼叫它的不正确。我看着老堆栈溢出的问题，我已经通过D3文档看，我不能找到一个很好的方法来跟踪计数的整个递归。有谁知道这样的方式？

Here's a jsfiddle that shows what I'm trying to do. What is strange is that the radius of the circles are set correctly, i.e. when setting attributes it gets the proper count, while in the same call of animate it's incorrect. I've looked at old stack overflow questions, and I've looked through the d3 docs, and I can't find a good way to keep track of the count throughout the recursion. Does anyone know of such a way?

推荐答案

您递归函数立即运行 - 替换计数++; 与的console.log（算上++）; - 你会看到控制台将充满1，2，3，...，59的时候了。过渡继续玩缓慢，因为D3自动链过渡的，所以：

Your recursive function runs immediately - replace count++; with console.log(count++); - and you'll see the console will be filled with 1, 2, 3, ..., 59 right away. The transitions keep playing slowly because d3 automatically chains transitions, so:

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

将会把所有的圈子里 SVG 粉红色，然后绿色缓慢，然后迅速冲。递归函数你已经基本上链在一起的60变大的长长的名单和D3慢慢发挥出来。

will turn the all the circles in svg pink, then green slowly, then red quickly. The recursive function you have basically chains together a big long list of 60 transitions and d3 slowly plays it out.

我不知道在你的code最好的地方，保持与动画同步计数 - 也许别人可以附和中？我可能会使用 d3.timer ，而不是一个靠不住的递归函数。

I'm not sure about the best place in your code to keep the count synced with the animation - maybe someone else can chime in? I would probably use d3.timer instead of a wonky recursive function.

这篇关于递归D3动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！