In this story, I will explain about interactive graph editor using D3 force and Angular 7.
- 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;
ngAfterContentInit() 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-deepis 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 retain
thisobject being current component instance so that we can access member function(s) and variable(s). Otherwise
thiswill refer to current HTML element selected via d3 projection.
- Add/Edit/Delete node and edge
- Change edge direction (Keyboard → L=Left, R=Right)
- Changing reflexing direction
This code needs refactoring. So feel free to contribute.
Contribute to ultrasonicsoft/ng-d3-graph-editor development by creating an account on GitHub.