Best way to use D3 in React.js

Community Help
1

Hi there.
I’ve been learning D3 for a month, and specifically I’ve been trying to make it work in React projects. I found several ways to approach this, and I’m extremelly confused.
Could you plese shed some light as to what’s the best way to use D3 in (modern) React (with hooks)? I’m mostly interested in creating force graphs.
Much appreciated,

Daniel

1 Like
2

Have you seen Using React with d3.js ?

You may also want to ask around on the D3 Slack which has a very active and helpful community.

2 Likes
3

@mootari’s tips sound good. I haven’t tried in a while but I think about two approaches. Either:

  1. Don’t use any of the d3 modules that touch the DOM. No d3-selection, no d3-transition, no d3-axis, no d3-brush, no d3-zoom. Just stuff like d3-scale, d3-array, d3-color, d3-format, d3-random.

  2. Don’t use any React stuff that touches the DOM. Make only a black-box container for the visualization in JSX, attach a ref, pass the ref to D3, and do all the DOM stuff in D3.

D3 has a ton of helpful modules that are related to visualization but don’t actually draw it on the screen; if that’s the stuff you need, go option 1. But it’s also a really expressive and distinctive way of drawing the stuff on the screen; if that’s the stuff you need, go option 2. Things get really messy when you mix them!

d3-force itself doesn’t touch the DOM, I think. But most of the examples you’ll find (like all of Mike Bostock’s) include touching the DOM with D3. If you’re trying to copy and paste examples you find online or need smooth transitions and enter/exits, it might be easier (involve less rewriting) to go option 2. But once you understand how d3-force is updating the attributes of the simulation (like coordinates) and how the examples you see online are using d3-selection to pass those to the DOM as attributes, you can also go option 1 and render the nodes and edges in SVG with JSX.

2 Likes