Angular2에 D3 v4를 올바르게 설치하십시오.

Question

D3 v4를 angular2에 올바르게 설치하면 여러 페이지가 보였습니다. 주제에 대한 의견이 많습니다. typescript2와 함께 angular2.0을 사용하고 있습니다. IDE와 ts 컴파일러가 오류없이 모든 부분을 볼 수 있도록 모든 것을 올바르게 설치하는 데 어려움이 있습니다. 'd3'에서 d3과 같은 import *를 한 경우; ts는 브라우저에서 정상적으로 실행되어 그래프 라인을 렌더링하지만 d3.line()을 수행 할 때 불평합니다. 나는 속성 '선'을 'd3 유형'유형에 존재하지 않습니다. 또한 d3 선택에서 선택 항목을 가져 왔을 때 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가 정말로 필요합니까?