Integrating D3.js(V4) and Angular (7.0)
By: Imry Levy Sadan
Tags: SVG, Hierarchy, D3js, Angular 7

In this article, I will try to explain how to use the d3.js library with Angular 7.

Prolog:

D3.js is a powerful library created by Mike Bostock. In short. “D3”, as it will called in this article, has the power to visualized complex data in a variety ways (graphs, charts, tress etc.).

No need to say that in a data-oriented world, it has a great importance.

There are many code examples for D3 projects and layouts. However, as you can learn from the full name of this wonderful library (D3.js), it was written in Java Script.

For you, Angular developer which work with Type Script, that means that there is need for conversation process. This process, as I discovered myself while tried to use D3 with Angular, is not as easy as one could think.

Beginning Remarks:

1. Even if you write in Java script, D3 is not an easy library to use. It has many capabilities, yes, but also a very complex functionality, based on Physical laws (I even consulted a Harvard’s professor when I tried to use it).

2. Using D3 require familiarity with using SVG elements (if you don’t know it, as I didn’t, read about it. It is important).

3. Check the version: many D3 code snippets examples written with version 3. This article based on version 4. There is a big different between them.

Last prolog remark:

Angular is a powerful framework, which uses the concept of OOP and strong typing languages for the UI/UX world. It built on classes, modules, services routers and other structure-organized-features, which makes it a great framework for OCD-minds like me. More important, and in this article context: it separate the views from the data, and work with it one component’s life cycles concept.

Let us take a short break: If you don’t understand any of this terms and principles — read about them. You will need them later. I didn’t know any of that two months ago.

What are we doing with this article?

This article is based on this demo project (and it’s source code). It contains 5 examples of D3 graphs that was written with Angular.

Those examples are divided into two D3-layouts-format: Force Directed Graphs and Hierarchical trees (Those two layouts are just examples. D3 has many more).

My project was not created by me. All I did was to integrate others JavaScript-written projects with Angular. In order to understand the transformation from Java Script to TypeScript, you will need to compare my project to the source code. You will be able to find the relevant url at the first line of each different examples component file.

Pay attention:

When you use D3, it is important to understand which visualization-concept you are using. Different layouts (such as Tree VS Force Directed Graph) => Different methods and Types.

For example:

When I wrote the Force Directed Graphs layout, I used a Different type for the D3 variable, than the Tree layout.

In Force Directed Graphs — d3: d3.Simulation<any, any>;

In Tree layout — d3: d3.TreeLayout<any>;

What is this “d3” variable?

This is your best friend. “d3” variable is the one that connect the dots. It has the ability to operate on your data and to implement the created layout on a specific chosen SVG element.

Data:

Another important thing you should consider is the data structure.

In me project, for example, there are two types of data.

Tree layouts works on hierarchical data. Meaning: the data has one starting point (usually called: Root Node), and beneath it, layers of data (you can just think on a tree family started with on one ancestor, as the best example).

Force Directed Graph work with “flat data”. Usually that means two Arrays: one contains the nodes (the data unit that you want to visualize), and links/edges that connect them.

Where in Tree Layout d3 creates the visualization based on the hierarchy parent-child object, in Force Directed Graph it base the layout on the links, which indicate the node position and inner connection.

In my project, I based on flat two-arrays data structure, which is fit by default to Force-Directed-Graph layout. In order to creat the Tree layout based on the same data, I created two functions that convert create hierarchical data. My goal was to simulate app that can create two layout option without having the server to send to data types.

Note: my project does not get his data from serve. Instead, it uses mocked data.

Last one:

Our main challenge is to convert two different languages. As I mentioned before, most D3 examples written in Java Script. Angular + Type Script has different structure and rules. Mainly, we should consider three things: Life cycle, scopes and the Data-View model.

My Angular interpretation to the Java Script source codes that I worked on was not perfect. I didn’t use the full power of Angular, and chose somewhat “Java Scripty” approach.

As you will be able to see, there is no separation between the layout calculation, which is done by the d3 function system, and the styling, which is done with the combination between d3 and the SVG elements. This not a good practice for Angular. My main goal was to simply “do it”, as in swallow the original code and implement it Angular.

If you are trying to do it yourself, you might want to create separation between those two layers (calculation and styling).Here is more “Angulary” Example, which I have learned a lot from. If you want to learn D3&&Angular thoroughly, I would suggest to begin with my project, and then move to this example.