D3js import typescript

Hello,

I cannot wrap my head around how i can import d3js library in a ionic typescript projet. I installed the library using :

npm install d3 --save-dev

The library is in node_modules/d3. In my page modules, I try to import using every possible path, for example :

import * as d3 from 'd3/d3'
import * as d3 from '../../../node_modules/d3/d3'

I always get the error:
Error TS2307: Cannot find module ‘d3/d3’.
or
Error TS2307: Cannot find module ‘…/…/…/node_modules/d3/d3’`.

Any hint to help me ?

Angular version 2.0.0-rc.1
Ionic : 2.0.0-beta.9

Thanks

You most likely need to add the type definitions for d3.

So you’ll need to install typings as well.

npm install -g typings

Then search for d3

typings search d3
Viewing 20 of 23

NAME                       SOURCE HOMEPAGE                                     DESCRIPTION VERSIONS UPDATED
d3                         npm    https://www.npmjs.com/package/d3                         1        2016-06-27T16:52:01.000Z
d3                         dt     http://d3js.org/                                         1        2016-06-28T06:50:19.000Z
d3-array                   npm    https://www.npmjs.com/package/d3-array                   1        2016-06-22T19:39:01.000Z
d3-axis                    npm    https://www.npmjs.com/package/d3-axis                    1        2016-06-22T19:39:01.000Z
d3-color                   npm    https://www.npmjs.com/package/d3-color                   1        2016-06-22T19:39:01.000Z
d3-dsv                     dt     https://www.npmjs.com/package/d3-dsv                     1        2016-03-16T15:55:26.000Z
d3-ease                    npm    https://www.npmjs.com/package/d3-ease                    1        2016-06-22T19:39:01.000Z
d3-hierarchy               npm    https://www.npmjs.com/package/d3-hierarchy               1        2016-06-24T15:54:05.000Z
d3-interpolate             npm    https://www.npmjs.com/package/d3-interpolate             1        2016-06-22T19:39:01.000Z
d3-path                    npm    https://www.npmjs.com/package/d3-path                    1        2016-06-22T19:39:01.000Z
d3-polygon                 npm    https://www.npmjs.com/package/d3-polygon                 1        2016-06-22T19:39:01.000Z
d3-scale                   npm    https://www.npmjs.com/package/d3-scale                   1        2016-06-22T19:39:01.000Z
d3-selection               npm    https://www.npmjs.com/package/d3-selection               1        2016-06-22T19:39:01.000Z
d3-shape                   npm    https://www.npmjs.com/package/d3-shape                   1        2016-06-22T19:39:01.000Z
d3-transition              npm    https://www.npmjs.com/package/d3-transition              1        2016-06-22T19:39:01.000Z
dagre-d3                   dt     https://github.com/cpettitt/dagre-d3                     1        2016-06-20T23:13:11.000Z
d3.cloud.layout            dt     https://github.com/jasondavies/d3-cloud                  1        2016-03-17T12:06:54.000Z
d3kit                      dt     https://www.npmjs.com/package/d3kit                      1        2016-06-19T02:59:36.000Z
d3pie                      dt     https://github.com/benkeen/d3pie                         1        2016-06-08T11:01:32.000Z
d3/plugins/d3.superformula dt                                                              1        2016-03-16T17:18:10.000Z

Then we can install definitions from npm with

typings install d3 --save

Now you should be able to reference D3 without issues.

You may get a warning at the import statement, but that can be ignored.

Hi~

I just followed your instruction, but still got an error like below.

$npm install d3 --save

$typings search d3

$typings install d3 --save

in app.ts,
import * as d3 from 'd3’
or
import * as d3 from '…/…/node_modules/d3/d3’
or
import * as d3 from ‘…/…/typings/modules/d3’

then, I got an error like this : “TypeScript error: app/app.ts(6,21): Error TS2307: Cannot find module ‘d3’”

Thanks.

Hi.

I am using d3 in a ionic2 project.
What I did :

Link d3js in the index.html (at the end of the file, bellow app.bundle.js):
<script src="https://d3js.org/d3.v3.min.js"></script>

Then in my page.ts (before @Component) :
declare var d3: any;

And then you can use it like :
d3.select("#graph svg").remove();

So I am not using import (you should delete the import if you want to use this solution)

Dear gillestasse.
Thanks for your answer.

You’re import is a bit off.

Since these are node modules, you don’t need to include the full path to them. You can do.

import * as d3 from 'd3';

And typescript will be able to find it.

@soliven25 did you ever resolve this using import?

@Codekhalifah

Yes. in my case, it’s the dependency issue.

after you execute a below command,

typings install d3

there should be ‘d3’ folder in the path like below

 /typings/modules/d3

so far it’s o.k.

but, in the

/typing/index.d.ts
/typing/main.d.ts

i believe there should the dependency reference path, but it’s not.
so, i added like a below line at index.d.ts and main.d.ts

/// <reference path="modules/d3/index.d.ts" />

Will the RC0 of ionic2, it works.

I did :

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

and

import * as d3 from 'd3'

If you are using SublimeText you should set the path to typescript in the preferences. See :

1 Like

Now the import work correctly but when I try to use simple function such as:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as d3 from 'd3'

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})

export class Page1 {

  constructor(public navCtrl: NavController) { 	
  }

  ionViewLoaded(){
  	var mysvg=d3.select('body')
  }

}

I get the following error:

In the chrome dev console : Page1 iionViewLoaded: d3$2.select is not a function
In my terminal :

rollup: Export 'select' is not defined by '/home/rusticity/Documents/coding/rusticity/tmp/mysidemenu2/.tmp/pages/page1/page1.js'

1 Like

Not sure it is the best way but I solved it using :

import * as d3 from 'd3'
import * as d3select from 'd3-selection'

And then:

var mysvg=d3select.select("#mysvg")

Did you guys try to import c3?
Cause I failed on RC0… If someone has a clue :slight_smile:

two changes solved the “rollup: Export ‘select’ is not defined by …” issue for me

  1. modify rollup.config.js … add useStrict: false,
  2. change import statement as below (src)

import D3 from ‘d3’;

My system information:

Cordova CLI: 6.3.1
Gulp version: CLI version 1.2.2
Gulp local: Local version 3.9.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v4.5.0

package.json

@types/d3”: “^3.5.36”,
“d3”: “^3.5.17”,

For me the “rollup: Export ‘select’ is not defined by …” issue went away, by looking at the package.json file and upgrading the app scripts from version 0.0.36 to 0.0.38. Afterwards I did “npm install” to install the latest version of app scripts.

"@ionic/app-scripts": "0.0.38"

All other solutions did not work. I found this solution, by creating a completely new ionic app, I added d3 as gillestasse suggested.

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

This workied for me in the new app, but in the app I was working on, I got the “rollup: Export ‘select’ is not defined by …” error. So I compared all the version numbers in package.json and noticed that the version numbers in app-scripts and typescript where the only differences.

I changed typescript first, same situation, changed app scripts, then it worked… Cheers!!

I am unable to view chart by following above process.

Please look for below link for the code