d3.js - 如何在 Angular 2 中实现 D3

Question

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

图表示例 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')
    (...)
  }
}

有关详细信息，请参阅此问题:

• Using D3.js with Angular 2