CODEWITHSUNDEEP
javascriptangulard3.js
user7209780
user7209780

Reputation:

Using d3.js in Angular2

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?

Upvotes: 6

Views: 2197

Answers (3)

pjmolina
pjmolina

Reputation: 316

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.

Upvotes: 0

Bruce MacDonald
Bruce MacDonald

Reputation: 288

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!

Upvotes: 1

Tudor Ciotlos
Tudor Ciotlos

Reputation: 1845

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.

Upvotes: 3

Related Questions