Building D3 interactive network graph D3 Force-Simulation + React + TypeScript

We can build very powerful network graphs using D3 Force Simulation library. I have already written how we can build such graph in Angular in my previous blog.

In this blog, I have done same exercise but with React.js and TypeScript. Before we start, checkout the running application to see what we are trying to build.

D3

Let’s go!

1. Create new react application with TypeScript

npx create-react-app d3-network-graph-editor --template typescript

2. Add D3 package in application

yarn add d3

3. Add D3 types for IDE

yarn add d3 @types/d3

4. Run application to test everything is good so far.

yarn build

5. Let’s add code for our D3 network graph. First, we will create a SVG element reference and pass it to D3 for rendering graph and other class members for graph manipulation.