Question

关于它的问题有一些问题，但遗憾的是它们似乎都被弃用了。

我使用angular2 with 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 库，安装ive后尝试了相同的导入方式：

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'。

任何人都知道为什么我会收到这些错误？

Answer 1

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

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

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

Answer 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';
}

希望这有帮助！

Answer 3

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

在Angular2中使用d3.js.

3 个答案: