在 Angular2 中使用 d3.js

Posted 2023-02-22

【中文标题】在 Angular2 中使用 d3.js

【英文标题】：Using d3.js in Angular2

【发布时间】：2017-04-16 01:51:24

【问题描述】：

关于它的一些问题，但不幸的是，它们似乎都已被弃用。

我正在使用 angular2 和 angular-cli。

使用npm install d3 安装 d3.js 即时通讯。

我的app.component.ts 文件：

import  Component  from '@angular/core';
import * as d3 from 'd3';

@Component(
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

export class AppComponent 

但不知何故，由于错误，应用程序无法正确加载： Cannot find module 'd3'.

这有点奇怪，尤其是因为 Webstorm 能够看到文件并且没有报告任何问题。

我也尝试安装 c3.js 库，安装后我尝试了相同的导入方式：

npm install c3

和

import * as c3 from 'c3';

但效果不如第一个。

编辑！

使用命令后：

npm install d3 --save

npm install @types/d3 --save-dev

就像@Tudor Ciotlos 提到的，我很少出错。

[默认] C:\Users\node_modules\@types\c3\index.d.ts:28:41 通用类型“选择”需要 4 个类型参数。 [默认] C:\Users\node_modules\@types\c3\index.d.ts:351:56

模块 '"C:\Users\node_modules/@types/d3/index"' 没有 导出成员 'Rgb'。 [默认] C:\Users\node_modules\@types\c3\index.d.ts:355:47

模块 '"C:/Users/node_modules/@types/d3/index"' 没有 导出成员 'Rgb'。 [默认] C:\Users\ode_modules\@types\c3\index.d.ts:833:51

模块 '"C:/Users/node_modules/@types/d3/index"' 没有 导出成员 'Rgb'。 [默认] C:\Users\node_modules\@types\c3\index.d.ts:943:58

模块 '"C:/Users/node_modules/@types/d3/index"' 没有 导出成员 'Rgb'。

有人知道我为什么会收到这些错误吗？

【参考方案1】：

另一个探索途径是使用包装 D3 功能的 ng 库。 例如，d3-ng2-service 包装 D3 v.4 以在 Angular 中使用，同时提供 TS 类型。

【参考方案2】：

这也发生在我身上 - 我正在使用 angular-cli 和 d3 v4 并且只在开发中遇到错误。

除了 import * as d3 from "d3"; 之外，将以下代码添加到您的 typings.d.ts 文件中：

declare module 'd3' 
  export * from 'd3-array';
  export * from 'd3-axis';
  export * from 'd3-brush';
  export * from 'd3-chord';
  export * from 'd3-collection';
  export * from 'd3-color';
  export * from 'd3-dispatch';
  export * from 'd3-drag';
  export * from 'd3-dsv';
  export * from 'd3-ease';
  export * from 'd3-force';
  export * from 'd3-format';
  export * from 'd3-geo';
  export * from 'd3-hierarchy';
  export * from 'd3-interpolate';
  export * from 'd3-path';
  export * from 'd3-polygon';
  export * from 'd3-quadtree';
  export * from 'd3-queue';
  export * from 'd3-random';
  export * from 'd3-request';
  export * from 'd3-scale';
  export * from 'd3-selection';
  export * from 'd3-shape';
  export * from 'd3-time';
  export * from 'd3-time-format';
  export * from 'd3-timer';
  export * from 'd3-transition';
  export * from 'd3-voronoi';
  export * from 'd3-zoom';

希望这会有所帮助！

【参考方案3】：

除了安装 d3 包之外，您还必须安装相关的类型：

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

您可以在 GitHub 上的 angular-cli 自述文件中找到有关 3rd Party Library Installation 和 Global Library Installation 的更多信息。

【讨论】：

@H.Doe 我刚刚使用 angular-cli 在新安装的 angular2 应用程序上尝试了这些步骤，并且它有效，我没有遇到像你这样的错误。您能否尝试重新安装您的应用程序？

是的。有用。感谢你。但是错误仍然出现。但它们不会影响应用程序。