angular-nvd3 给出各种错误，说 d3.scale 未定义答案

【问题标题】：angular-nvd3 gives various errors saying that d3.scale is undefinedangular-nvd3 给出各种错误，说 d3.scale 未定义
【发布时间】：2016-07-22 23:10:01
【问题描述】：

我正在尝试一个非常基本的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 示例的确切图表选项和数据。

谁能看到我做错了什么以及如何在使用angular-nvd3 时克服这个d3.scale 未定义？

【问题讨论】：

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

【解决方案1】：

问题是您使用的 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

【讨论】：