Правильный способ импорта D3.js в приложение Angular 2

Существует много расхождений в правильном способе импорта и использования D3 в приложении Angular 2.0.0-rc.4. Я видел:

1) Чтобы добавить в файл root index.html:

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

Затем, используя:

Import * as d3 from 'd3';

в любом файле компонента, который я хочу реализовать визуализацией D3.

2) Использование npm:

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

Затем все еще используется:

Import * as d3 from 'd3';

Хотя с TypeScript 2.0.0 Beta (если я читаю документацию справа), я могу сделать:

npm install --save @types/d3

Тогда действительно используйте:

Import * as d3 from 'd3';

- В обоих случаях добавьте следующее к var map = { } в systemjs.config.js

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

и добавив к var packages = { }

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

Может ли кто-нибудь подтвердить правильный способ реализации D3? Спасибо.

Ответ 1

Единственный способ, который работает для меня, - создать файл "custom-d3.ts", внутри которого я экспортирую то, что мне нужно (например):

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

И затем в других моих ts файлах я могу импортировать d3 как: import * as d3 from '.../../custom-d3.ts'.

Я получаю автоматическое завершение, устанавливая типизацию @types/d3, и без ошибок с typescript.

Вы также можете использовать эту библиотеку, которая делает все это для вас, и может быть использована в ваших классах: https://github.com/tomwanzek/d3-ng2-service

Ответ 2

Я не уверен, что это правильный способ сделать это, но в файле typings/index.d.ts просто добавьте что-то вроде /// <reference path="modules/d3/d3.d.ts" />.

Я не возился с systemjs.config.js, и мне не нужны какие-либо другие операторы импорта в компонентах, но, похоже, это трюк, я не получаю никаких красных ошибок.