Sử dụng d3.js trong Angular2

Question

Có một vài câu hỏi về SO về nó, nhưng tiếc là tất cả chúng dường như không được chấp nhận.

Im sử dụng angular2 với angular-cli.

Để cài đặt d3.js im sử dụng npm install d3.

app.component.ts tập tin của tôi:

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

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

export class AppComponent { 
} 

Nhưng bằng cách nào đó, ứng dụng doesnt tải một cách chính xác vì lỗi: Cannot find module 'd3'.

Đó là kinda lạ, đặc biệt là vì Webstorm có thể nhìn thấy các tập tin và doesn' t báo cáo bất kỳ vấn đề nào.

Tôi cũng đã cố gắng để cài đặt các c3.js thư viện và sau khi cài đặt ive đã cố gắng cách nhập khẩu giống nhau:

npm install c3

và

import * as c3 from 'c3';

Nhưng nó không làm việc là tốt là người đầu tiên.

EDIT!

Sau khi sử dụng lệnh:

npm install d3 --save

npm install @types/d3 --save-dev

như @Tudor Ciotlos đề cập, Im nhận được vài lỗi.

[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'.

Bất cứ ai cũng biết tại sao tôi gặp phải lỗi này?

Answer 1

Ngoài việc cài đặt các gói d3, bạn cũng sẽ phải cài đặt các typings liên quan:

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

Bạn có thể tìm thêm thông tin về 3rd Party Library Installation và Global Library Installation trong readme góc-cli trên GitHub.

Answer 2

Điều này cũng đang xảy ra với tôi - tôi đang sử dụng angular-cli và d3 v4 và chỉ gặp lỗi khi phát triển.

Ngoài import * as d3 from "d3"; thêm mã dưới đây để tập typings.d.ts của bạn:

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'; 
} 

Hope this helps!

Answer 3

Một đường dẫn khác để khám phá là sử dụng chức năng thư viện bao gói D3. Ví dụ: d3-ng2-service kết thúc tốt đẹp D3 v.4 để sử dụng trong Angular cung cấp TS typings cùng một lúc.