Inheritance in Angular with D3js
Reducing boilerplate for creating charts
In this article, I’ll explain a way to reduce code in an Angular Application with visual d3 components.
- Basic use of inheritance
- Extending components from a base class
- Others utilities
I wrote this article based on my experience from years working with Angular. Feel free to correct me in the case there is something wrong.
After writing some code and once you have learnt the good way of doing it and so on, writing and writing the same again and again starts to be very boring, isn’t it?.
As I said in my first post on Medium,
Angular + D3js — A better pattern for adjusting charts via CSS
Hi everyone, I start a post in Medium explaining a good pattern to initialise visual components with D3 in Angular.
the creation of charts in Angular can be very redundant and different any time. So
What we are going to do is just to create a base class component to reduce the amount of code we have to write every time for visual component in D3.
Okay, so the concept behind is inheritance. Really used in Java, but not that much in Angular, at least in components.
Very easy to explain
Okay, I just apply the concept but for angular visual components with d3js. Imagine in a real app with ten or even more visual d3 components in angular like a line char, a bar chart, a serie, etc. We will reduce far enough time & effort in doing repetitive tasks.
For this article I used the same repo as in the previous one but in another branch “part2/inheritance”
This project was generated with Angular CLI version 9.0.4. Run ng serve for a dev server. Navigate to…
So just clone it, install its dependencies…and have look at it
$ git clone email@example.com:ackuser/ng-d3-css-example.git
$ npm i
$ git checkout part2/inheritance
I added to the project a simple Bar Chart based on this
Anyway, thanks to him
Figure out what properties we have in our base class for doing an abstraction of each visual component, the most important are
svg, width and height: the frame where we will do our piece of magic with d3 and its sizes as well
g: The g SVG element is a container used to group other SVG elements
margin: we put some margin to make it clear
contentWidth, contentHeight: the real size of our draws in d3
Our code is
Magically, initialising the chart through the function “initChart” will set all our properties.
Then, for our charts we just extends from the base class and call it with super in the constructor with the super method, of course. After that, in the ngOninit cycle of Angular we call initChart ( don’t do that in the father/base class, otherwise ngOninit will be called twice). Finally, the only needed is to add the code you write for drawing your piece of d3 in the createChart method.
And that’s it!!! Really??? Yeaaa, look at how clever
$ npm start
I create a couple of address
Then, go to your browser and you’ll see the charts
This article included all the information that you need when working with a lot of d3 visual components in Angular Applications, including:
- Basic properties in almost all charts.
- A base class for reducing boilerplate.
- How to initialise chart with it.
To achieve other tasks based on inheritance in Angular, you can go more deeply having a look at this article on alligator https://alligator.io/angular/component-inheritance/
Thanks for reading and I hope you found this article useful! You can follow me on Medium. Feel free to leave me your thoughts in the comments below. I’ll be glad to help out!