在Angular2中使用d3.js

Question

There are a few question on SO about it, but unfortunately they all seem to be deprecated.

Im using angular2 with angular-cli.

To install d3.js im using npm install d3 .

My app.component.ts file:

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

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

export class AppComponent {
}

But somehow, the app doesnt load correctly because of error: Cannot find module 'd3'.

That's kinda strange, especially because the Webstorm is able to see the file and doesn't report any problems.

I also tried to install the c3.js library and after installing ive tried the same import way:

npm install c3

and

import * as c3 from 'c3';

But it doesnt work aswell as the first one.

EDIT!

After using commands:

npm install d3 --save

npm install @types/d3 --save-dev

like @Tudor Ciotlos mentioned, Im getting few errors.

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

Anyone knows why Im getting these errors?

Answer 1

In addition to installing the d3 package, you will also have to install the associated typings:

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

You can find more information about 3rd Party Library Installation and Global Library Installation in the angular-cli readme on GitHub.

Answer 2

This was happening to me as well - I am using angular-cli and d3 v4 and only getting errors in development.

In addition to import * as d3 from "d3"; add the code below to your typings.d.ts file:

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

Another path to explore is to use a ng library wrapping D3 functionality. For example, d3-ng2-service wraps D3 v.4 for consumption in Angular providing TS typings at the same time.