Question

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

我有一个Angular 2项目（为了简单起见，它是快速启动项目），我导入了d3.js版本4.没有带有d3的TypeScript定义，因为它是＆＃39; s仅限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所以我安装了DefinitelyTyped的输入 - 然后IDE识别d3，我得到代码完成等：

typings install dt~d3 --save --global

现在，我尝试了第二个项目，但是去了npm路线，npm install --save d3我可以通过index.html中的 node_modules 引用d3.js < / p>

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

但是，我不明白为什么我会在这个例子中使用npm？我没有在component.ts文件中使用d3的import语句，无论如何它都可以正常工作。也许我在这里错过了一些东西？

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

e.g。

// 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以进行模块加载/捆绑。

对于Angular 2 TypeScript项目，通过npm安装d3.js有什么好处吗？

1 个答案: