CODEWITHSUNDEEP
javascriptcssd3.jssvgreactjs
Rob Moffat
Rob Moffat

Reputation: 475

Transition Animation Using React and SVG

I have a React component that generates some SVG, like so:

<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>

The <path> elements get updated on the server. Because it uses a virtual DOM, react only creates/deletes elements it needs to. The d= attributes can change, moving the elements around.

However, the elements jump from one place to another. It would be nice if the elements that are moving transition to their new positions.

Does anyone have any suggestions of the best way to achieve this?

Upvotes: 0

Views: 3023

Answers (1)

Rob Moffat
Rob Moffat

Reputation: 475

For what it's worth:

In the end, I created a React component to render the <svg /> tag. Then, I added a componentDidUpdate() method that added content within my svg tag using d3.

Broadly, following the approach detailed here:

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

Apparently, using d3 in this way is more performant than using React for every <path> element.

Upvotes: 1

Related Questions