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.

Directed Graph Editor

Getting started

1. Create a new Angular project using command ng new <project-name>
2. Install d3 library using command npm install d3 --save (Make sure you are using double hyphen)
3. Install d3 library types using command npm install @types/d3 --save

4. Import d3 in component using import * as d3 from 'd3' inside app.component.ts or your target component;

5. UsengAfterContentInit() 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. ::ng-deep 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. .on('tick', () => this.tick() ). This is to retain this object being current component instance so that we can access member function(s) and variable(s). Otherwise this will refer to current HTML element selected via d3 projection.

Features:

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.

ultrasonicsoft/ng-d3-graph-editor

Demo:

NgD3GraphEditor

Cheers!!