пытаясь получить гладкие пути svg

Question

Я работаю над SVG с текущими анимированными дорожками SVG. Эта реализация SVG основана на другой стандартной реализации SVG. Моя проблема в том, что строки в эталонной реализации плавно переходят навсегда. Тем не менее, моя реализация, похоже, встречает тонкие, но заметные икоты в своем текущем процессе. Вот оригинальный implmentation:

https://jsbin.com/hodoseb/edit?html,output

Вот мой код:

https://jsbin.com/jitufih/edit?html,output

Вот мой SVG:

https://www.dropbox.com/s/kfroff5fyidd0ay/map-path-1213.svg?dl=0

Любая идея, почему моя версия имеет икоты в ее потоке анимация?

Answer 1

Ваш пунктирный путь NortheastSoutheastFlow перезаписывает атрибут класса flowline CSS stroke-dasharray. Поэтому вместо использования 10,4 он использует 12,4 (поиск по stroke-dasharray="12,4" в вашем SVG). Это приводит к каждой строке тир, и это пространство после того, как иметь длину , а не 14. Таким образом, вы должны быть интерполирование анимировать от 0 до 16 в вашем animateThis функции:

return d3.interpolate(0, 16); 

С учетом этим изменением анимация гладкая. Кроме того, вы можете просто изменить атрибут stroke-dasharray в SVG как 10,4, как в исходной реализации. Ваш класс flowline CSS игнорируется, о чем не упоминается в SVG.