Using d3.js in Angular2

Question

There are a few questions about this, but unfortunately they all seem outdated.

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 for some reason, the application does not load correctly due to an error: Cannot find module 'd3'.

This is strange, especially because Webstorm is able to see the file and does not report any problems.

I also tried installing the c3.js library and after installing ive tried the same import method:

npm install c3

and

import * as c3 from 'c3';

But it does not work the same as the first.

CHANGE!

After using the commands:

npm install d3 --save

npm install @types/d3 --save-dev

as @Tudor Ciotlos mentioned, Im getting some errors.

[default] C: \ Users \ node_modules \ @types \ c3 \ index.d.ts: 28: 41 General type "Select" requires 4 type arguments (s). [default] C: \ Users \ node_modules \ @types \ c3 \ index.d.ts: 351: 56

The module '' C: \ Users \ node_modules / @ types / d3 / index "'does not have an exported member of' Rgb.” [Default] C: \ Users \ node_modules \ @types \ c3 \ index.d.ts: 355: 47

The module '' C: / Users / node_modules / @ types / d3 / index "'does not have an exported member of' Rgb '. [Default] C: \ Users \ ode_modules \ @types \ c3 \ index.d.ts: 833: 51

The module '' C: / Users / node_modules / @ types / d3 / index "'does not have an exported member of' Rgb.” [Default] C: \ Users \ node_modules \ @types \ c3 \ index.d.ts: 943: 58

Module '' C: / Users / node_modules / @ types / d3 / index "'does not have an exported member of' Rgb '.

Does anyone know why Im getting these errors?

Answer 1

In addition to installing the d3 package, you will also need to install related ticks:

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

You can find more information about Installing a third-party library and Installing a global library in angular-cli readme on GitHub.

Answer 2

This also happened to me - I use angular-cli and d3 v4 and get development errors.

In addition to import * as d3 from "d3"; add the following code to the 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 way to learn is to use the D3 function to wrap the ng library. For example, d3-ng2-service wraps D3 v.4 for consumption in Angular, providing TS identifiers at the same time.