Как реализовать D3 в Angular 2

Question

Я хочу реализовать этот код от d3.js до углового компонента 2, но я не знаю, как вызвать js-файл в компонентный файл ts. Я нашел код для линейной диаграммы, с index.html и lineChart.js. Как я могу вызвать javascript в ngAfterViewInit или afterViewInit.

Пример как диаграмма выглядит http://plnkr.co/edit/Jijnm8W4sRzAAsLMTvgV?p=preview

Так что я хочу назвать это компонент ц в ngAfterViewInit.

Вот код компонента:

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



    } 

} 

Answer 1

Вы могли бы использовать что-то вроде этого:

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') 
    (...) 
    } 
} 

Смотрите этот вопрос для более подробной информации:

• Using D3.js with Angular 2

Answer 2

npm install --save d3 

проверить версию d3 в пакете.json и проверить его в node_modules тоже.

тогда, в component.ts, импортировать его, как показано ниже

import * as d3 from 'd3'; 

Пишите свои JavaScript-коды в component.ts классе

Answer 3

Это для d3-V4 .I Ususally предпочитают d3-ng2-service. Его легко установить и использовать.

npm install d3-ng2-service --save 

Добавить D3Service поставщиков в app.module.ts

В вашем .ts импорт файлов необходимых библиотеки D3 как

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

После этого в конструктор класса сохраняет экземпляр d3 в переменной класса

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

Теперь вы можете свободно использовать переменную d3 для создания объектов SVG

ngAfterViewInit(){ 
 
     this.buildSVG(); 
 
} 
 

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