如何添加d3.js到angular2

這裏是我的packagke.json的一部分：如何添加d3.js到angular2

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

},

故宮包安裝罰款和分型已經安裝到node_modules/@類型，但是當我嘗試導入D3

import * as D3 from 'd3';

我得到找不到模塊「D3」。

TSC -v 版本2.0.10 NPM -v 3.10.10

我在做什麼錯在這裏？

謝謝！

來源

2017-02-24 cobolstinks

嘗試添加以下爲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）

祝你好運！

來源

2017-03-29 01:56:31

npm install --save d3

檢查安裝在的package.json（依賴關係）的版本去檢查它node_modules

您可以通過只在component.ts進口的組件使用D3

import * as d3 from "d3"

來源

2017-04-07 06:55:26 Manz

如何添加d3.js到angular2

回答

相關問題