通过 npm 为 Angular 2 TypeScript 项目安装 d3.js 有啥好处吗？

Posted 2023-02-22

【中文标题】通过 npm 为 Angular 2 TypeScript 项目安装 d3.js 有啥好处吗？

【英文标题】：Is there any benefit installing d3.js via npm for Angular 2 TypeScript project?通过 npm 为 Angular 2 TypeScript 项目安装 d3.js 有什么好处吗？

【发布时间】：2016-11-11 05:05:09

【问题描述】：

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

---

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

在 index.html 中我添加了 lib：

<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，因此我从 DefinitiveTyped 安装了类型 - 然后 IDE 识别 d3，并获得代码完成等：

typings install dt~d3 --save --global

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

引用 d3.js

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

但是，我不明白为什么我会在这种情况下使用 npm？我没有在 component.ts 文件中使用 d3 的 import 语句，它仍然可以正常工作。也许我在这里遗漏了一些东西？

【问题讨论】：

d3 是在 d3.min.js 中的全局范围内定义的，所以只要文件包含在页面中就不需要导入任何东西。 Npm 在这里并没有增加任何好处（除了它为你管理依赖项）

如果我不使用全局范围......它会工作吗？我无法使用导入来实现它

我想会，但我不熟悉打字稿项目。恐怕在这方面我无法为您提供更多帮助。

import * as d3 from 'd3';有效，但我使用了 angular2-seed 设置。不得不 npm install d3@3.5.17，因为 v4 存在导入问题。 systemjs需要在angular 2 quickstart中配置，但是angular2-seed会自动导入

【参考方案1】：

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

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

npm install --save d3（安装 Standard D3 v4 Bundle 的常规方法） npm install --save-dev @types/d3（安装 Standard D3 v4 Bundle 的定义）如果您正在构建一个供其他 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。） 为方便起见，您现在可以将这些模块捆绑在一个 barrel 模块中 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 进行模块加载/捆绑。