我已经看到很多关于将D3 v4正确安装到angular2中的不同页面，似乎有很多关于这个主题的不同意见。我使用angular2.0和typescript2。我无法正确安装所有内容，以便我的IDE和ts编译器可以正常查看所有部分。如果我从＆＃39; d3＆＃39;中执行了像import *这样的d3;当我做d3.line（）时，即使它在浏览器中正常运行并呈现图形线，我也会抱怨。我得到了财产＆＃39; line＆＃39;在＆＃39;类型的d3＆＃39;中不存在。我还遇到了一些问题，当我从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的专家，因为我最近才把它拿起来。
答案 0 :(得分：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）上其他库的现有依赖性，此标准捆绑包的定义无法在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
答案 1 :(得分：0)
我在自定义 area-cart.component.ts 中import * as D3 from 'd3';，并且没有来自编译器的抱怨。
在 package.json 中我有：
"@types/d3": "^3.5.38",
"d3": "^3.5.17",
版本3似乎工作正常。你真的需要D3 v4吗？
答案 2 :(得分：0)
您可以尝试：
import * as d3selection from 'd3-selection';
import 'd3-transition';
d3selection.select(...)