Angular2にD3 v4を正しくインストールしてください

Question

D3 v4をangular2に正しくインストールするには、多くの異なるページがありましたが、対象については数多くの意見があるようです。私はtypes2と一緒にangular2.0を使用しています。 IDEとtsコンパイラがエラーなしですべてのパーツを参照できるように、すべてを正しくインストールするのが難しいです。私が 'd3'からd3としてimport *のようなことをしたならば; tsはブラウザでうまく動作してグラフ線をレンダリングしてもd3.line（）を実行すると文句を言います。私はプロパティを取得する 'ライン'タイプ 'タイプのd3'に存在しません。私はd3-selectionから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サービス試みることができる：私は私のカスタムエリアcart.component.tsでimport * as D3 from 'd3';を行うhttps://github.com/tomwanzek/d3-ng2-service

Answer 2

を、なしから文句コンパイラ。

package.json では私が持っている：

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

バージョン3が正常に動作しているようです。 D3 v4が本当に必要ですか？