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 :
opened 07:23AM - 14 Jul 16 UTC
closed 01:04PM - 14 Jul 16 UTC
In Typescript 2, we can import *.js files and typescript will look for a corresp… onding *.d.ts file, too (instead of a *.js.d.ts file): https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#module-identifiers-allow-for-js-extension
This doesn't currently work for me in Sublime. *.js files are always marked as "cannot find module".
When I run tsc on such a file I get the expected output:
```
File 'moment.ts' does not exist.
File 'moment.tsx' does not exist.
File 'moment.d.ts' exist - use it as a name resolution result.
Resolving real path for 'moment.d.ts', result 'moment.d.ts'
```
Is this expected behavior? I assume Sublime Typescript uses the globally installed Typescript, right? Should this work automatically, then?
edit: Looks like I'll have to set the path to the global typesript instead
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")
ekoz
October 5, 2016, 12:22pm
12
Did you guys try to import c3 ?
Cause I failed on RC0 … If someone has a clue
two changes solved the “rollup: Export ‘select’ is not defined by …” issue for me
modify rollup.config.js … add useStrict: false,
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”,
pbreuss
November 3, 2016, 10:36am
14
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
HTML file
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>
If you get lost, the docs will be your guide.
</p>
<div id="graph111"></div>
</ion-content>
TypeScript(.ts) file
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import * as d3 from ‘d3’;
//declare var d3: any;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export …