angularjs - 将 D3.js 导入 Angular 2 应用程序的正确方法

Question

在 Angular 2.0.0-rc.4 应用程序中导入和使用 D3 的正确方法存在很多差异。我见过:

1) 添加到根 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 的正确方法？谢谢。

Answer 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'。

我通过安装 typings @types/d3 获得了自动完成功能， typescript 没有错误。

您还可以使用这个为您完成所有这些并且可注入(inject)到您的类中的库:https://github.com/tomwanzek/d3-ng2-service