在 Angular 2 中使用 D3.js [英] Using D3.js with Angular 2
问题描述
我已成功将 Angular 2 (Alpha 44) 与 D3.js 集成:
I have successfully integrated Angular 2 (Alpha 44) with 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 文档声明如下:
Everything is working fine. But Angular 2 documentation for ElementRef states the following:
当需要直接访问 DOM 时，将此 API 用作最后的手段.改用 Angular 提供的模板和数据绑定.或者，您可以查看 {@link Renderer}，它提供了即使在不支持直接访问本机元素时也可以安全使用的 API.依赖直接 DOM 访问会在您的应用程序和渲染层之间造成紧密耦合，这将导致无法将两者分开并将您的应用程序部署到 Web Worker 中.
Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you take a look at {@link Renderer} which provides API that can safely be used even when direct access to native elements is not supported. Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.
现在的问题是如何将 D3.js 与 Renderer API 集成?
Now the question arises how to integrate D3.js with the Renderer API's?
推荐答案
要使用 Renderer，您需要原始 HTML 元素(又名 nativeElement).所以基本上你必须使用你的库，获取原始元素并将其传递给渲染器.
To use Renderer, you need the raw HTML element (aka nativeElement). So basically you have to use whatever your library is, get the raw element and pass it to 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 的警告是关于直接使用它.这意味着不鼓励这样做
The warning about ElementRef is about using it directly. That means that this is discouraged
elementRef.nativeElement.style.backgroundColor = 'blue';
不过没关系
renderer.setElementStyle(elementRef.nativeElement, 'background-color', 'blue');
出于展示目的，您也可以将其与 jQuery 一起使用
For showing purposes you can use it as well with jQuery
// h2[0] contains the raw element
var h2 = jQuery(this.el.nativeElement).find('h2');
this.renderer.setElementStyle(h2[0], 'background-color', 'blue');
不过，我的建议是坚持使用 angular2 为您提供的功能，无需依赖其他库即可轻松完成此操作.
My recommendation though is to stick to use what angular2 provides you to do this easily without depending on another libraries.
使用纯 angular2，您有两种简单的方法
With pure angular2 you have two easy ways
- 使用指令
// 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.
Here's a plnkr with all the cases I mentioned in this answer. Your requirements may differ, of course, but try to use angular2 whenever you can.
这篇关于在 Angular 2 中使用 D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
