web-dev-qa-db-ja.com

Angular 2 TypeScriptプロジェクトのnpmを介してd3.jsをインストールする利点はありますか？

TL; DR： d3.jsは、タイピングと同様にnpmを介してインストールする必要があります。受け入れられた回答には詳細があります。この質問を書いたとき、私はAngularに不慣れでした。npmプロセスが標準です：ツリーのシェーキング、パッケージ管理、更新など

Angular 2プロジェクト（簡単にするためのクイックスタートプロジェクト）があり、d3.jsバージョン4をインポートしています。JavaScriptのみであるため、d3にはTypeScript定義はありません。

Index.htmlにlibを追加します：

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

TypeScript 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

今、私は2番目のプロジェクトを試しましたが、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のインポートステートメントを使用していませんが、とにかく問題なく動作します。多分私はここで何かが欠けていますか？

javascriptd3.jstypescriptangularnpm
10
Drenai

現在のところ、D3バージョン4を利用するための基本的に次の2つのimportベースのオプションがあります（常に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を使用します。）
  • 便宜上、これらのモジュールを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に変更されたため、簡単に失われるようになりました。

14
tomwanzek