How to implement D3 in Angular 2

Question

I want to implement this code from d3.js to angular 2 component, but i don't know how to call js file into component ts file. I have found some code for line chart, with index.html and lineChart.js. How can I call javascript in ngAfterViewInit or afterViewInit.

Example how chart looks like http://plnkr.co/edit/Jijnm8W4sRzAAsLMTvgV?p=preview

So I want to call this in component ts in ngAfterViewInit.

Here is code for component:

import {Component, Directive, ViewChild, ElementRef, Renderer} from               'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

declare var d3: any;
declare var jQuery: any;
@Directive({

})
class H3 {}


@Component({
  selector: 'my-app',

})
export class D3 {

  constructor(public renderer: Renderer, public el: ElementRef){ }

  ngOnInit() {

  }


  ngAfterViewInit() {



  }

}

Possible duplicate of [Using D3.js with Angular 2](http://stackoverflow.com/questions/33385500/using-d3-js-with-angular-2) — Mark, May 04 '16 at 23:45

score 3 · Answer 1 · edited May 23 '17 at 11:46

3

You could use something like that:

declare var d3: any;

export class D3 {
  constructor(public renderer: Renderer, public el: ElementRef){ }

  ngOnInit() {

  }

  ngAfterViewInit() {
    var el:HTMLElement = this.el.nativeElement;
    var root = d3.select(el);

    root.append('svg')
    (...)
  }
}

See this question for more details:

Using D3.js with Angular 2

edited May 23 '17 at 11:46

Community

1
1

answered May 04 '16 at 22:29

Thierry Templier

198,364
44
396
360

Forgive me a stupid follow-up question from a Angular-newbie: Are there major changes towards Angular 6? – B--rian Aug 23 '18 at 07:02

score 2 · Answer 2 · answered Jun 15 '17 at 05:53

npm install --save d3

check d3 version in package.json and check it in node_modules too.

then, in the component.ts, import it as below

import * as d3 from 'd3';

Write your javascript codes in component.ts class

deerishi · Answer 3 · 2017-08-11T18:29:41.843

This is for d3-V4 .I ususally prefer d3-ng2-service. It's easy to install and use.

npm install d3-ng2-service --save

Add D3Service to the providers in the app.module.ts

In your .ts file import the necessary D3 libraries like

import { D3Service, D3,
  Axis,
  Path,
  ScaleLinear,
  ScaleOrdinal,
} from 'd3-ng2-service';

After that in the class constructor save the d3 instance in a class variable

constructor( private _d3Service: D3Service) {
    this.d3 = this._d3Service.getD3();
    }

Now you can freely use the d3 variable to build svg objects

ngAfterViewInit(){
       this.buildSVG();
 }

buildSVG(): void {
      let d3=this.d3;
      var svg = d3.select("body").append("svg")
3                                .attr("width", 200)
4                                .attr("height", 200);
}

score 0 · Answer 4 · answered Aug 13 '21 at 07:56

0

Please follow the following 3 steps

step 1: install D3 and the D3 type definitions from npm.

npm install d3 && npm install @types/d3 --save-dev

step 2: import d3 inside the ts file

import * as d3 from 'd3';

step 3: implement the logic

For reference

answered Aug 13 '21 at 07:56

Anand Raja

2,676
1
30
35

How to implement D3 in Angular 2

4 Answers4

Linked