d3 与 angular2 与 angular-cli 1.0.0-beta.17

d3 with angular2 with angular-cli 1.0.0-beta.17

我在 angular2 项目中使用 D3 时遇到问题。我不断收到诸如 'time is not defined' 或 'time is not a property of typeof D3' 之类的错误。

我通过 npm 安装了 d3 并为它安装了类型:npm install d3 --save。 在我的组件中,我有 import * as d3 from 'd3'; 并且它能够很好地找到库。

我试过添加 "addons": [{ "d3" : "vendor/d3/build/d3.js"}], packages": [{ "d3" : "vendor/d3/build/d3.js"}], 在 angular-cli.json。都不行。

package.json 包含以下开发依赖项:

"devDependencies": { "@types/d3-array": "^1.0.5", "@types/d3-axis": "^1.0.5", "@types/d3-brush": "^1.0.5", "@types/d3-chord": "^1.0.4", "@types/d3-collection": "^1.0.4", "@types/d3-color": "^1.0.4", "@types/d3-dispatch": "^1.0.4", "@types/d3-drag": "^1.0.5", "@types/d3-dsv": "^1.0.29", "@types/d3-ease": "^1.0.4", "@types/d3-force": "^1.0.5", "@types/d3-format": "^1.0.5", "@types/d3-geo": "^1.2.3", "@types/d3-hierarchy": "^1.0.4", "@types/d3-hsv": "0.0.3", "@types/d3-interpolate": "^1.1.5", "@types/d3-path": "^1.0.4", "@types/d3-polygon": "^1.0.4", "@types/d3-quadtree": "^1.0.4", "@types/d3-queue": "^3.0.4", "@types/d3-random": "^1.0.5", "@types/d3-request": "^1.0.1", "@types/d3-scale": "^1.0.4", "@types/d3-scale-chromatic": "^1.0.1", "@types/d3-selection": "^1.0.5", "@types/d3-selection-multi": "^1.0.3", "@types/d3-shape": "^1.0.5", "@types/d3-time": "^1.0.4", "@types/d3-time-format": "^2.0.4", "@types/d3-timer": "^1.0.5", "@types/d3-transition": "^1.0.5", "@types/d3-voronoi": "^1.0.4", "@types/d3-zoom": "^1.0.5", "@types/jasmine": "^2.2.30", "@types/node": "^6.0.42",

依赖关系:

"@types/d3": "^4.2.38", "d3": "^4.3.0",

我在我的应用中使用了这个例子:http://codepen.io/stefanjudis/pen/gkHwJ。我究竟做错了什么?谢谢

您用作基础的示例引用了 http://d3js.org/d3.v3.min.js 中的 D3 v3,而您的应用使用的是 D3 v4,它在 API 中有重大更改。

d3.time 不再存在,因此您必须调整代码以适应新的 API。例如,代码笔示例中的第 82 行 link:

var parse = d3.time.format( '%Y-%m-%d' );

必须转换为:

var parse = d3.timeFormat( '%Y-%m-%d' );

module export on the main D3 repo index.js or in the relevant readme of the d3 time format module.

可以看出

冲洗并重复每个过时的语法(例如,d3.scale.linear 现在是 d3.scaleLinear),保留上面的 index.js 文件作为参考,我想你会摆脱所有错误。