Angular 4：正确导入和使用d3和d3-cloud及其类型

Question

我正在尝试使用d3 + d3-cloud通过Angular CLI（Angular 4+）制作词云

我对两个库都进行了npm i加上它们各自的类型：

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

并将它们导入我的组件中：

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

控制台将它们记录在我的ngOnInit中会返回两个库的实例。

d3的键入正常（如果我键入d3.，我将获得智能感知，但cloud.则不起作用

[我尝试过d3.layout.cloud，但遇到打字错误，我猜应该改用cloud，因为我已经用这种方式实例化了它，但是由于我没有智能感知，所以我不确定。

[cloud.layout.cloud()导致Cannot read property 'cloud' of undefined错误。

[我对如何正确导入和使用d3-cloud及其类型感到困惑，我读了this thread，但用户从未回答过如何解决问题的问题。

我的方法是使用这些库的正确方法吗？

Answer 1

d3-cloud的已安装类型定义似乎是错误的。安装@types/d3-cloud。

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

这将在[[package.json]中引入d3-cloud，而不是d3.cloud.layout。

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

将d3-cloud和d3一起导入您的组件。

import * as cloud from 'd3-cloud';

使用它来创建布局。

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