通过 npm 为 Angular 2 TypeScript 项目安装 d3.js 有什么好处吗?

Question

TL;DR： d3.js 应该通过 npm 安装，键入也应该安装。接受的答案有详细信息。当我写这个问题时，我是 Angular 的新手。npm过程是标准：用于摇树、包管理、更新等

---

我有一个 Angular 2 项目（为简单起见，它是快速入门项目），我正在导入 d3.js 版本 4。d3没有TypeScript定义，因为它只是javascript。

在索引中.html我添加了库：

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

在打字稿 app.component.ts 中，我引用了 d3.select（）....它工作正常 - 画一个圆圈：

d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");

Visual Studio Code无法识别d3，所以我安装了DefinitelyTyped的类型 - 然后IDE识别d3，我得到代码完成等：

typings install dt~d3 --save --global

现在，我尝试了第二个项目，但选择了npm路线，npm install --save d3 我可以通过索引中的node_modules引用 d3.js.html使用

<script src="node_modules/d3/build/d3.min.js"></script>

但是，我不明白为什么在这种情况下我会使用 npm？我没有在 component.ts 文件中使用 d3 的导入语句，无论如何它都可以正常工作。也许我在这里错过了什么？

Answer 1

到目前为止，

您基本上有以下两个基于 import 的选项来使用 D3 版本 4（始终以使用 TypeScript 2 为条件）：

选项 1（使用标准 D3 捆绑包）

• npm install --save d3（安装标准 D3 v4 捆绑包的常规方法）
• npm install --save-dev @types/d3（安装标准 D3 v4 捆绑包的定义）如果您正在构建供其他 Angular 2 应用程序使用的库，则应使用 --save，以便库使用者可以在支持类型的情况下进行开发）
• 现在您可以使用import * as d3 from 'd3'，例如在创建单例 D3 服务的模块中，根据需要注入到组件中。

选项 2（仅使用您需要的内容）

• npm install --save d3-selection d3-transition d3-shape d3-scale 仅安装项目所需的模块
• npm install --save-dev @types/d3-selection @types/d3-transition @types/d3-shape @types/d3-scale（安装匹配的定义。同样，根据您的用例，请使用--save而不是--save-dev。
• 为方便起见，您现在可以将这些模块捆绑在桶模块中d3-bundle.ts

例如

// d3-bundle.ts    
export * from 'd3-selection';
export * from 'd3-transition';
export * from 'd3-shape';
export * from 'd3-scale';

• 从捆绑包导入（使用适当的相对路径）以创建单例 D3 服务，即 import * as d3 from './d3-bundle'

选项 2 下的方法本质上是 d3-ng2-service 所做的。它还可以让您了解如何构建自己的 D3 服务（如果已发布的服务不适合）。当然，您可以随时提出改进建议。

我会说，将基于导入的选项与 angular-cli 一起使用已经变得更容易，因为它更改为 Webpack 2 进行模块加载/捆绑。