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

Question

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

---

我有一个Angular 2项目(它是简单的快速启动项目),我正在导入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所以我安装了DefinitelyTyped的输入 - 然后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语句,无论如何它都可以正常工作.也许我在这里遗漏了什么？

Answer 1

截至目前,您基本上有以下两个import基于选项来使用D3版本4(始终以使用TypeScript 2为条件):

选项1(使用标准D3捆绑包)

• npm install --save d3 (安装标准D3 v4捆绑包的常规方法)
• npm install --save-dev @types/d3(安装标准D3 v4软件包的定义)--save如果要构建一个供其他Angular 2应用程序使用的库,则应使用,以便库使用者可以通过键入支持进行开发)
• 现在,您可以使用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进行模块加载/捆绑.