Building D3 Force Graph Editor + Angular 7

In this story, I will explain about interactive graph editor using D3 force and Angular 7.

Credits: This is based on JavaScript project.

Getting started

  1. Create a new Angular project using command
  2. Install d3 library using command (Make sure you are using double hyphen)
  3. Install d3 library types using command

4. Import d3 in component using inside or your target component;

5. Use event for initialising d3 graph and its events.

I will refrain myself from explain code as it is self explanatory if you have worked with D3.js and Angular.

Important points to note:

  1. is required for applying css classes on graph nodes/edges
  2. d3.js event handler — if you have noticed we are using lambda functions for handling d3.js event (e.g. ). This is to retain object being current component instance so that we can access member function(s) and variable(s). Otherwise will refer to current HTML element selected via d3 projection.


  1. Add/Edit/Delete node and edge
  2. Change edge direction (Keyboard → L=Left, R=Right)
  3. Changing reflexing direction

et cetera.

This code needs refactoring. So feel free to contribute.

Source code.



Cloud Solution Architect | Author | Full Stack Developer | |

Cloud Solution Architect | Author | Full Stack Developer | |