angularjs - Korrekt måte å importere D3.js i en Angular 2-applikasjon

Det er mange uoverensstemmelser om den riktige måten å importere og bruke D3 i en Angular 2.0.0-rc.4-applikasjon. Jeg har sett:

1) Skal legges til i rotfilen index.html:

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

Deretter bruker du:

Import * as d3 from 'd3';

i hvilken som helst komponentfil som jeg ønsker å implementere en D3-visualisering i.

2) Bruke npm:

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

Så fortsatt bruker:

Import * as d3 from 'd3';

Selv med TypeScript 2.0.0 Beta (hvis jeg leser dokumentasjonen riktig) kan jeg gjøre:

npm install --save @types/d3

Bruk deretter virkelig:

Import * as d3 from 'd3';

-- Med begge metodene, legg til følgende i var map={ } i systemjs.config.js

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

og legge til i var packages={ }

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

Kan noen bekrefte den riktige måten å implementere D3 på? Takk.

Svar #1

Den eneste måten som fungerer for meg, er å lage en fil "custom-d3.ts", der inne eksporterer jeg det jeg trenger (for eksempel):

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

Og så i mine andre ts-filer kan jeg importere d3 som: import * as d3 from '.../../custom-d3.ts'.

Jeg får automatisk fullføring ved å installere typene @types/d3, og ingen feil med TypeScript.

Du kan også bruke dette biblioteket som gjør alt dette for deg og kan injiseres i klassene dine: https://github.com/tomwanzek/d3-ng2-service

Svar #2

Jeg er ikke sikker på om dette er riktig måte å gjøre det på, men i filen din typings/index.d.ts kan du bare legge til noe som /// <reference path="modules/d3/d3.d.ts" />.

Jeg rotet ikke med systemjs.config.js og jeg trengte ingen andre import-setninger i komponentene, men det så ut til å fungere, jeg får ingen røde feil.

Relaterte artikler