与Angular 2一起使用D3.js
我已经成功地集成了Angular 2（Alpha 44）和D3.js：
<html> <head> <title>Angular 2 QuickStart</title> <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <script> System.config({packages: {'app': {defaultExtension: 'js'}}}); System.import('app/app'); </script> </head> <body> <my-app>Loading...</my-app> </body> </html> app.js：
/// <reference path="./../../typings/tsd.d.ts" /> import {Component, bootstrap, ElementRef} from 'angular2/angular2'; @Component({ selector: 'my-app', template: '<h1>D3.js Integrated if background is yellow</h1>', providers: [ElementRef] }) class AppComponent { elementRef: ElementRef; constructor(elementRef: ElementRef) { this.elementRef = elementRef; } afterViewInit(){ console.log("afterViewInit() called"); d3.select(this.elementRef.nativeElement).select("h1").style("background-color", "yellow"); } } bootstrap(AppComponent);
一切工作正常。 但是ElementRef的Angular 2文档声明如下：
当需要直接访问DOM时，使用此API作为最后的手段。 使用Angular提供的模板和数据绑定。 或者，您可以看看{@link Renderer}，它提供了即使在不支持直接访问本地元素时也可以安全使用的API。 依赖于直接的DOM访问会在你的应用程序和渲染层之间build立紧密的耦合，这将使得将这两者分开并将你的应用程序部署到web worker是不可能的。
现在的问题是如何将D3.js与Renderer API集成？
要使用渲染器，您需要原始HTML元素（又名nativeElement）。 所以基本上你必须使用任何你的库，获取原始元素，并将其传递给渲染器。
例如
// h3[0][0] contains the raw element var h3 = d3.select(this.el.nativeElement).select('h3'); this.renderer.setElementStyle(h3[0][0], 'background-color', 'blue');
有关ElementRef的警告是关于直接使用它。 这意味着这是不鼓励的
elementRef.nativeElement.style.backgroundColor = 'blue';
但是这很好
renderer.setElementStyle(elementRef.nativeElement, 'background-color', 'blue');
为了显示的目的，你可以使用它和jQuery
// h2[0] contains the raw element var h2 = jQuery(this.el.nativeElement).find('h2'); this.renderer.setElementStyle(h2[0], 'background-color', 'blue');
我的build议是坚持使用angular2提供的function，而不依赖于其他库。
以纯粹的angular度2，你有两个简单的方法
- 使用指令
// This directive would style all the H3 elements inside MyComp @Directive({ selector : 'h3', host : { '[style.background-color]' : "'blue'" } }) class H3 {} @Component({ selector : 'my-comp', template : '<h3>some text</h3>', directives : [H3] }) class MyComp {}
- 使用ViewChild和局部variables
@Component({ selector : 'my-comp', template : '<h3 #myH3>some text</h3>', }) class MyComp { @ViewChild('myH3') myH3; ngAfterViewInit() { this.renderer.setElementStyle(this.myH3.nativeElement, 'background-color', 'blue'); } }
在这个答案中，我提到了所有的情况。 当然，您的要求可能有所不同，但是尽可能使用angular2。
尝试这个：
npm install d3@3.5.36 --save 设置你需要的版本
npm install @types/d3@3.5.36 --save 或更高版本，如果你想要d3 4+
然后在你的ts做
import * as d3 from 'd3';
应该工作得很好
我在使用ElementRef时遇到了麻烦，我不确定该API是否已经更改。 所以我最终使用ViewContainRef来获取nativeElement。
import {Component, ViewContainerRef, OnInit} from '@angular/core'; declare var d3:any; @Component({ selector: 'line-chart', directives: [], template: `<div class="sh-chart">chart</div>` }) export class LineChart implements OnInit{ elem ; constructor(private viewContainerRef:ViewContainerRef) {} ngOnInit(){ this.elem = this.viewContainerRef.element.nativeElement; d3.select(this.elem).select("div").style("background-color", "yellow"); }; }
npm install --save d3
请检查package.json中的d3版本，并在node_modules中检查它。
然后在component.ts中input如下
import * as d3 from 'd3';
