Prawidłowy sposób importowania pliku D3.js do aplikacji Angular 2

Question

Istnieje wiele rozbieżności dotyczących prawidłowego sposobu importowania i używania formatu D3 w aplikacji Angular 2.0.0-rc.4. Widziałem:

1) należy dodać do pliku index.html korzeń:

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

Następnie przy użyciu:

Import * as d3 from 'd3'; 

w dowolnym pliku komponentu, który chcę wdrożyć D3 wizualny . w

2) za pomocą NPM:

npm install d3 --save 
typings install d3 --save 

wtedy jeszcze przy użyciu:

Import * as d3 from 'd3'; 

Choć z maszynopis 2.0.0 Beta (jeśli Czytam dokumentację prawej) można zrobić:

npm install --save @types/d3 

Wtedy naprawdę użyć:

Import * as d3 from 'd3'; 

- W obie strony, dodanie do var map = { } do systemjs.config.js

'd3':'node_modules/d3/d3.min.js' 

i dodanie do var packages = { }

'd3':{main:'build/d3.js',defaultExtension:'js'} 

Czy ktoś może potwierdzić prawidłowy sposób realizacji D3? Dziękuję Ci.

Answer 1

Jedynym sposobem, który pracuje dla mnie jest stworzenie pliku „niestandardowym d3.ts”, wewnątrz wyeksportować co potrzebne (na przykład):

export * from 'd3-axis'; 
export * from 'd3-format'; 
export * from 'd3-interpolate'; 
export * from 'd3-scale'; 
export * from 'd3-selection'; 
export * from 'd3-shape'; 

a potem w moich innych plików ts I można zaimportować d3 jako: import * as d3 from '.../../custom-d3.ts'.

Dostaję automatyczne uzupełnianie, instalując typy @types/d3 i bez błędów w maszynopisie.

Można również korzystać z tej biblioteki, który robi to wszystko dla ciebie i jest wstrzykiwany w swoich klasach: https://github.com/tomwanzek/d3-ng2-service

Answer 2

Nie jestem pewien, czy jest to poprawny sposób to zrobić, ale w swoim typowania/index.d.ts file tylko dodać coś takiego /// <reference path="modules/d3/d3.d.ts" />.

ja nie poeksperymentować z systemjs.config .js i nie potrzebowałem żadnych innych instrukcji importu w komponentach, ale wydawało mi się, że to wystarczy, nie dostaję żadnych czerwonych błędów.