Building D3 Force Graph Editor + Angular 7
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
- Create a new Angular project using command
ng new <project-name>
- Install d3 library using command
npm install d3 --save
(Make sure you are using double hyphen) - 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:
::ng-deep
is required for applying css classes on graph nodes/edges- 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 retainthis
object being current component instance so that we can access member function(s) and variable(s). Otherwisethis
…