Переход анимации Использование React и SVG

Question

У меня есть Реагировать компонент, который генерирует некоторые SVG, например, так:

<svg width="1200" height="300" data-reactid=".0"> <path d="M150 200 l300 10 l0 40 l-300 -10z" fill="green" data-reactid=".0.$http=2//localhost=28080/api/shapes/1"></path> <path d="M300 50 l50 50 l-100 0z" fill="purple" data-reactid=".0.$http=2//localhost=28080/api/shapes/3"></path> <path d="M40 40 H10 V10 H-10 S 50 30 10 44z" fill="brown" data-reactid=".0.$http=2//localhost=28080/api/shapes/4"></path> </svg>

В <path> элементы обновляются на сервере. Поскольку он использует виртуальную DOM, реагировать только создает/удаляет элементы, которые ему нужны. Атрибуты d= могут меняться, перемещая элементы вокруг.

Однако элементы прыгают с одного места на другое. Было бы неплохо, если бы элементы, которые двигались, переходили на новые позиции.

Есть ли у кого-нибудь предложения по наилучшему способу достижения этого?

Answer 1

Для чего это стоит:

В конце концов, я создал Реагировать компонент для визуализации <svg /> тега. Затем я добавил метод componentDidUpdate(), который добавил содержимое в мой svg-тег, используя d3.

В широком смысле, следуя подходу подробно здесь:

http://bl.ocks.org/herrstucki/9205257

По-видимому, используя d3 таким образом, является более производительным, чем при использовании React для каждого <path> элемента.