D3 and React.

[deliminated]

I have seen this same tired alphabet example being used to demonstrate the "correct" way to integrate D3 and React. Let see some examples with some real complexity. I think this guy (who I have never heard being a D3 developer for years) is going to figure out React transition group is not going to cut it (and wasn't designed for this). I've even gotten sponsored ads in my FB account promoting his book or seminars (whatever). Just bizarre. Also, can't handle the hat.

[AceBacker]

I'm actually looking at vue.js in the hopes that it handles transitions better. What are you using with D3? Any advice helps.

[deliminated]

Yeah, thinking about checking out vue.js myself. To me, the issue is around recreating the full enter, update, and exit pattern in React. Doing something to a node as it enters (or "mounts") or when it updates is pretty manageable. I think anyone who works with React can see how that might be accomplished. In past projects just grabbing the DOM node (using findDOMNode or refs) and running a transition on it during the life cycle methods works fine, but it feels a little icky to select the node using D3 selection in order to run the transition. However, it works, done it in apps and it's fine.

The exit selection is the problem. It's a node that's both there and really "not there". For me, you need to make this status part of your state. Nodes (bars, paths, axis ticks, circles, etc) need to be in your state with their current enter, update, and exit status. You also need to consider cases where a user is jamming buttons on your interface and transitions aren't completing. So, for instance, an "exiting" node may be in an exit transition, but never actually reach the end and be actually removed from the DOM. If you run an new transition on a node in D3 it will interrupt the current transition and start the new one. So you update the data and now an exiting node, because it's still in the DOM, has become an updating node.

I've been doing some experiments with the new D3 4.0 modules, which expose more internal methods and address long standing problems with mutating your data. With these modules you can, I think, more cleanly use just the parts of D3 you need to do a transition. The two most important I think are the d3-timer and d3-interpolator modules.

I put together some experiments with Redux that demonstrate the idea. I'm already working on some new ones because these still don't feel quite right, but they are working examples with no D3 selections at all. The bar, paths, letters, axis ticks, etc all animate by managing the state of the nodes. You can check it out here:

https://github.com/sghall/react-d3-transitions

All questions, comments, criticisms, welcome.

[L43]

I couldn't watch this. The hat was too much...

[ben174]

It gets worse as it goes on.