Verwenden von D3.js mit Angular 2

Question 1

Ich habe Angular 2 (Alpha 44) erfolgreich in D3.js integriert:

<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);

Alles funktioniert gut. Die Angular 2-Dokumentation für ElementRef enthält jedoch Folgendes:

Verwenden Sie diese API als letzten Ausweg, wenn ein direkter Zugriff auf DOM erforderlich ist. Verwenden Sie stattdessen die von Angular bereitgestellten Vorlagen und Datenbindungen. Alternativ können Sie sich {@link Renderer} ansehen, das eine API bereitstellt, die auch dann sicher verwendet werden kann, wenn der direkte Zugriff auf native Elemente nicht unterstützt wird. Wenn Sie sich auf den direkten DOM-Zugriff verlassen, wird eine enge Kopplung zwischen Ihrer Anwendung und den Rendering-Ebenen hergestellt, die es unmöglich macht, die beiden zu trennen und Ihre Anwendung in einem Web-Worker bereitzustellen.

Nun stellt sich die Frage, wie D3.js in die Renderer-APIs integriert werden können.

Question 2

Um Renderer verwenden zu können, benötigen Sie das rohe HTML-Element (auch bekannt als nativeElement). Grundsätzlich müssen Sie also Ihre Bibliothek verwenden, das Rohelement abrufen und an Renderer übergeben.

Zum Beispiel

// 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');

In der Warnung zu ElementRef geht es darum, es direkt zu verwenden. Das bedeutet, dass davon abgeraten wird

elementRef.nativeElement.style.backgroundColor = 'blue';

Aber das ist in Ordnung

renderer.setElementStyle(elementRef.nativeElement, 'background-color', 'blue');

Zum Anzeigen können Sie es auch mit jQuery verwenden

// h2[0] contains the raw element
var h2 = jQuery(this.el.nativeElement).find('h2');
this.renderer.setElementStyle(h2[0], 'background-color', 'blue');

Meine Empfehlung ist jedoch, das zu verwenden, was Angular2 Ihnen bietet, um dies einfach zu tun, ohne von anderen Bibliotheken abhängig zu sein.

Mit pure angle2 haben Sie zwei einfache Möglichkeiten

Direktiven verwenden

// 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 {}

Verwenden von ViewChild mit lokalen Variablen

@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');
    }
}

Hier ist ein Plnkr mit allen Fällen, die ich in dieser Antwort erwähnt habe. Ihre Anforderungen können natürlich abweichen, aber versuchen Sie, angular2 zu verwenden, wann immer Sie können.

Question 3

Versuche dies:

npm install d3@3.5.36 --save um die benötigte Version einzustellen

npm install @types/d3@3.5.36 --save oder eine höhere Version, wenn Sie d3 4+ wollen

und dann in deinem tsdo

import * as d3 from 'd3';

Sollte gut funktionieren

Question 4

npm install --save d3

Überprüfen Sie die d3-Version in package.json und auch in node_modules.

Importieren Sie es dann in der Datei component.ts wie folgt

import * as d3 from 'd3';

Question 5

Ich hatte Probleme mit ElementRef. Ich bin mir nicht sicher, ob sich diese API geändert hat. Also habe ich ViewContainRef verwendet, um das nativeElement zu erhalten.

import {Component, ViewContainerRef, OnInit} from '@angular/core';
declare var d3:any;
@Component({
    selector: 'line-chart',
    directives: [],
    template: `<div class="sh-chart">chart</div>`
})
export class LineChart implements OnInit{
    elem ;
    constructor(private viewContainerRef:ViewContainerRef) {}
    ngOnInit(){
        this.elem = this.viewContainerRef.element.nativeElement;

        d3.select(this.elem).select("div").style("background-color", "yellow");
    };
}