我在使用带有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。我究竟做错了什么?感谢
答案 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 export或d3 time format module的相关自述文件中看到的那样。
为每个过时的语法(例如d3.scale.linear
现在是d3.scaleLinear
)进行冲洗并重复,保留上述index.js文件作为参考,我想您将摆脱所有错误