Рекурсивная проблема с d3-анимацией

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 вместо неаккуратной рекурсивной функции.