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

Posted 2023-03-13

【中文标题】将 D3.js 导入 Angular 2 应用程序的正确方法

【英文标题】：Correct Way to Import D3.js into an Angular 2 Application

【发布时间】：2016-11-15 01:29:12

【问题描述】：

在 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 的正确方法？谢谢。

【问题讨论】：

想知道，因为我的 import d3 给了我一条红线“找不到模块”。我做了 npm install d3

上述选项 2 的细微变化对我有用，请参阅：gist.github.com/satyagraha/5544424965c41f261ac245a92673aa71

【参考方案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 来自动完成，并且打字稿没有错误。

您还可以使用这个库来为您完成所有这些工作，并且可以在您的课程中注入：https://github.com/tomwanzek/d3-ng2-service

【讨论】：

如果您不太担心有多少 d3 模块（例如，在开发期间），您可以使用 import * as d3 from "d3"; 导入所有 d3 模块，当您开始生产时，您将希望使用 Oliver 的示例，即与 Angular2 团队建议使用 rxjs 的方式非常相似。

【参考方案2】：

我不确定这是否是正确的方法，但在您的 typings/index.d.ts 文件中添加类似 /// <reference path="modules/d3/d3.d.ts" />. 的内容

我没有弄乱 systemjs.config.js，也不需要组件中的任何其他导入语句，但似乎可以解决问题，我没有收到任何红色错误。