2016-07-25 22 views
7

Ich habe versucht, D3 mit meiner Angular2 App zum Laufen zu bringen.
Allerdings scheint es derzeit ein Problem mit dem neuen D3v4 und der zur Verfügung stehenden Typisierungen Datei zu sein, also versuchen, neue Methoden wie scaleLinear() anstelle der nicht mehr verfügbar scale.linear() führen zu einem Fehler
Property 'scaleLinear' does not exist on type 'typeof d3'.
 Angular2/Typescript + D3v4 - manuell Typisierung?

wird zu verwenden,

Da Tomwanzek bereits auf dem Problem zu sein scheint und versucht, die neuen Definitionen über https://github.com/tomwanzek/d3-v4-definitelytyped zu erstellen, habe ich mich gefragt, ob es eine Möglichkeit gibt, die bereits verfügbaren Typings-Dateien in meinem angular2-Projekt manuell einzubinden?

+0

Ich habe im Moment keinen Weg gefunden, also habe ich gerade das d3v4-Objekt mit dem Typ Any definiert und bin auf meinem fröhlichen Weg gegangen. Bringt die Typen an Bord wenn sie fertig sind. Aber wenn es einen Weg gibt, würde ich es auch gerne wissen. –

+0

Wie genau hast du das gemacht? Ich habe derzeit 'importieren * als D3 von 'd3';' aber 'importieren * als D3: any von 'd3';' funktioniert nicht ... – TommyF

+0

Ich lade d3 in die Seite in einem eigenen Skript-Element, dann greifen es in meinem Controller mit einem erweiterten angular.IWindowService, die nur eine "d3: any" -Eigenschaft hinzugefügt. –

Antwort

2

Ich weiß nicht, über drewmoore Vorschlag von @ Typen/d3v4, aber @ Typen/d3-MODULE Werke, obwohl dies Typoskript erfordert 2.0 wie erwähnt.

Installieren Sie das @types Paket für jedes d3 Modul, das Sie verwenden, zB Achse wäre:

npm install --save-dev @types/d3-axis 

Ich denke, diese kommen aus: https://github.com/tomwanzek/d3-v4-definitelytyped Überprüfen Sie den Status/Verfügbarkeit jedes D3-Modul: Issue 56

Offenbar npm @types wird Typisierungen und tsd in Zukunft ersetzen: The Future of Declaration Files

1

ich bin nicht sicher über drewmoore des suggestiong eit ihr. Es schien nicht für mich zu funktionieren.

Ich habe zwei Vorschläge für die Fortsetzung.

Beste Antwort

Die erste ist eine Ergänzung zu Arlo Antwort. Als ich diesen Kommentar ursprünglich schrieb, konnte ich Arlos Antwort nicht zur Arbeit bringen. Jetzt habe ich verstanden warum. Ich habe versucht, das d3-Hierarchie-Paket zu verwenden. So installieren:

npm install d3 --save 
npm install @types/d3 --save-dev 
npm install @types/d3-hierarchy --save-dev 

und dann unter Verwendung der Module auf diese Weise:

import * as d3 from "d3"; 

d3.hierarchy(blah); 

Und dann würde es beklagen, dass sie nicht über das d3.hierarchy Mitglied kannte. Jetzt verstehe ich, dass ich dieses Objekt verwenden muss (ich weiß nicht, warum es vorher nicht registriert wurde). So aktualisiert:

import * as d3 from "d3"; 
import * as d3Hierarchy from "d3-hierarchy"; 

d3Hierarchy.hierarchy(blah); 

Original-Antwort

Was die einzige Antwort zu sein scheint, die ich gefunden habe, so weit ist mit dem d3-ng2-service Modul unter dem Link befindet. Es ist kein großartiger Schalter, aber Sie können d3v4 in Ihrem eckigen 2 Projekt verwenden.

import { Component, OnInit, ElementRef } from '@angular/core'; 
import { D3Service, D3, Selection } from 'd3-ng2-service'; // <-- import the D3 Service, the type alias for the d3 variable and the Selection interface 

@Component({ 
    selector: 'app-test-d3', 
    templateUrl: 'test-d3.component.html', 
    styleUrls: ['test-d33.component.css'] 
}) 
export class TestD3Component implements OnInit { 

    private d3: D3; // <-- Define the private member which will hold the d3 reference 
    private parentNativeElement: any; 

    constructor(element: ElementRef, d3Service: D3Service) { // <-- pass the D3 Service into the constructor 
    this.d3 = d3Service.getD3(); // <-- obtain the d3 object from the D3 Service 
    this.parentNativeElement = element.nativeElement; 
    } 

    ngOnInit() { 
    let d3 = this.d3; // <-- for convenience use a block scope variable 
    let d3ParentElement: Selection<any, any, any, any>; // <-- Use the Selection interface (very basic here for illustration only) 

// ... 

    if (this.parentNativeElement !== null) { 

     d3ParentElement = d3.select(this.parentNativeElement); // <-- use the D3 select method 

     // Do more D3 things 

    } 
    } 

} 
+0

die Antwort unten, um mehrere d3-Importe zu vermeiden –

2

baut aus AMB0027

import * as d3 from "d3"; 
import * as d3Hierarchy from "d3-hierarchy"; 

d3Hierarchy.hierarchy(blah); 

Eine Abhilfe für sauberere Code

auf Antwort:

Ein Auszug aus dem Info kann unterhalb davon, wie sie verwendet werden in einer Winkel 2 Komponente gefunden werden

Erstellen Sie eine Datei d3-bundle.ts in Ihrem Projekt mit;

export * from "d3-selection" 
export * from "d3-heirachy" 

in der ts mit d3 - Sie können jetzt tun;

import * as d3 from "./d3-bundle" 

d3.hierarchy(blah) 

speziell auf den "scaleLinear" Fehler

npm install @types/d3-axis 

und fügt

export * from "d3-axis" 

auf Ihre d3-bundle.ts

Hinweis gibt es Fragen im Zusammenhang mit dieser auf im Zusammenhang zu vermeiden TypeScript https://github.com/Microsoft/TypeScript/issues/9681

7

In Bezug auf Arlos Antwort, lassen Sie mich mit einer kurzen Geschichte und einer aktuellen Antwort erweitern. Ich habe das Repo https://github.com/tomwanzek/d3-v4-definitelytyped erstellt, um neue D3 Version 4 TypeScript-Definitionen zu entwickeln, wenn D3 v4 noch nicht endgültig war und TypeScript 2 gerade am Horizont war. Letzteres war ein Hauptfaktor, weil es die Art veränderte, wie Definitionen geschrieben und erworben werden können, d. H. @types.

Mit ein paar Anmerkungen zu den im Repo aufgeführten Mitarbeitern haben wir die Definitionen finalisiert und auf DefinitelyTyped migriert. Sie werden jetzt aktiv in dem Zweig types-2.0 von DefinitelyTyped gepflegt. Das ist der Zweig, der unter npm @ types veröffentlicht wird.

Einige Verwirrung, die Sie gesehen haben könnten, hatte mit der Tatsache zu tun, dass die einzelnen D3 v4 Moduldefinitionen, z. d3-Auswahl, war schon lange über npm install --save @types/d3-selection verfügbar. Bis gestern hat die von npm install --save @types/d3 erworbene Definition jedoch die alte Definition von D3 v3.5.x nach unten gezogen.

Ab jetzt der Standard-Bundle Definitionen v4 D3 sind vonnpm install --save @types/d3 (The Legacy Version Definitionen für D3 v3.5 kann immer noch von @types gezogen werden, indem eine 3.5-Version zu erwerben, wenn es sein muss)

Was die Definitionen mit Importen mit:

  • und das d3 Standard-Bundle aus (‚d3‘ und ‚@ Typen/d3‘ bezeichnet), während Module enthalten die gleichzeitig nicht installieren Sie die Installation von D3 bereits verwenden in ihm getrennt, z 'd3-Hierarchie' und '@ types/d3-Hierarchie'.

Wie für Angular 2, ja, die d3-NG2-Service oder etwas ähnliches ist ein Weg zu gehen.Ich bin mir sicher, dass es Verbesserungen geben kann, angefangen bei Rapid Prototyping in Verbindung mit eckigen Klammern.