angular-nvd3给出了各种错误,说d3.scale是未定义的

时间:2016-07-22 23:10:02

标签: javascript angularjs d3.js nvd3.js angular-nvd3

我正在尝试一个非常基本的angular-nvd3概念验证,试图根据angular-nvd3文档获取演示图表。

请参阅Plunker

上的示例代码

我正在使用直线图表示例,但在浏览器控制台中出现此错误:

angular.js:12477 TypeError: Cannot read property 'category20' of undefined
    at Object.nv.utils.defaultColor (nv.d3.js:987)
    at Object.nv.models.scatter (nv.d3.js:11844)
    at Object.nv.models.line (nv.d3.js:6467)
    at Object.nv.models.lineChart (nv.d3.js:6696)
    at Object.scope.api.updateWithOptions (angular-nvd3.js:95)
    at Object.scope.api.refresh (angular-nvd3.js:45)
    at Object.<anonymous> (angular-nvd3.js:437)
    at Object.fn (angular-nvd3.js:505)
    at n.$digest (angular.js:15826)
    at n.$apply (angular.js:16097)

我玩各种图表选项试图获取任何可以呈现图表的内容,但所有变体似乎都表明d3.scaleundefined内部Object.nv。然而,我只是使用angular-nvd3示例中的确切图表选项和数据。

在使用d3.scale时,任何人都可以看到我做错了什么以及如何通过此angular-nvd3未定义?

1 个答案:

答案 0 :(得分:2)

问题是您使用的NVD3库是基于D3库的V3.x,但您使用的是D3库的v4.x.序数量表API在两个版本之间发生了显着变化。

更改

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

这应该解决问题。

我也有一些问题让角色与Plunkr合作,所以我不得不稍微修改你的例子,但核心的变化归结为1-liner。

http://plnkr.co/edit/bRAtP9xIiDaXnv04RAHu