0

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

gpasse
  • 4,380
  • 7
  • 44
  • 75
  • Do you have `d3.d.ts` file in your solution? Like this one https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/d3/d3.d.ts – null canvas Jun 28 '16 at 10:00
  • This is how you do Module resolution https://www.typescriptlang.org/docs/handbook/module-resolution.html – null canvas Jun 28 '16 at 10:00
  • I have installed the definition using : typings install d3 --global --save – gpasse Jun 28 '16 at 10:06
  • Take a look [here](https://forum.ionicframework.com/t/use-of-third-party-js-libary-with-typings-in-ionic2-project/41047/5) and [here](http://stackoverflow.com/questions/34746304/using-js-library-installed-via-npm-in-typescript-angular-2-project) – sebaferreras Jun 28 '16 at 10:07
  • using import * as d3 from 'd3' results in the same error : Error TS2307: Cannot find module 'd3' – gpasse Jun 28 '16 at 10:24
  • @gpasse did you ever resolve this? – Abdullah Rasheed Sep 06 '16 at 20:01
  • @inspired Hi not really, but I can use d3js. You can check that post https://forum.ionicframework.com/t/d3js-import-typescript/56027 – gpasse Sep 08 '16 at 12:17

2 Answers2

1

I used a workaround the issue.

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)

gpasse
  • 4,380
  • 7
  • 44
  • 75
0

Try this:

npm install @types/d3 --save

I just tried it and it works. More info here.

sooon
  • 4,718
  • 8
  • 63
  • 116