Правильный способ импорта 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, и мне не нужны какие-либо другие операторы импорта в компонентах, но, похоже, это трюк, я не получаю никаких красных ошибок.