如何将d3.js添加到Angular2

Question

这是我的package.json文件的一部分内容：

"dependencies": {
    "@angular/common": "2.3.0",
    "@angular/compiler": "2.3.0",
    "@angular/compiler-cli": "2.3.0",
    "@angular/core": "2.3.0",
    "@angular/forms": "2.3.0",
    "@angular/http": "2.3.0",
    "@angular/platform-browser": "2.3.0",
    "@angular/platform-browser-dynamic": "2.3.0",
    "@angular/platform-server": "2.3.0",
    "@angular/router": "3.3.0",
    "@angular/upgrade": "2.3.0",
    "angular2-in-memory-web-api": "0.0.21",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "d3": "4.5.0",
    "reflect-metadata": "^0.1.8",
    "rollup-plugin-includepaths": "^0.2.1",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.41",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/d3": "4.5.0",

这是我的system.config.js文件：

paths: {
    'npm':'node_modules',
    'home':  getDocumentBase()
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'd3': 'npm:d3/build/d3.min.js'

},

npm包已成功安装，并且类型定义文件已安装到node_modules/@types，但是当我尝试导入d3时出现问题。

import * as D3 from 'd3';

我遇到了无法找到模块'd3'的问题。

tsc -v 版本2.0.10 npm -v 版本3.10.10

我做错了什么呢？

谢谢！

- cobolstinks

Answer 1

npm install --save d3

检查package.json（依赖项）中安装的版本
前往node_modules目录下查看

只需在component.ts文件中导入d3即可在组件中使用

import * as d3 from "d3"

- user7803780

Answer 2

尝试将以下内容添加到 src/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';
}

它对我来说在早期2.x的angular包中有效。

然而，当angular/cli 1.0发布时，我创建了一个新项目（自动添加了4.0），安装了d3和@types/d3，但没有创建上面的typings条目，它可以正常工作。（我还使用webpack - 自从CLI切换到webpack以来，我就没有使用过systemjs）

祝好运！

- Bruce MacDonald