CODEWITHSUNDEEP
angulard3.js
cobolstinks
cobolstinks

Reputation: 7143

How to add d3.js to angular2

Here is part of my packagke.json:

"dependencies": {
    "@angular/common": "2.3.0",
    "@angular/compiler": "2.3.0",
    "@angular/compiler-cli": "2.3.0",
    "@angular/core": "2.3.0",
    "@angular/forms": "2.3.0",
    "@angular/http": "2.3.0",
    "@angular/platform-browser": "2.3.0",
    "@angular/platform-browser-dynamic": "2.3.0",
    "@angular/platform-server": "2.3.0",
    "@angular/router": "3.3.0",
    "@angular/upgrade": "2.3.0",
    "angular2-in-memory-web-api": "0.0.21",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "d3": "4.5.0",
    "reflect-metadata": "^0.1.8",
    "rollup-plugin-includepaths": "^0.2.1",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.41",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/d3": "4.5.0",

Here is my system.config.js file:

paths: {
    'npm':'node_modules',
    'home':  getDocumentBase()
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'd3': 'npm:d3/build/d3.min.js'

},

The npm package is installed fine, and the typings have been installed to node_modules/@types, but when i try to import d3 

import * as D3 from 'd3';

I get cannot find module 'd3'.

tsc -v Version 2.0.10 npm -v 3.10.10

What am I doing wrong here?

THanks!

Upvotes: 3

Views: 1030

Answers (2)

user7803780
user7803780

Reputation: 

npm install --save d3

Check the version installed in package.json(dependancies) Go and check it in node_modules

You can use d3 in a component by just importing in the component.ts 

import * as d3 from "d3"

Upvotes: 2

Bruce MacDonald
Bruce MacDonald

Reputation: 288

Try adding the following to src/typings.d.ts:

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

It worked for me with the early 2.x angular packages.

However, when angular/cli 1.0 was released I created a new project (which automatically added 4.0), installed d3 and @types/d3 but did not create the typings entry above and it works fine. (I also use webpack - I haven't used systemjs since the CLI switched to webpack)

Good luck!

Upvotes: 1

Related Questions