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() {



  }

}

import * as d3 from 'd3'

drew moore
– drew moore

2016-05-04 22:24:45 +00:00
Commented May 4, 2016 at 22:24 — drew moore
– drew moore, Commented May 4, 2016 at 22:24
Possible duplicate of Using D3.js with Angular 2

Mark
– Mark

2016-05-04 23:45:08 +00:00
Commented May 4, 2016 at 23:45 — Mark
– Mark, Commented May 4, 2016 at 23:45

Community · Accepted Answer · 2017-05-23 11:46:43Z

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, 2017 at 11:46

CommunityBot

11 silver badge

answered May 4, 2016 at 22:29

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

B--rian Over a year ago

Forgive me a stupid follow-up question from a Angular-newbie: Are there major changes towards Angular 6?

user7803780 · Accepted Answer · 2017-06-15 05:53:47Z

2

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

answered Jun 15, 2017 at 5:53

user7803780

Comments

deerishi · Accepted Answer · 2017-08-11 18:29:41Z

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);
}

Anand Raja · Accepted Answer · 2021-08-13 07:56:38Z

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, 2021 at 7:56

Anand Raja

3,2161 gold badge39 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to implement D3 in Angular 2

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related