Angular 4 : properly importing and using d3 and d3-cloud and their typings

Question

I'm trying to use d3 + d3-cloud to make a word cloud with Angular CLI (Angular 4+)

I did an npm i of both libraries plus their respective typings :

"dependencies": {
    "d3": "^4.10.2",
    "d3-cloud": "^1.2.4"
  },
  "devDependencies": {
    "@types/d3": "^4.10.0",
    "@types/d3.cloud.layout": "^1.2.32"
  }

and Import them in my component :

import * as d3 from 'd3'
import * as cloud from 'd3-cloud'

Console logging them in my ngOnInit returns instances of both libraries.

the typings for d3 are working (if I type d3.I get intellisense) but nothing for cloud.

I tried d3.layout.cloud but I get a typescript error, I'm guessing I should use cloudinstead since I've instantiated it this way but since I don't get intellisense I'm not sure.

cloud.layout.cloud() results in a Cannot read property 'cloud' of undefined error.

I'm confused as to how I should properly import and use d3-cloud and their typings, I read this thread but the user never answered the question of how he fixed his problem.

Is my method the right way of using these libraries ?

Answer 1

The installed type definitions for d3-cloud seems to be wrong. Install @types/d3-cloud.

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

That will introduce d3-cloud in package.json and not d3.cloud.layout.

"devDependencies": {
    ...
    "@types/d3-cloud": "^1.2.2"
}

Import d3-cloud along with d3 in your component.

import * as cloud from 'd3-cloud';

Use this to create layout.

render(){
    var layout = cloud().size([width, height])
                        .words(this.data.map(function(d) { return {text: d.name}; }));
    // Misc code
}