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

【问题标题】：Angular 4 : properly importing and using d3 and d3-cloud and their typingsAngular 4：正确导入和使用 d3 和 d3-cloud 及其类型
【发布时间】：2019-11-12 15:37:39
【问题描述】：

我正在尝试使用 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，但用户从未回答他如何解决问题的问题。

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

【问题讨论】：

标签： angular d3.js import angular-cli definitelytyped

【解决方案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
}

【讨论】：