d3,角度为2,角度为cli 1.0.0-beta.17

时间:2016-11-01 23:00:10

标签: angular d3.js angular-cli

我在使用带有angular2项目的D3时遇到了问题。我不断收到错误,例如“时间未定义”或“时间不是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包含以下dev依赖项:

    "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。我究竟做错了什么?感谢

1 个答案:

答案 0 :(得分:0)

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

d3.time不再存在,因此您必须将代码调整为新API。例如,您在链接的Codepen示例中的第82行:

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

必须转换为:

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

正如你可以从主要D3回购index.js上的module exportd3 time format module的相关自述文件中看到的那样。

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