4 ms·

I'd love for d3 to have great integration with React - whats your suggested approach? https://github.com/FormidableLabs/victory https://github.com/FormidableLa

by lfittl 11y ago

I'd love for d3 to have great integration with React - whats your suggested approach? https://github.com/FormidableLabs/victory https://github.com/FormidableLabs/victory seems most promising, but isn't really d3, more "d3-like".

graffitici 11y ago
Yes, this would be fantastic!
mbostock 11y ago
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 https://github.com/d3) is to make it easier for people to use just the parts of D3 they need.
esmevane 11y ago
I had a pretty decent working example of coupling the two earlier this year: http://beatmatch.esmevane.com/ 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/scripts/components/scatter.coffee https://github.com/esmevane/beatmatch/blob/master/assets/scr... https://github.com/esmevane/beatmatch/blob/master/assets/scripts/stores/scatter_store.coffee https://github.com/esmevane/beatmatch/blob/master/assets/scr...
mambodog 11y ago
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 https://jsbin.com/mehata/9/edit?js,output
phunge 11y ago
Here's a writeup on a few approaches: http://slides.com/shirleywu/deck#/ http://slides.com/shirleywu/deck#/

by lfittl 11y ago

graffitici 11y ago

Yes, this would be fantastic!

mbostock 11y ago

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 https://github.com/d3) is to make it easier for people to use just the parts of D3 they need.

esmevane 11y ago

I had a pretty decent working example of coupling the two earlier this year: http://beatmatch.esmevane.com/ 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/scripts/components/scatter.coffee https://github.com/esmevane/beatmatch/blob/master/assets/scr... https://github.com/esmevane/beatmatch/blob/master/assets/scripts/stores/scatter_store.coffee https://github.com/esmevane/beatmatch/blob/master/assets/scr...

mambodog 11y ago

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 https://jsbin.com/mehata/9/edit?js,output

phunge 11y ago

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