使用React和SVG过渡动画

Question

我有一个生成一些SVG的React组件，如下所示：

<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

为了它的价值：

最后，我创建了一个React组件来呈现<svg />标记。 然后，我添加了一个componentDidUpdate()方法，使用d3在我的svg标记中添加内容。

概括地说，遵循此处详述的方法：

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

显然，以这种方式使用d3比为每个<path>元素使用React更高效。