5

我已经看过许多关于将 D3 v4 正确安装到 angular2 中的不同页面，并且关于这个主题似乎有很多不同的意见。我正在使用 angular2.0 和 typescript2。我很难正确安装所有内容，以便我的 IDE 和 ts 编译器看到所有部分都没有错误。如果我做了类似 import * as d3 from 'd3'; ts 在我执行 d3.line() 时会抱怨，即使它在浏览器中运行良好并呈现图形线。我得到“d3 类型”类型上不存在属性“行”。当我从 d3-selection 导入选择时，我也遇到了无法在 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);

打字.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" />

包.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 的专家，因为我最近才拿起它。

4

3 回答 3

2

您使用的是 d3 的 v4.2.x，但类型适用于 v3.5.x。有关默认版本为 3.x 的原因，请参阅https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11367 。

此 D3 标准捆绑包作为名称为 d3 的 UMD 模块发布。目前，由于其他库对包含在同一目录中的旧版 D3 v3.x 定义（例如 plottable、nvd3）的现有依赖关系，此标准捆绑包的定义无法在 DefinitiveTyped/types-2.0 中发布（请参阅已关闭的 PR #10453） .

真诚地希望它仍然是一个临时解决方法，需要代表 D3 版本 4 的定义文件的开发人员可以按照以下步骤进行：

分别安装包含 D3 标准包的 D3 模块的模块级定义，例如使用npm install @types/d3-selection --save

或者，如果它适用于您的用例，您可以尝试 angular2 d3 服务：https ://github.com/tomwanzek/d3-ng2-service

于 2016-10-01T15:31:58.877 回答
0

我import * as D3 from 'd3';在我的自定义area-cart.component.ts中做，编译器没有抱怨。

在package.json我有：

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

版本 3 似乎工作正常。你真的需要 D3 v4 吗？

于 2017-05-03T16:48:40.217 回答
0

你可以试试：

import * as d3selection from 'd3-selection';
import 'd3-transition';

d3selection.select(...)
于 2020-12-01T07:22:24.497 回答