D3v4 forceSimulation with React

I needed a Node graph in my React project for some reason. Actually it’s a really cool reason, but that’s for another blog post. I did what we all do which was to npm install d3 and lo and behold I get version 4 of D3. Which is good, and bad. V4 of D3 is basically an entire overhaul of the V3 API, which is great in that you can import just what you need, and it teases apart the math stuff from the DOM stuff, but I’m lazy, and there are no code samples out there for D3 V4 and React, and that’s bad, very very bad, so this blog fixes that.

So, here you go, my kindred spirit of a glorious lazy engineer. Here is the code you should copy and paste to get you started with a forceSimulation (which is just a fancy word for Node graph), but that uses React to render the nodes.

A D3 forceSilmuation example in React

I’d give you some kind of play by play on this, but honestly I don’t really know why some of this works. For example I have no idea why forceStrength should be that value. I just know that it works and messing with it produces either nothing, which is so gratifying (thanks Obama), or some insane dispersion, which is also uncool. I’m not a physicist, but it’s like the cosmological constant, just find a value that works and the other values are absurd, or destroy all life, or whatever.

Honestly, if your still reading at this point then bless you sir/madam, I wouldn’t and most people don’t. Most people Google for D3 forceSimulation React find this page, copy the code and start hacking. Which again, is fine, I do that all the time. But I’ll reward your reading acumen with a video of a jet powered pony ride. I can’t even.

As an even further reward for your resolve I give you another code sample:

Now with links and what not

This one has links connecting the nodes! Oh noes! I’m not a huge fan of node graphs, I think they are overplayed, much like Twenty One Pilots, who I liked in the beginning, but now, oy. Anyway, node graphs do make marginally more sense when you connect the nodes, so there you go.

Conclusion

This paragraph will conclude this article. It’s here because of I’ve written lots of articles and the editors have always required conclusions so it’s become a habit and now… here it is. What you really want is the code so scroll back up and snatch that. Honestly, it’s good.