web-dev-qa-db-ja.com

D3.jsをAngular 2アプリケーションにインポートする正しい方法

Angular 2.0.0-rc.4アプリケーションでD3をインポートして使用する正しい方法には多くの不一致があります。

1）ルートのindex.htmlファイルに追加するには：

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

次に、使用：

Import * as d3 from 'd3';

d3ビジュアルを実装するコンポーネントファイル内。

2）npmの使用：

npm install d3 --save
typings install d3 --save

その後、まだ使用しています：

Import * as d3 from 'd3';

TypeScript 2.0.0 Beta（ドキュメントを正しく読んでいる場合）でも、次のことができます。

npm install --save @types/d3

次に、実際に使用します：

Import * as d3 from 'd3';

-両方の方法で、以下をvar map = { }にsystemjs.config.jsに追加します

'd3':'node_modules/d3/d3.min.js'

var packages = { }に追加

'd3':{main:'build/d3.js',defaultExtension:'js'}

D3を実装する正しい方法を誰かが確認できますか？ありがとうございます

angularjsd3.jstypescriptangular
13
ntdog22

私にとって有効な唯一の方法は、ファイル "custom-d3.ts"を作成することです。必要なものをエクスポートします（たとえば）。

export * from 'd3-axis';
export * from 'd3-format';
export * from 'd3-interpolate';
export * from 'd3-scale';
export * from 'd3-selection';
export * from 'd3-shape';

そして、他のtsファイルでは、d3をimport * as d3 from '.../../custom-d3.ts'としてインポートできます。

タイピング@types/d3をインストールすることでオートコンプリートが得られ、TypeScriptでエラーは発生しません。

これらすべてを自動的に行い、クラスに注入可能なこのライブラリを使用することもできます： https://github.com/tomwanzek/d3-ng2-service

7
Olivier

これが正しい方法であるかどうかはわかりませんが、typings/index.d.tsファイルに/// <reference path="modules/d3/d3.d.ts" />.

Systemjs.config.jsをいじったりせず、コンポーネント内に他のインポート文は必要ありませんでしたが、トリックを実行しているようでした。赤いエラーは発生しません。

1
brotherhooks