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

Result: the result is visible here


Here the steps to integrate the library with Angular 2.

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

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

In vendor.ts:

// 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:

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

    selector: 'd3-example',
    providers: [ConstantsService, Location],
    styles:[`.chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
    encapsulation: ViewEncapsulation

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

<h3>Example with D3</h3>
<div class="chart"></div>

Your class has to implement AfterViewInit. This method is called after that Angular initialises the component’s view and child views.

export class D3Component implements OnInit, AfterViewInit

ngAfterViewInit() {
    var data = [10, 20 ,30 ,15, 4, 26, 33];
        .style("width", function(d) { return d*10 + "px"; })
        .text(function(d) { return d; });