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

Question

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を実装する任意のコンポーネントファイルに。

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

：中

2）NPMを使用してそして、まだ使用して

：

Import * as d3 from 'd3'; 

活字体2.0.0ベータ版とけど（私はドキュメントを読んでいる場合は、右の）私が行うことができます。

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を実装するための正しい方法を確認することはできますか？ありがとうございました。

Answer 1

私は（例えば）必要なものをエクスポート内部で私の作品唯一の方法は、ファイル「カスタムd3.ts」を作成することです。私の他の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'; 

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

タイピング@types/d3をインストールすると自動的に補完され、typescriptでエラーは発生しません。

また、あなたのためにすべてのことを行い、あなたのクラスでの注射でこのライブラリを使用することができます。私のインポートd3は私に赤い線「モジュールを見つけることができませんを与えているようhttps://github.com/tomwanzek/d3-ng2-service

Answer 2

私は、これはそれを行うための正しい方法であるかはわからないが、あなたのタイピングに/ index.d.ts私はsystemjs.configと周りの混乱はなかった

/// <reference path="modules/d3/d3.d.ts" />.のようなだけで何かを追加提出.jsと私はコンポーネント内で他のインポートステートメントは必要ありませんでしたが、トリックを行うように見えた、私は赤いエラーを取得しません。