D3.js прервать переход и предотвратить конечное событие

#javascript #svg #d3.js

#javascript #svg #d3.js

Вопрос:

У меня есть необычный маленький переход D3, который срабатывает при наведении курсора мыши на определенный элемент svg. Я хочу запустить функцию, когда переход завершится. Нет проблем. Согласно документации, мне нужно только прослушать событие «end» при переходе. Вот где у меня возникают проблемы: если пользователь выводит курсор мыши из элемента запуска до завершения перехода, я хочу прервать переход и НЕ запускать свою функцию. Каждый механизм, который я нашел, с помощью которого я могу преждевременно завершить переход, по-прежнему отправляет конечное событие.

Я попробовал transition().duration(0), который, как я понимаю, перезаписал бы мой переход новым с длительностью 0, но конечное событие все еще срабатывает. Я не могу понять, как я мог бы прервать и уничтожить переход без запуска конечного события. Любая помощь была бы высоко оценена.

Ответ №1:

Вы должны объединить свои переходы в цепочку вместо того, чтобы ждать конечного события, а затем запускать свой переход. Когда переход остановлен, вся цепочка останавливается. Это предназначено для того, чтобы могли выполняться новые анимации.

Вот пример цепочки:

http://bl.ocks.org/mbostock/1125997

Просто удалите .each("end", repeat); и посмотрите, что произойдет

Надеюсь, это поможет.