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

Question

我正在尝试一个非常基本的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

Answer 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行代码。

http://plnkr.co/edit/bRAtP9xIiDaXnv04RAHu