角4:正确导入和使用d3和d3云及其类型

Question

我正在尝试使用d3 +d3云来创建一个具有角度CLI (角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.，我得到了intellisense)，但是cloud.没有

我尝试了d3.layout.cloud，但是我得到了一个类型记录错误，我想我应该使用cloud，因为我已经用这种方式实例化了它，但是由于我没有获得intellisense，所以我不确定。

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

对于如何正确导入和使用d3云以及它们的类型，我感到困惑，我阅读了this thread，但用户从未回答他如何解决问题的问题。

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

Answer 1

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

npm安装@type/d3云-保存-dev

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

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

在组件中导入d3云和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
}