J'ai intégré avec succès Angular 2 (Alpha 44) avec 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);Tout fonctionne bien. Mais la documentation d'Angular 2 pour ElementRef indique ce qui suit :
Utilisez cette API en dernier recours lorsqu'un accès direct au DOM est nécessaire. Utilisez plutôt le templating et le data-binding fournis par Angular. Vous pouvez également jeter un coup d'œil à {@link Renderer} qui fournit une API pouvant être utilisée en toute sécurité même lorsque l'accès direct aux éléments natifs n'est pas pris en charge. S'appuyer sur l'accès direct au DOM crée un couplage étroit entre votre application et les couches de rendu, ce qui rendra impossible la séparation des deux et le déploiement de votre application dans un web worker.
Maintenant, la question se pose de savoir comment intégrer D3.js avec les API de rendu ?
