Angular 2 TypeScript項目通過npm安裝d3.js有什麼好處嗎？

Question

我有一個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"); 

視覺，所以我從DefinitelyTyped安裝分型Studio代碼不承認D3 - 的IDE然後識別D3，我也得到代碼完成等：

typings install dt~d3 --save --global 

現在，我嘗試了第二個項目，但去了npm路線，npm install --save d3我可以使用

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

通過index.html中的node_modules引用d3.js但是，我不明白爲什麼我在這種情況下會使用npm嗎？我沒有在component.ts文件中使用d3的導入語句，並且無論如何它都可以正常工作。也許我在這裏錯過了一些東西？

Answer 1

截至目前你有根本性以下兩個import爲基礎的方案，利用D3版本4（始終有條件使用打字稿2）：

選項1（使用標準D3束）

• npm install --save d3（正常方式安裝標準D3 V4束）
• npm install --save-dev @types/d3（用於安裝標準D3 V4捆綁的定義），應使用--save，如果你AR e建立一個供其他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。