Cài đặt đúng D3 v4 vào Angular2

Question

Tôi đã xem nhiều trang khác nhau về cách cài đặt đúng D3 v4 vào angular2 và dường như có rất nhiều ý kiến ​​khác nhau về chủ đề này. Tôi đang sử dụng angular2.0 cùng với typescript2. Tôi gặp khó khăn khi cài đặt mọi thứ đúng cách để trình biên dịch IDE và ts của tôi xem tất cả các phần không có lỗi. Nếu tôi đã thực hiện một cái gì đó như nhập * như d3 từ 'd3'; ts phàn nàn khi tôi làm d3.line() mặc dù nó chạy tốt trong trình duyệt và hiển thị dòng đồ thị. Tôi nhận được 'dòng' tài sản không tồn tại trên loại 'loại d3'. Tôi cũng chạy vào các vấn đề mà tôi không thể gọi chuyển tiếp trên select() khi tôi nhập khẩu lựa chọn từ d3-lựa chọn.

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

Tôi biết tôi phải làm gì đó sai ở đây nhưng tôi m xa là một chuyên gia trên angular2 kể từ khi tôi chỉ mới nhặt nó lên gần đây.

Answer 1

Bạn đang sử dụng v4.2.x của d3 nhưng cách đánh máy là dành cho v3.5.x. Tham khảo https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11367 để biết giải thích tại sao phiên bản mặc định là 3.x.

Gói tiêu chuẩn D3 này được xuất bản dưới dạng mô-đun UMD có tên d3. Hiện tại, các định nghĩa cho gói tiêu chuẩn này không thể được xuất bản trong DefinitelyTyped/types-2.0 (xem PR # 10453) do phụ thuộc hiện tại của các thư viện khác trên các định nghĩa D3 v3.x cũ (ví dụ: plottable, nvd3) có trong cùng thư mục .

Với sự chân thành hy vọng rằng nó vẫn còn là một cách giải quyết tạm thời, các nhà phát triển, những người cần một tập tin định nghĩa đại diện cho phiên bản D3 4 có thể tiến hành như sau:

Cài đặt các định nghĩa mô-đun cấp cho các module D3 bao gồm D3 gói tiêu chuẩn riêng lẻ, sử dụng ví dụ npm install @types/d3-selection --save

Ngoài ra, nếu nó hoạt động đối với trường hợp sử dụng của bạn, bạn có thể thử angular2 dịch vụ d3: https://github.com/tomwanzek/d3-ng2-service

Answer 2

tôi làm import * as D3 from 'd3'; trong tôi tùy chỉnh khu vực-cart.component.ts, và không hề phàn nàn từ trình biên dịch.

Trong package.json tôi có:

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

Phiên bản 3 dường như làm việc tốt. Bạn có thực sự cần D3 v4?