正確地將D3 v4安裝到Angular2中

Question

我已經看到很多關於正確安裝D3 v4到angular2的不同頁面，並且似乎對這個主題有不同的意見。我使用angular2.0和typescript2。我無法正確安裝所有東西，這樣我的IDE和ts編譯器就可以毫無錯誤地看到所有部件。如果我已經做了像import *一樣的d3作爲'd3';當我執行d3.line（）時，ts會抱怨，即使它在瀏覽器中正常運行並呈現圖形行。我得到的屬性'行'不存在於'd3類型'類型上。當我從d3選擇導入select時，我也遇到了無法在select（）上調用轉換的問題。

system.config.js

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // 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', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 

     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 

     'ng2-tooltip': 'node_modules/ng2-tooltip', 
     'js-data': 'npm:js-data/dist/js-data.js', 
     'js-data-http': 'npm:js-data-http/dist/js-data-http.js', 

     'jquery':'npm:jquery/', 
     'd3': 'npm:d3', 
     'd3-array': 'npm:d3-array/', 
     'd3-axis': 'npm:d3-axis/', 
     'd3-collection': 'npm:d3-collection/', 
     'd3-color': 'npm:d3-color/', 
     'd3-dispatch': 'npm:d3-dispatch/', 
     'd3-ease': 'npm:d3-ease/', 
     'd3-format': 'npm:d3-format/', 
     'd3-interpolate': 'npm:d3-interpolate/', 
     'd3-path': 'npm:d3-path/', 
     'd3-scale': 'npm:d3-scale/', 
     'd3-selection': 'npm:d3-selection/', 
     'd3-shape': 'npm:d3-shape/', 
     'd3-time': 'npm:d3-time/', 
     'd3-time-format': 'npm:d3-time-format/', 
     'd3-timer': 'npm:d3-timer/', 
     'd3-transition': 'npm:d3-transition/' 

    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { main: './main.js', defaultExtension: 'js' }, 
     rxjs: { defaultExtension: 'js' }, 
     'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' }, 

     "ng2-tooltip": { "main": "index.js", "defaultExtension": "js" }, 
     'jquery': { "main": 'dist/jquery.js', "defaultExtension": "js"}, 
     'd3': { "main": 'build/d3.min.js', "defaultExtension": "js"}, 
     'd3-array': { "main": 'build/d3-array.min.js', "defaultExtension": "js"}, 
     'd3-axis': { "main": 'build/d3-axis.min.js', "defaultExtension": "js"}, 
     'd3-collection': { "main": 'build/d3-collection.js', "defaultExtension": "js"}, 
     'd3-color': { "main": 'build/d3-color.min.js', "defaultExtension": "js"}, 
     'd3-dispatch': { "main": 'build/d3-dispatch.min.js', "defaultExtension": "js"}, 
     'd3-ease': { "main": 'build/d3-ease.min.js', "defaultExtension": "js"}, 
     'd3-format': { "main": 'build/d3-format.min.js', "defaultExtension": "js"}, 
     'd3-interpolate': { "main": 'build/d3-interpolate.min.js', "defaultExtension": "js"}, 
     'd3-path': { "main": 'build/d3-path.min.js', "defaultExtension": "js"}, 
     'd3-scale': { "main": 'build/d3-scale.min.js', "defaultExtension": "js"}, 
     'd3-selection': { "main": 'build/d3-selection.min.js', "defaultExtension": "js"}, 
     'd3-shape': { "main": 'build/d3-shape.min.js', "defaultExtension": "js"}, 
     'd3-time': { "main": 'build/d3-time.min.js', "defaultExtension": "js"}, 
     'd3-time-format': { "main": 'build/d3-time-format.min.js', "defaultExtension": "js"}, 
     'd3-timer': { "main": 'build/d3-timer.min.js', "defaultExtension": "js"}, 
     'd3-transition': { "main": 'build/d3-transition.min.js', "defaultExtension": "js"} 
    } 
    }); 
})(this); 

typings.d.ts

// Typings reference file, see links for more information 
// https://github.com/typings/typings 
// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html 
/// <reference path="./node_modules/@types/d3/index.d.ts" /> 

/// <reference path="./typings/index.d.ts" /> 
// declare var module: { id: string }; 

/// <reference path="node_modules/@types/jquery/index.d.ts" /> 
/// <reference path="node_modules/@types/d3/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-array/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-axis/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-collection/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-ease/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-dispatch/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-scale/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-selection/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-shape/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-time/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-time-format/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-timer/index.d.ts" /> 
/// <reference path="node_modules/@types/d3-transition/index.d.ts" /> 

的package.json

{ 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "@angular/upgrade": "2.0.0", 
    "@types/d3": "^3.5.36", 
    "@types/d3-array": "^1.0.5", 
    "@types/d3-axis": "^1.0.5", 
    "@types/d3-collection": "^1.0.4", 
    "@types/d3-dispatch": "^1.0.4", 
    "@types/d3-ease": "^1.0.4", 
    "@types/d3-scale": "^1.0.4", 
    "@types/d3-selection": "^1.0.4", 
    "@types/d3-shape": "^1.0.5", 
    "@types/d3-time-format": "^2.0.4", 
    "@types/d3-timer": "^1.0.4", 
    "@types/d3-transition": "^1.0.4", 
    "@types/jquery": "^2.0.32", 
    "angular2-in-memory-web-api": "0.0.20", 
    "bootstrap": "^3.3.6", 
    "core-js": "^2.4.1", 
    "d3": "^4.2.6", 
    "jquery": "^3.1.1", 
    "js-data": "^3.0.0-rc.4", 
    "js-data-http": "^3.0.0-rc.2", 
    "ng2-tooltip": "0.0.3", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.25" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.2.0", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.2", 
    "typings": "^1.3.2" 
    } 
} 

我知道我必須錯在這裏做的事情，但我遠不是angular2的專家，因爲我只是最近才選擇它。

Answer 1

您正在使用d3的v4.2.x，但類型爲v3.5.x.有關爲什麼默認版本爲3.x的說明，請參閱https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11367。

這個D3標準包發佈爲名稱爲d3的UMD模塊。目前，由於其他庫在包含在相同目錄中的傳統D3 v3.x定義（例如plottable，nvd3）上的其他庫的依賴關係，此標準束的定義不能在DefinitelyTyped/types-2.0（參見封閉PR＃10453） 。

用最真誠的希望，它仍然是一個暫時的解決辦法，誰需要佔D3版本4的定義文件可以繼續爲開發者如下：

安裝模塊級定義爲包括D3 D3的模塊標準捆綁包，使用例如npm install @types/d3-selection --save

或者，它是否適合你的使用情況，您可以嘗試angular2 D3服務：https://github.com/tomwanzek/d3-ng2-service

Answer 2

我在定製區域cart.component.ts做import * as D3 from 'd3';，並沒有從抱怨編譯器。

在的package.json我：

"@types/d3": "^3.5.38", 
"d3": "^3.5.17", 

3版似乎工作的罰款。你真的需要D3 v4嗎？