Question

这是我的packagke.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';

我找不到模块＆＃39; d3＆＃39;。

tsc -v 版本2.0.10 npm -v 3.10.10

我在这里做错了什么？

谢谢！

Answer 1

尝试将以下内容添加到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 / cli 1.0被释放时，我创建了一个新项目（自动添加了4.0），安装了d3和@ types / d3，但没有创建上面的打字条目，它工作正常。（我也使用webpack - 自从CLI切换到webpack后我还没有使用过systemjs）

祝你好运！

Answer 2

import * as d3 from "d3"

检查package.json中安装的版本（依赖项）在node_modules

中查看它

只需导入component.ts

即可在组件中使用d3

import java.util.ArrayList;
import java.util.List;

public class Ask {

    public static void main(String[] args) {

        ArrayList<String> mentah = new ArrayList<String>();

        mentah.add("Reza");
        mentah.add("Fata");
        mentah.add("Faldy");
        mentah.add("Helsan");
        mentah.add("Dimas");
        mentah.add("Mamun");
        mentah.add("Erik");
        mentah.add("Babeh");
        mentah.add("Tio");
        mentah.add("Mamang");

        List<List<String>> result = new ArrayList<List<String>>();

        for (int j= 0; j< mentah.size() ; j+=3) {
            int end = mentah.size() <= j+2 ? mentah.size() : j+3;
            result.add(mentah.subList(j, end));
        }

        for (List<String> item : result) {
            System.out.println(" - -"+item);
        }
    }

}

如何将d3.js添加到angular2

2 个答案: