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文档说明了以下内容：

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的？

要使用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，只要你可以。

angular2 – 使用D3.js与Angular 2

猜你在找的Angularjs相关文章