Gibt es einen nutzen zu installieren d3.js über npm für Eckige 2 Typoskript-Projekt?

TL;DR: d3.js sollte installiert werden, die über npm, als sollten die Testungen. Akzeptierte Antwort hat details. Ich war neu in Eckigen wenn ich schrieb diese Frage. Die npm Prozess ist der standard: für Baum-schütteln, Paketverwaltung, Update usw

Habe ich eine Eckige 2-Projekt (es ist die Quick-Start-Projekt für Einfachheit), und ich bin importieren d3.js version 4. Es gibt keine TypeScript Definitionen mit d3, da es auf javascript basiert nur.

In der index.html ich füge die lib:

<script src="https://d3js.org/d3.v4.min.js"></script>

In der Typoskript-app.Komponente.ts, ich mich auf die d3.wählen Sie().... und es funktioniert - zieht einen Kreis: 

d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");

Visual Studio den Code nicht erkennen, d3, damit ich installieren die Testungen von DefinitelyTyped - die IDE dann erkennt d3, und ich bekomme die code-Vervollständigung etc.:

typings install dt~d3 --save --global

Nun, ich versuchte es ein zweites Projekt, das aber ging die npm route npm install --save d3 und ich kann auf die d3.js via node_modules in index.html mit 

<script src="node_modules/d3/build/d3.min.js"></script>

Aber ich sehe nicht ein, warum ich mit npm in diesem Fall? Ich bin nicht mit import-Anweisungen für die d3 in der Komponente.ts-Dateien, und es funktioniert trotzdem. Vielleicht bin ich hier etwas fehlt?

  • d3 ist definiert in den globalen Bereich in d3.min.js, so brauchen Sie nicht zu importieren-nichts, solange die Datei in die Seite eingeschlossen. Npm nicht alle Vorteile, die hier (außer, dass es verwaltet die Abhängigkeiten für Sie)
  • Und wenn ich nicht mit den globalen scope... würde es funktionieren. Ich konnte nicht um es zu bekommen Arbeit, indem Sie Importe
  • Ich denke, es wäre, aber ich bin nicht vertraut mit typesccripts Projekte. Ich fürchte, ich kann Ihnen nicht helfen, sich mehr auf diese.
  • import * als d3 aus 'd3'; funktioniert, aber ich habe die angular2-Samen-setup. Musste npm installieren [email protected] als v4 hat Probleme mit dem importieren. Die systemjs konfiguriert werden muss, um in den Winkel-2 quickstart, aber angular2-Saatgut importiert automatisch
InformationsquelleAutor Drenai | 2016-07-08
  1. 13

    Ab jetzt haben Sie grundsätzlich die folgenden zwei import-basierten Optionen zu nutzen, D3-version 4 (Immer abhängig mit Typoskript 2):

    Option 1 (Verwendung von Standard-D3-bundle)

    • npm install --save d3 (Das ist die normale Herangehensweise an die Installation der Standard D3 v4 Bundle)
    • npm install --save-dev @types/d3 (Installiert den Definitionen für die Standard-D3-v4-Bundle), die Sie verwenden sollten --save, wenn Sie den Aufbau einer Bibliothek verwendet werden, durch andere Eckige 2-Anwendungen, so dass die Bibliothek die Verbraucher entwickeln können, mit der Eingabe-Unterstützung)
    • Jetzt können Sie import * as d3 from 'd3', z.B. in das Modul schafft eine singleton-D3-service injiziert werden in Komponenten, auf als erforderliche basis.

    Option 2 (Nutzung nur, was Sie brauchen)

    • npm install --save d3-selection d3-transition d3-shape d3-scale Installieren Sie nur die Module, die Sie für Ihr Projekt benötigen,
    • npm install --save-dev @types/d3-selection @types/d3-transition @types/d3-shape @types/d3-scale (Installieren Sie die passenden Definitionen. Wieder, verwenden Sie --save statt --save-dev je nach Anwendungsfall.)
    • Für die Bequemlichkeit, können Sie jetzt bündeln diese Module in einem barrel Modul d3-bundle.ts

    z.B.

    //d3-bundle.ts    
export * from 'd3-selection';
export * from 'd3-transition';
export * from 'd3-shape';
export * from 'd3-scale';
    • Import aus dem bundle (mit den entsprechenden relativen Pfad) zum erstellen einer singleton-D3-Dienst, d.h. import * as d3 from './d3-bundle'

    Dem Vorgehen unter Option 2 ist im wesentlichen, was d3-ng2-service tut. Es kann auch Ihnen eine Idee geben, wie Sie Ihre eigenen zu bauen D3 Service, wenn die veröffentlicht man nicht die richtige für. Sie können immer schlagen Sie Verbesserungen vor, um es, natürlich.

    Ich werde sagen, dass mit dem import-basierte Optionen mit angular-cli wurde zu einer verlorenen einfacher, da es geändert Webpack 2 für Modul-/laden Bündelung.

    InformationsquelleAutor tomwanzek
Schreibe einen Kommentar