angular-nvd3 给出各种错误,指出 d3.scale 未定义
angular-nvd3 gives various errors saying that d3.scale is undefined
我正在尝试一个非常基本的 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.scale
在 Object.nv
某处的 undefined
内部.然而,我只是使用 angular-nvd3
示例中的确切图表选项和数据。
任何人都可以看到我做错了什么以及如何克服这个 d3.scale
在使用 angular-nvd3
时未定义吗?
问题是您使用的 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>
这应该可以解决问题。
我在 angular 与 Plunkr 一起工作时也遇到了一些问题,因此我不得不稍微修改您的示例,但核心更改归结为 1-liner。
我正在尝试一个非常基本的 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.scale
在 Object.nv
某处的 undefined
内部.然而,我只是使用 angular-nvd3
示例中的确切图表选项和数据。
任何人都可以看到我做错了什么以及如何克服这个 d3.scale
在使用 angular-nvd3
时未定义吗?
问题是您使用的 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>
这应该可以解决问题。
我在 angular 与 Plunkr 一起工作时也遇到了一些问题,因此我不得不稍微修改您的示例,但核心更改归结为 1-liner。