NVD3 Liniendiagramm mit Echtzeitdaten

Question

Ich habe ein sehr einfaches Liniendiagramm mit NVD3.js geschrieben. Ich habe ein einfaches Nachziehen auf Timer Basis geschrieben, gezogen von Beispielen, die ich gesehen habe, aber ich habe den Fehler

Uncaught Typeerror: kann Eigenschaft ‚y‘ undefinierter

Die JS lesen ist

var data = [{ 
     "key": "Long", 
     "values": getData() 
    }]; 
    var chart; 

    nv.addGraph(function() { 
      chart = nv.models.cumulativeLineChart() 
         .x(function (d) { return d[0] }) 
         .y(function (d) { return d[1]/100 }) 
         .color(d3.scale.category10().range()); 

     chart.xAxis 
      .tickFormat(function (d) { 
       return d3.time.format('%x')(new Date(d)) 
      }); 

     chart.yAxis 
      .tickFormat(d3.format(',.1%')); 

     d3.select('#chart svg') 
      .datum(data) 
      .transition().duration(500) 
      .call(chart); 

     nv.utils.windowResize(chart.update); 

     return chart; 
    }); 


    function redraw() { 
     d3.select('#chart svg') 
      .datum(data) 
      .transition().duration(500) 
      .call(chart); 
    } 

    function getData() { 
     var arr = []; 
     var theDate = new Date(2012, 01, 01, 0, 0, 0, 0); 
     for (var x = 0; x < 30; x++) { 
      arr.push([theDate.getTime(), Math.random() * 10]); 
      theDate.setDate(theDate.getDate() + 1); 
     } 
     return arr; 
    } 

    setInterval(function() { 
     var long = data[0].values; 
     var next = new Date(long[long.length - 1][0]); 
     next.setMonth(next.getMonth() + 1) 
     long.shift(); 
     long.push([next.getTime(), Math.random() * 100]); 
     redraw(); 
    }, 1500); 

Answer 1

Zweite Antwort (nach Kommentar)

ich source for cumulativeLineChart sah. Sie können sehen, dass die Eigenschaft display.y bei der Erstellung des Diagramms erstellt wird. Es beruht auf einer privaten Methode: "indexieren". Wenn ein Derivat dieser Methode veröffentlicht wurde, könnten Sie vielleicht etwas wie chart.reindexify() vor dem Neuzeichnen tun.

Als vorübergehende Lösung können Sie das Diagramm bei jedem Update von Grund auf neu erstellen. Wenn Sie den Übergang entfernen, scheint das in Ordnung zu sein. Beispiel jsfiddle: http://jsfiddle.net/kaliatech/PGyKF/.

erste Antwort

Ich glaube, es gibt Fehler in cumulativeLineChart. Es scheint, dass das kumulativeZeileChart dynamisch eine "display.y" -Eigenschaft den Datenwerten in der Reihe hinzufügt. Diese Eigenschaft wird jedoch nicht neu generiert, wenn der Serie für ein Neuzeichnen neue Werte hinzugefügt werden. Ich weiß es sowieso nicht, um es zu machen, obwohl ich neu bei NVD3 bin.

Benötigen Sie wirklich ein CumulativeLineChart, oder wäre ein normales Liniendiagramm ausreichend? Wenn ja, hatte ich die folgenden Änderungen an Ihrem Code zu machen:

• Wechsel von cumulativeLineChart zu Linechart
• Wechsel von unter Verwendung von 2 Dimension Arrays von Daten, auf die Verwendung Objekte von Daten (mit x, y Dies wird wahrscheinlich im Zusammenhang mit Eigenschaften)
  • (ich bin mit NVD3 nicht vertraut genug, um zu sagen, welchen Datenformaten erwartet wird. Der offensichtlich 2D-Array für die anfänglichen Lasten funktioniert, aber ich denke, es ist für die nachfolgende redraws nicht funktioniert. Das gleiche Problem, das Sie mit CumulativeLineChart haben würde beheben cumulativeLineChart auch sollten Objekte zu ändern, aber es schien nicht zu)

Ich habe auch die folgenden, wenn auch nicht so wichtig.

• Modified Ihre getData Funktion zu Erstellen Sie eine neue Instanz von Datum, um unerwartete Folgen der Freigabe einer Referenz zu vermeiden, wenn das Datum inkrementiert wird.

• Die Aktualisierungsintervallfunktion wurde geändert, um neue Daten in Inkrementen von Tagen (nicht Monaten) mit y-Werten im selben Bereich wie die getData-Funktion zu generieren.

Hier ist ein Arbeits jsfiddle mit diesen Änderungen:

• http://jsfiddle.net/kaliatech/4TMMD/

Answer 2

ich in der gleichen Ausgabe lief. Ich habe die y() Funktion auf den Linien von

.y(function(d) { return d.display.y }) 

zu

.y(function(d) { return d.display ? d.display.y : d.y }) 

Dies wird von dem Fehler befreit. Offensichtlich wird der (nicht existierende) indizierte Wert im Fehlerfall nicht angezeigt, aber nach meiner Erfahrung wird das Diagramm wieder mit der Anzeige aktualisiert, und es sieht korrekt aus.

Answer 3

Ich fand, was ich denke, ist eine bessere Lösung. Das Problem tritt auf, weil das kumulative Diagramm die Y-Funktion während der Verarbeitung festlegt. Wann immer Sie das Diagramm aktualisieren möchten, setzen Sie es zunächst auf einen Standardwert zurück, der das korrekte ursprüngliche y zurückgibt. In Ihrer Funktion Bildneuaufbau tun dies vor dem Update:

chart.y(function (d) { return d.y; }); 

Noch besser wäre es, wenn die kumulative Chart dies für sich selbst tun könnte (speichern Sie die ursprünglichen Zugriffsfunktion, bevor die neue Einstellung, und es vor der erneuten Indizierung zurückgestellt) . Wenn ich eine Chance bekomme, werde ich versuchen, eine Lösung zu finden.