Hacker News Reader

Comment by lfittl | Hacker News Reader

I'd love for d3 to have great integration with React - whats your suggested approach?

https://github.com/FormidableLabs/victory seems most promising, but isn't really d3, more "d3-like".

I haven’t used React enough to form a strong opinion on right vs. wrong, but one of my objectives in decoupling D3 (see the new modules at https://github.com/d3) is to make it easier for people to use just the parts of D3 they need.

The recent more-modular approach d3 is taking (specifically, the separation of DOM selection-driven APIs from the data manipulation stuff) means you can now just use d3 with React directly.

For example, you can use d3-scale to map from data to drawing coordinates, or straight to SVG path data (using d3-path/d3-shape). You can then easily render this to an inline SVG using React (or to some other backend using React libs like react-canvas and gl-react). Building the svg elements directly this way makes it easier to attach React event handlers to them, and gives you more fine grained control, rather than using off-the-shelf components.

Here's an example combining d3-shape and d3-scale with React and react-motion: https://jsbin.com/mehata/9/edit?js,output

I had a pretty decent working example of coupling the two earlier this year: http://beatmatch.esmevane.com/

I wired things up using a Flux-like architecture, where the Store would periodically signal a data change and the component would render it, transitions and all. It all worked out pretty much as I expected.

https://github.com/esmevane/beatmatch/blob/master/assets/scr...

Here's a writeup on a few approaches: http://slides.com/shirleywu/deck#/

Yes, this would be fantastic!

Reply on news.ycombinator.com