angular2 – 使用D3.js与Angular 2
我已经成功地集成Angular 2(阿尔法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文档说明了以下内容:
现在的问题出现如何集成D3.js与Renderer API的?
要使用Renderer,您需要原始HTML元素(也称为nativeElement)。所以基本上你必须使用你的库,得到raw元素,并将其传递给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,'blue'); 为了展示的目的,你可以使用它与jQuery // h2[0] contains the raw element var h2 = jQuery(this.el.nativeElement).find('h2'); this.renderer.setElementStyle(h2[0],'blue'); 我的建议虽然是坚持使用angular2提供你这样做很容易,而不依赖于另一个库。 有了纯angular2,你有两个简单的方法 >使用指令 // 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,'blue'); } } 这是一个plnkr与我在这个答案中提到的所有情况。你的要求可能不同,当然,但尝试使用angular2,只要你可以。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |