与角2使用D3.js [英] Using D3.js with Angular 2
问题描述
我已经成功地角2（阿尔法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：
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);
一切工作正常。但是，角2文档ElementRef规定如下：
Everything is working fine. But Angular 2 documentation for ElementRef states the following:
是需要DOM直接访问时，使用此API作为最后的手段。使用模板和数据绑定通过角提供替代。另外，您看看{@link渲染}提供即使在不支持原生元素直接访问，可以安全使用API。依托直接访问DOM创建应用程序和渲染层之间的紧耦合，这将使它不可能将二者分开和部署应用程序到一个网络工作者。
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集成渲染API的？
Now the question arises how to integrate D3.js with the Renderer API's?
推荐答案
要使用渲染器，你需要原始的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';
但是，这是好的。
But this is fine
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.
这篇关于与角2使用D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
