Angular2でのd3.jsの使用

Question

残念ながら、これらのすべては廃止されているようです。

私はangular-cliでangular2を使用しています。

npm install d3を使用してd3.js imをインストールするには

マイapp.component.tsファイル：

import { Component } from '@angular/core'; 
import * as d3 from 'd3'; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
} 

しかし、どういうわけか、正しくエラーのため、アプリのdoesntの負荷： Webstormは「ファイルを参照し、doesnのすることができ、特にので、ちょっと奇妙だCannot find module 'd3'.

問題があれば報告してください。

私もc3.jsライブラリをインストールしようとインストールした後、IVEは同じインポート方法を試みた：

npm install c3

と

import * as c3 from 'c3';

をしかし、それはaswell仕事doesntの最初のものとして。

EDIT！コマンドを使用した後

：

npm install d3 --save

npm install @types/d3 --save-dev

@Tudor CiotlosはImはいくつかのエラーを取得し、前述のように。

[default] C:\Users\node_modules\@types\c3\index.d.ts:28:41 Generic type 'Selection' requires 4 type argument(s). [default] C:\Users\node_modules\@types\c3\index.d.ts:351:56

Module '" C:\Users\node_modules/@types/d3/index"' has no exported member 'Rgb'. [default] C:\Users\node_modules\@types\c3\index.d.ts:355:47

Module '"C:/Users/node_modules/@types/d3/index"' has no exported member 'Rgb'. [default] C:\Users\ode_modules\@types\c3\index.d.ts:833:51

Module '"C:/Users/node_modules/@types/d3/index"' has no exported member 'Rgb'. [default] C:\Users\node_modules\@types\c3\index.d.ts:943:58

Module '"C:/Users/node_modules/@types/d3/index"' has no exported member 'Rgb'.

なぜこのようなエラーが表示されるのですか？

Answer 1

D3パッケージをインストールすることに加えて、あなたはまた、関連したタイピングをインストールする必要があります：あなたはより多くの情報を見つけることができます

npm install d3 --save 
npm install @types/d3 --save-dev 

について 3rd Party Library InstallationとGitHubの上の角-cliのreadmeの Global Library Installation。

Answer 2

これは私にも起こりました - 私はangular-cliとd3 v4を使用しており、開発中にエラーが発生しています。

declare module 'd3' { 
    export * from 'd3-array'; 
    export * from 'd3-axis'; 
    export * from 'd3-brush'; 
    export * from 'd3-chord'; 
    export * from 'd3-collection'; 
    export * from 'd3-color'; 
    export * from 'd3-dispatch'; 
    export * from 'd3-drag'; 
    export * from 'd3-dsv'; 
    export * from 'd3-ease'; 
    export * from 'd3-force'; 
    export * from 'd3-format'; 
    export * from 'd3-geo'; 
    export * from 'd3-hierarchy'; 
    export * from 'd3-interpolate'; 
    export * from 'd3-path'; 
    export * from 'd3-polygon'; 
    export * from 'd3-quadtree'; 
    export * from 'd3-queue'; 
    export * from 'd3-random'; 
    export * from 'd3-request'; 
    export * from 'd3-scale'; 
    export * from 'd3-selection'; 
    export * from 'd3-shape'; 
    export * from 'd3-time'; 
    export * from 'd3-time-format'; 
    export * from 'd3-timer'; 
    export * from 'd3-transition'; 
    export * from 'd3-voronoi'; 
    export * from 'd3-zoom'; 
} 

・ホープ、このことができます：import * as d3 from "d3";に加えて

は、あなたのtypings.d.tsファイルに以下のコードを追加します！

Answer 3

もう1つの方法は、D3機能をラップするngライブラリを使用することです。例えば、d3-ng2-serviceは、Angular提供TSタイピングで消費するために同時にD3 v.4をラップします。