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>

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

Features:

  1. Add/Edit/Delete node and edge

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

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