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

Answer 2

npm install --save d3

检查package.json中的d3版本，并在node_modules中检查它。

然后，在component.ts中，将其导入如下

import * as d3 from 'd3';

在component.ts类中编写您的javascript代码

Answer 3

这是针对d3-V4。我通常更喜欢d3-ng2-service。它易于安装和使用。

npm install d3-ng2-service --save

将D3Service添加到app.module.ts

中的提供者

在.ts文件中导入必要的D3库，如

＆＃13;

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

＆＃13;

之后在类构造函数中将d3实例保存在类变量

中

＆＃13;

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

＆＃13;

现在您可以自由使用d3变量来构建svg对象

＆＃13;

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

＆＃13;

如何在Angular 2

3 个答案: