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 文件作为参考,我想你会摆脱所有错误。
我在 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 文件作为参考,我想你会摆脱所有错误。