d3js importing to angular2

Question

How can I import d3js int angular2 project? I installed the d3js using npm and added d3js to my systemJs however its giving me traceur.js error. I also tried just using latest cdn in script and did import * as d3 from 'd3'; but that can't find the module.

SystemConfig.js,this setup gives me traceur.js error

var map = {
    'd3': 'node_modules/d3'
  };

var packages = {
    'd3': {main: 'index.js'},
  };

Answer 1

I ran into the same error when importing d3. If you installed d3 using es6 module like I did then setting the path to the bundle file will get rid of the error.

var map = {
  'd3': 'node_modules/d3/build'
};

var packages = {
  'd3': {main: 'index.js'},
};

After this you should be able to us d3 in the following way.

import d3 from 'd3';

I used the following page to help me figure this out. https://github.com/d3/d3/issues/2900

Answer 2

You could still use import * as d3 from 'd3';

but import '@types/d3' into your devDependencies. After you did this, you would be able to get the modules. I use this in my ng5 application.

Answer 3

Perform this step 1) move to the angular project folder run this on the terminal

 npm i d3

2) from your component class use the following import statement.

import * as d3 from "d3";