Building D3 Force Graph Editor + Angular 7

Balram Chavan
1 min readDec 17, 2018

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

--

--

Balram Chavan
Balram Chavan

Written by Balram Chavan

Google Developer Expert Angular | Architect | Author | http://www.youtube.com/@angularcloud

Responses (1)