4 ms·
This is a good start but it glosses over the hardest part of making React work with D3, which is animations. Most animations you want to do with D3 don't fall n
by krebby 10y ago
This is a good start but it glosses over the hardest part of making React work with D3, which is animations. Most animations you want to do with D3 don't fall neatly into categories you can use with CSS animation (namely updating paths and entering / updating / exiting animations).
React as an ecosystem is pretty fantastic but the React animation story is still pretty terrible unfortunately. "Portals" / "reparenting" is a majorly hacky way of getting an element from one part of the DOM to another, and even React Motion, which solves a few of the animation gripes, is hard to use, slow, and brittle in my experience. There just isn't a good substitute for the enter-update-exit selections that make up the core of D3.
My usual workflow is to get as much DOM building done in React as I can, with D3 filling out the tricky bits. D3's lifecycles and direct DOM manipulation are much more complicated to reason about than React, on the whole.
- thom 10y agoHas anyone worked on these issues in Om or Om Next? I feel I'm coming up against exactly this wall myself, and I don't think my worldview is sufficiently Ommy to know which way to go.
- deleted 10y ago[deleted]
- randall 10y agoHave you seen Samsara? http://samsarajs.org/ http://samsarajs.org/ I'm hopeful it could do some of the middle bits.
- gedy 10y agoI've tried both, but between D3's odd imho data-binding and React animation limitations, I gave up and found using RactiveJS with SVG directly was much easier: http://examples.ractivejs.org http://examples.ractivejs.org RactiveJS uses virtual dom as well, so was quite performant and very easy animations of properties.
- krebby 10y agoI don't agree that D3's data binding is especially odd. It isn't as straightforward as React's vdom descriptor, but it's not especially complicated: https://bost.ocks.org/mike/circles/ https://bost.ocks.org/mike/circles/
- gedy 10y agoTo each their own - my issue is if you are starting with some JS data (via API, etc) - trying to bind to D3 is rather complex compared to using other view tech.
- krebby 10y agoThat's fair. Keep in mind that d3's major use case has historically been for building interactive data visualizations with dynamic data. Viewed through that lens, its data binding is a pretty integral part of the design.
- colinmegill 10y agoYou are in the minority. Having taught it, I've seen students struggle. Creating markup through chained functions executed as many times as there are items in an array, where the convention is to name the array singularly: ie., node.append('g') is counterintuitive.
- krebby 10y agoIt's definitely a steeper learning curve than simply creating a node and appending to the DOM (the d3-specific idioms are particularly obtuse) but it's not insurmountable.
- seanp2k2 10y agoIf using Ember instead of React, Liquid Fire is pretty incredible and easy to use: https://github.com/ember-animation/liquid-fire https://github.com/ember-animation/liquid-fire
- earthnail 10y agoI'm afraid I fail to see how Liquid Fire competes with D3 in any way. It looks like a library for UI state transitions, but not for animating graphs, or all the crazy things one can do with D3 (some of these examples are even given in the D4 article).