如何D3.js与渲染整合API与角2 [英] how to integrate D3.js with the Renderer API's 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 规定如下：
是需要DOM直接访问时，使用此API作为最后的手段。使用模板和数据绑定通过角提供替代。另外，您看看渲染提供即使在不支持原生元素直接访问，可以安全使用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
Rendererwhich 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?
推荐答案
您也可以使用 @ViewChild（）（<一个href=\"http://stackoverflow.com/questions/34580539/angular-2-how-control-video-from-component/34580569#34580569\">Angular 2：如何控制＆lt;视频＆GT;从零部件）
它不会带来多大的改变，因为这仍然是直接访问DOM将prevent服务器渲染和网络工作人员正在运行。但是像D3库周围有反正没办法。
You can also use @ViewChild() (Angular 2: how control <video> from component)
It won't make much difference because this still is direct DOM access which will prevent server rendering and running in web-workers. But with libraries like d3 there is no way around anyway.
这篇关于如何D3.js与渲染整合API与角2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
