typescript 将 D3.js 导入 Angular 2 应用程序的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38335087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correct Way to Import D3.js into an Angular 2 Application
提问by ntdog22
There are a lot of discrepancies on the correct way to import and use D3 in an Angular 2.0.0-rc.4 application. I have seen:
在 Angular 2.0.0-rc.4 应用程序中导入和使用 D3 的正确方法存在很多差异。我见过：
1) To be added to the root index.html file:
1) 要添加到根 index.html 文件中：
<script src="https://d3js.org/d3.v4.min.js"></script>
Then using:
然后使用：
Import * as d3 from 'd3';
in any component file that I want to implement a D3 visual in.
在我想要实现 D3 视觉的任何组件文件中。
2) Using npm:
2) 使用 npm：
npm install d3 --save
typings install d3 --save
Then still using:
然后仍然使用：
Import * as d3 from 'd3';
Though with TypeScript 2.0.0 Beta (if I am reading the documentation right) I can do:
尽管使用 TypeScript 2.0.0 Beta（如果我正确阅读文档），我可以：
npm install --save @types/d3
Then really use:
然后真正使用：
Import * as d3 from 'd3';
-- With both ways, adding the following to the var map = { }to the systemjs.config.js
-- 两种方式，var map = { }在systemjs.config.js中加入以下内容
'd3':'node_modules/d3/d3.min.js'
and adding to the var packages = { }
并添加到 var packages = { }
'd3':{main:'build/d3.js',defaultExtension:'js'}
Can anyone confirm the correct way to implement D3? Thank you.
任何人都可以确认实施 D3 的正确方法吗？谢谢你。
采纳答案by Olivier
The only way that works for me is to create a file "custom-d3.ts", inside I export what I need (for example):
对我有用的唯一方法是创建一个文件“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';
And then in my other ts files I can import d3 as: import * as d3 from '.../../custom-d3.ts'.
然后在我的其他TS文件我可以导入D3为：import * as d3 from '.../../custom-d3.ts'。
I get auto completion by installing the typings @types/d3, and no error with typescript.
我通过安装 Typings 获得自动完成@types/d3，并且打字稿没有错误。
You can also use this library that does all of that for you and is injectable in your classes: https://github.com/tomwanzek/d3-ng2-service
您还可以使用这个库来为您完成所有这些工作，并且可以在您的课程中注入：https: //github.com/tomwanzek/d3-ng2-service
回答by brotherhooks
I'm not sure if this is the correct way to do it but in your typings/index.d.ts file just add something like /// <reference path="modules/d3/d3.d.ts" />.
我不确定这是否是正确的方法，但在您的 Typings/index.d.ts 文件中添加类似 /// <reference path="modules/d3/d3.d.ts" />.
I didn't mess around with the systemjs.config.js and I didn't need any other import statements within the components but seemed to do the trick, I don't get any red errors.
我没有弄乱 systemjs.config.js 并且我不需要组件中的任何其他导入语句，但似乎成功了，我没有收到任何红色错误。
