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 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.

Demo:

Cheers!!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store