Using d3.js in Angular2

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?

Tudor Ciotlos · Accepted Answer · 2016-12-01 20:20:02Z

3

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.

answered Dec 1, 2016 at 20:20

Tudor Ciotlos

1,8455 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tudor Ciotlos Over a year ago

@H.Doe I just tried these steps on a freshly installed angular2 app using angular-cli and it works, I get no errors like yours. Could you maybe try to do a fresh install of your application?

user7209780 Over a year ago

Yeah. It works. Thank u. But the errors still appears. But they dont affect the app.

Bruce MacDonald · Accepted Answer · 2016-12-04 03:28:03Z

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!

pjmolina · Accepted Answer · 2017-04-12 10:58:52Z

0

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.

answered Apr 12, 2017 at 10:58

pjmolina

3144 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using d3.js in Angular2

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related