d3 V4.2.1 TypeScript 2.0 Fehler beim Importieren von d3-selection-multi

Question

Ich versuche, d3 v4 in ein Typoskript-Projekt mit jspm und systemjs zu importieren. Ich kann d3 richtig diese

mit importierten erhalten

import * as d3 from 'd3'; 

Dies funktioniert und es erlaubt mir, eine Auswahl zu treffen usw. ich die attr Funktion versucht, mit und es ein Objekt übergeben, die nicht funktioniert hat. Ich fand, dass d3 v4 das als ein separates Modul enthält.

Nach dem Herunterladen dieses Moduls d3-selection-multi mit jspm. Ich versuche es so in mein Projekt zu importieren.

import * as d3 from 'd3'; 
import 'jspm_packages/npm/d3-selection-multi@1.0.0'; 

ich dann versuchen, die attrs Funktion verwenden, aber die Konsole protokolliert die folgenden Fehler

(index):40 Error: (SystemJS) d3.selectAll(...).data(...).style(...).attrs is not a function(…)

ich auch einige der Kompilierung Störung erhalte, die ich die ganze Zeit erhalten, aber noch immer noch sie kompilieren und die Code läuft

error TS2307: Cannot find module 'd3' 
error TS1110: Type expected 

Kann jemand erklären, was ich falsch mache und eine Lösung anbieten?

Answer 1

Folgendes sollte

import * as d3 from 'd3'; 
    import 'd3-selection-multi'; 

Answer 2

Arbeiten "jspm + d3-selection-multi" Beispiel arbeiten: https://github.com/jakeNiemiec/jspm_d3

Wenn Sie alle D3 importieren müssen, jspm install npm:d3 verwenden. Dies wird einiges an Aufblähung hinzufügen. Denken Sie daran, dass jspm mit Rollup take a look at the build script in package.json kommt.

Answer 3

Ich musste am Ende eine "Bundle" -Datei erstellen und importieren, anstatt einzelne d3-Pakete zu importieren. Dies ist wahrscheinlich nicht ideal, aber es funktioniert (ich habe Pakete auf Kommentar, die ich brauche, nicht, um auf Platz zu sparen):

// export * from 'd3-array'; 
// export * from 'd3-axis'; 
// export * from 'd3-brush'; 
// export * from 'd3-chord'; 
// export * from 'd3-collection'; 
// export * from 'd3-color'; 
// export * from 'd3-dispatch'; 
// export * from 'd3-drag'; 
// export * from 'd3-dsv'; 
// export * from 'd3-ease'; 
// export * from 'd3-force'; 
// export * from 'd3-format'; 
// export * from 'd3-geo'; 
// export * from 'd3-hierarchy'; 
// export * from 'd3-interpolate'; 
// export * from 'd3-path'; 
// export * from 'd3-polygon'; 
// export * from 'd3-quadtree'; 
// export * from 'd3-queue'; 
// export * from 'd3-random'; 
// export * from 'd3-request'; 
// export * from 'd3-scale'; 
export * from 'd3-selection'; 
export * from 'd3-selection-multi'; 
export * from 'd3-shape'; 
// export * from 'd3-time'; 
// export * from 'd3-time-format'; 
// export * from 'd3-timer'; 
// export * from 'd3-transition'; 
// export * from 'd3-voronoi'; 
// export * from 'd3-zoom'; 

Um dies zu nutzen, ich habe nur zu:

import * as D3 from './d3.bunde.ts'; 

PS Wahrscheinlich ist das egal, aber ich baue mein Projekt mit eckigen Klammern.