eckig-nvd3 gibt verschiedene Fehler, die sagen, dass d3.scale ist undefined

Question

Ich versuche eine sehr einfache angular-nvd3 Proof-of-Concept zu versuchen, um eine Demo-Chart zu erhalten basierend auf der angular-nvd3 Docs.

Siehe den Beispielcode bei Plunker

Ich bin die gerade nach oben Liniendiagramm Beispiel verwenden, aber diesen Fehler in der Browser-Konsole bekommen:

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) 

ich mit verschiedenen Diagrammoptionen versuchen, gespielt habe zu allem, was ein Diagramm rendern würde, aber alle Variationen scheinen darauf hinzuweisen, dass d3.scaleundefined innerhalb von Object.nv irgendwo ist. Dennoch verwende ich nur die genauen Diagrammoptionen und Daten aus den angular-nvd3 Beispielen.

Kann jemand sehen, was ich falsch mache und wie man hinter diese d3.scale ist undefined bei der Verwendung angular-nvd3?

Answer 1

Das Problem ist, dass die NVD3-Bibliothek, die Sie verwenden, auf V3.x der D3-Bibliothek basiert, aber Sie verwenden v4.x der D3-Bibliothek. Die ordinale Skalierungs-API hat sich im Wesentlichen zwischen den beiden Versionen geändert.

ändern

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

zu

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

und dass das Problem beheben sollte.

Ich hatte auch einige Probleme eckig mit Plunkr zu arbeiten, so musste ich Ihr Beispiel ein wenig ändern, aber die Kernänderung kommt auf den 1-Liner.

http://plnkr.co/edit/bRAtP9xIiDaXnv04RAHu