Keath Milligan

On software development, quality, security and broken racecars

Create reusable chart components with Angular 2 and D3.js version 4

angular2-d3v4

Integrate D3.js (version 4) with the Angular 2 component life cycle to create reusable charts and other visualizations that support animation and dynamic data.

Updated January 5, 2017: since this post was originally written, the official D3 typings bundle was updated for D3.js 4.x. This makes life much easier and I’ve updated this post to reflect the changes.

In this example, we’ll integrate D3 version 4 with an Angular 2 app created using angular-cli to create a reusable bar-chart component.

This complete source code for this example is available on github.

Create App Scaffolding

The core of the example is a generic CLI-generated app with a home page and default route (see app/home and app/app.routes.ts). I’ll assume you are familiar with basic component creation with angular-cli and routing at this point.

Install D3 and Necessary Typings

Install d3 with:

This will install the latest version (4.4.0 at the time of this writing).

Next install the d3 typings bundle with:

Create the Chart Component

Create a shared bar chart component:

Edit the template (barchart.component.html):

The #chart id will be used to get a reference to the native element.

The components size, colors and other attributes can be controlled with CSS. The default component styles are defined barchart.component.css:

The containing component that uses this chart can override these styles.

Now have a look at the barchart.component.ts typescript source. The goal for this component is to display a chart based on data provided externally and then re-render the chart if that data changes. To accomplish this, declare an @Input data value:

and then implement the OnChanges interface:

In this case, the data is assumed to be a simple two-dimensional array of numbers.

Some other things to note:

  • View encapsulation is set to “none” – this makes styling the chart component easier, but you need to be careful with class names to avoid collisions with other component styles.
  • @ViewChild is used to get an element reference to the div container defined in the HTML. D3 manipulates the DOM directly.

The remainder of the implementation is d3-specific. Using this integration approach, you can implement a wide variety d3-based visualizations in your Angular 2 app. The d3 documentation has many examples and tutorials.

 

 

12 Comments

  1. Thanks, this post helped me to get Angular and D3 up and running 😉
  2. Rodrigo Silveira

    December 13, 2016 at 2:41 am

    Hi – Thanks for the posting. I implemented this sample code using the instructions to install d3 found in the angular-cli page / 3rd party installation and was able to run it without have to update the typings.d.ts file.

    Alson, please note that the d3 typings availability, https://github.com/tomwanzek/d3-v4-definitelytyped, was announced around the same time this article was published.

  3. There is a dedicated library for that – https://github.com/tomwanzek/d3-ng2-service.
    It seems, that utilising that library helps to overcome major pitfalls.
  4. Thanks For This Example .

    Can you Please let me know for any Sub Chart Example using D3.js and Angular 2

  5. Excellent articles, well written. Thank you.
  6. Thanks for this article, really helped.

    I ran into an error following your steps, @typings/d3 didn’t exist. The following line worked : npm install –save-dev @types/d3.

  7. Thanks a lot, very clear starter on D3 in Angular, everything works like a charm!
  8. This is the tutorial I’ve been searching for! Succinct, clear, and link to github ng2 project. Thanks Keath.
  9. Thanks! A helpful and simple set-up guide.
  10. thank you i really appreciate it.
    most of angular tutorials are fucking over complicated.
    this is very abstract.
    React > Angular

Leave a Reply

Your email address will not be published.

*

© 2017 Keath Milligan

Theme by Anders NorenUp ↑