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.

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.

6. In constructor function we will initialise SVG reference.

7. The render() function would have a simple div with svgRef binding.

8. In componentDidMount() function, we will setup for our graph. We shall set size for SVG, setup a default nodes and links, force-simulation setup, drag feature setup, mouse pointers and mouse and keyboard event handlers etc.

9. Once setup is done, restart() method gets called which would be our starting point. This method redraws the graph by removing previous edges and nodes, adding new edges, showing drag lines, showing text for each node, setting an arrow direction etc.

10. These are the important functions in our code base. If you go through rest of the functions then you would find they are doing specific operations like tick() for calculating new line being drawn on drag, mousedown(), mouseup(), mousemove() for handling mouse events for adding new node, selection, drag etc and keydown() for handling keyboard shortcuts for changing arrow directions, deleting selected node etc.

11. Finally CSS, we would like to see a nice looking network graph, won’t we? In App.css, we would add these CSS classes.

12. Let’s test final output by saving all changes made so far and run yarn start if not running already. We should see a graph in action with default nodes and edges. We can add new node by mouse click, connect nodes by dragging them to target, move position of node by Ctrl + drag, change arrow direction of an edge by selecting it and pressing L or R keyboard button, delete node by pressing Del keyboard button etc.

13. You might have noticed that code is not very TypeScript friendly and lots of variables are of type any. In next iteration, I would refactor and try to use right D3 types rather but feel free to submit PR if you are faster than me :) !

14. You can find source code on my GitHub repository.


Cloud Solution Architect | Author | Full Stack Developer | |