如何在Angular 2中实现D3

Question

我想从d3.js到angular 2组件实现这个代码,但我不知道如何将js文件调用到组件ts文件中.我找到了一些折线图代码,包括index.html和lineChart.js.如何在ngAfterViewInit或中调用javascript afterViewInit.

图表如何显示http://plnkr.co/edit/Jijnm8W4sRzAAsLMTvgV?p=preview

所以我想在ngAfterViewInit中的组件ts中调用它.

这是组件的代码:

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

请参阅此问题了解更多详细信息：

• 将 D3.js 与 Angular 2 结合使用