如何在Angular 2中实现D3 [英] How to implement D3 in Angular 2

问题描述

我想实现这个代码从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（）{
 
 
 
} 
 
} 
  

解决方案

像这样：

  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'）
（...）
} 
} 
  

有关详情，请参阅此问题：

• / b>

  I want to implement this code from d3.js to angular 2 component, but i don't know how to call js file into component ts file. I have found some code for line chart, with index.html and lineChart.js. How can I call javascript in ngAfterViewInit or afterViewInit.

  Example how chart looks like http://plnkr.co/edit/Jijnm8W4sRzAAsLMTvgV?p=preview

  So I want to call this in component ts in ngAfterViewInit.

  Here is code for component:

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

  解决方案

  You could use something like that:

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

  See this question for more details:

  • Using D3.js with Angular 2

  这篇关于如何在Angular 2中实现D3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！