Wie implementieren D3 im Winkel 2

Ich umsetzen will, diesen code aus d3.js zu eckig 2-Komponente, aber ich weiß nicht, wie zu nennen js-Datei in die Komponente ts-Datei. Ich habe einige code für Linie Diagramm, mit index.html und lineChart.js. Wie kann ich javascript aufrufen in ngAfterViewInit oder afterViewInit.

Beispiel dafür, wie das Diagramm sieht aus wie http://plnkr.co/edit/Jijnm8W4sRzAAsLMTvgV?p=preview

So, ich möchte diesen Aufruf in Komponente ts in ngAfterViewInit.

Hier ist der code für Komponente:

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'
Mögliche Duplikate von Mit D3.js mit dem Winkel 2

InformationsquelleAutor Sasa Geric | 2016-05-04

  1. 3

    Könnten Sie so etwas wie, dass:

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

    Sehen, diese Frage für mehr details:

    Verzeih mir eine blöde follow-up-Frage eine Winkel-Neuling: gibt es große änderungen in Richtung Winkel 6?

    InformationsquelleAutor Thierry Templier

  2. 2
    npm install --save d3

    check d3-version im Paket.json und überprüfen Sie es in node_modules zu.

    dann, in der Komponente.ts, importieren Sie es wie unten

    import * as d3 from 'd3';

    Schreiben Sie Ihre javascript-codes in der Komponente.ts-Klasse

    InformationsquelleAutor

Schreibe einen Kommentar