d3 переходы прекращают работу после окончания таймера

Question

У меня есть анимация, управляемая d3.timer(). Через 5 секунд у меня есть функция return True, чтобы закончить таймер и запустить последующие функции.

Однако, когда таймер заканчивается, я не могу использовать какие-либо переходы d3 - например, я не могу заставить SVG исчезать до черного, но я все еще могу удалить его. Точно так же я могу изменить текст, но я не могу изменить стиль.

Почему это происходит? Есть ли способ исправить это?

Вот jsFiddle того, что я работаю с (проблемные переходы прокомментированы в самом низу): http://jsfiddle.net/Amyunimus/Z59ey/

Answer 1

Вы видите это поведение, потому что

endStarted = True; 

бросает исключение - True не определен. Если вместо этого вы используете 'True', он работает. Обратите внимание, что переходы являются асинхронными. Это означает, что ваш код удаляет SVG до завершения перехода к черному. Чтобы исправить это, используйте

svg.transition().delay(1000).remove();