Angular and D3.js – tutorial

Goal: use the D3.js library in an Angular project.

Here the steps to integrate the library with Angular.

In the package.json we have to declare the dependencies with d3:

``` javascript "@types/d3": "^4.4.1", "@types/d3-scale": "^1.0.6", "d3": "^4.5.0", "d3-scale": "^1.0.4",

In `vendor.ts`:
``` javascript
    // d3.js
    import 'd3/build/d3.min';
    import 'd3-scale/build/d3-scale.min';

In the component that will generate the view you have to import the d3 types:

``` javascript import as d3 from "d3"; import as d3scale from "d3-scale";

In the component we declare the style used and we reference the external xml

``` typescript
    @Component({
        selector: 'd3-example',
        templateUrl:'../html/d3.html',
        providers: [ConstantsService, Location],
        styles:[`.chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
        }`],
        encapsulation: ViewEncapsulation
            .None
        })

The external html simply declare the object that will be modified by the library (chart):

``` typescript

Example with D3

Your class has to implement [AfterViewInit](https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html). This method is called after that Angular initialises the component's view and child views.

`export class D3Component implements OnInit, AfterViewInit`

``` typescript
    ngAfterViewInit() {
        var data = [10, 20 ,30 ,15, 4, 26, 33];
        d3.select(".chart")
            .selectAll("div")
            .data(data)
            .enter().append("div")
            .style("width", function(d) { return d*10 + "px"; })
            .text(function(d) { return d; });
    }