在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时，
将使用此接口作为最后手段。使用Angular提供的模板和数据绑定。或者，您可以查看{@link Renderer}，它提供了即使在不支持直接访问原生元素时也可以安全使用的API。依赖直接DOM访问在应用程序和渲染层之间创建了紧密耦合，这使得将两者分离并将应用程序部署到web worker中是不可能的。
现在出现了一个问题，如何将D3.js与渲染器API集成？
回答 4
Stack Overflow用户
发布于 2016-01-20 03:03:15
要使用渲染器，您需要原始的HTML元素(也称为nativeElement)。所以基本上你必须使用你的库，获取原始元素并将其传递给Renderer。
例如
// 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');不过，我的建议是坚持使用angular2提供的东西来轻松完成这项工作，而不依赖于其他库。
使用纯angular2有两种简单的方法
- Using directives
// 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与本地变量一起使用
@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');
}
}这是我在这个答案中提到的所有案例的plnkr。当然，您的需求可能有所不同，但请尽可能尝试使用angular2。
Stack Overflow用户
发布于 2016-12-02 00:17:30
试试这个：
用于设置所需版本的npm install d3@3.5.36 --save
如果需要d3 4+，请使用npm install @types/d3@3.5.36 --save或更高版本
然后在你的ts中
import * as d3 from 'd3';
应该可以很好地工作
Stack Overflow用户
发布于 2017-04-26 01:10:22
npm install --save d3在package.json中检查d3版本，在node_modules中也检查它。
然后，在component.ts中导入它，如下所示
import * as d3 from 'd3';https://stackoverflow.com/questions/33385500
复制相似问题