nvd3 eckige Linie Update Bestellung

Question

Ich habe Probleme mit nvd3 Linien zurückziehen, wenn ich Daten außerhalb der Reihenfolge hinzufügen.

Ich versuche, ein Liniendiagramm mit eckigen nvd3 zu machen. Mein ist ein Datum-Zeit-Wert und meine Y-Achse ist eine Zahl. Ich habe eine Datenbindung eingerichtet, so dass das Diagramm aktualisiert wird, wenn meinem Scope-Objekt neue Daten hinzugefügt werden. Manchmal können die hinzugefügten Daten für ein Datum vor den vorhandenen Daten sein.

Dies führt dazu, dass die SVG-Zeile wieder in sich selbst zurückkehrt. Gibt es eine Möglichkeit, sicherzustellen, dass eine Linie immer von Punkt zu Punkt in der Reihenfolge gezeichnet wird, in der sie auf der Achse angeordnet sind, und nicht in der Reihenfolge, in der sie zum Datensatz hinzugefügt wurden?

Sie können ein Beispiel für die Art von Problem in diesem Live-Update nvd3 eckigen Plunker sehen. Hier mache ich die X und Y beide zufällig und die Linie geht überall hin.

http://plnkr.co/edit/NDxrdZBfrg6Xn29GLuk0?p=preview

setInterval(function() { 
    if (!$scope.run) return; 
    $scope.data[0].values.push({ 
    x: Math.random() - 0.5, 
    y: Math.random() - 0.5 
    }); 
    if ($scope.data[0].values.length > 20) $scope.data[0].values.shift(); 
    x++; 

    $scope.$apply(); // update both chart 
}, 500); 

my app example

Answer 1

Die Antwort.

Sortieren Sie die Daten vor der Aktualisierung des Bereichs. in diesem Beispiel so etwas wie:

// sort by value 
$scope.data[0].values.sort(function (a, b) { 
return a.x - b.x; 
}); 

wäre es besser skalierbar seiner in den neuen Daten an der richtigen Stelle in der Anordnung in erster Linie spleißen und Sortierung zu vermeiden.