2016-07-22 10 views
1

angular-nvd3ドキュメントに基づいてデモチャートを取得しようとすると、非常に基本的なangular-nvd3実証が試行されています。angular-nvd3は、d3.scaleが定義されていないことを示すさまざまなエラーを表示します。

私はまっすぐ折れ線グラフの例を使用しますが、ブラウザのコンソールでこのエラーを取得してい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) 

私がしようと、さまざまなグラフオプションを使用してプレイしましたグラフを描画するものになりますが、すべてのバリエーションはがの中にObject.nvのどこかにあることを示しているようです。しかし、私はちょうどangular-nvd3の例の正確なチャートオプションとデータを使用しています。

d3.scaleは、私が間違ってやっていることを誰でも見ることができますか?angular-nvd3を使用すると未定義ですか?

答えて

2

問題は、使用しているNVD3ライブラリがD3ライブラリのV3.xに基づいているが、D3ライブラリのv4.xを使用しているということです。通常のスケールAPIは2つのバージョン間で大幅に変更されました。

変更

<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

関連する問題