Ich habe eine Gruppe von Graphen, die eine Reihe von Daten für mich darstellen ( hier ), basierend auf a csv mit ungefähr 25.000 Datenzeilen mit jeweils 12 Parametern. Das Ausführen einer Interaktion (z. B. Auswählen eines Bereichs mit dem Pinsel in einem der Diagramme) ist jedoch langsam und unhandlich, ganz im Gegensatz zu die dc.js-Demo, die hier gefunden wurde , die sich auch mit Tausenden von Aufzeichnungen beschäftigt, aber flüssige Animationen beibehält, oder crossfilter-Demo hier das hat 10 mal so viele Aufzeichnungen (Flüge) wie ich.
Ich weiß, dass die Hauptrohstoffe die zwei Liniendiagramme sind, da sie Datenpunkte alle 15 Minuten für ungefähr 8 Monate haben. Wenn Sie eines von beiden entfernen, werden die Diagramme wieder reaktionsfähig, aber sie sind das Hauptmerkmal der Visualisierungen. Gibt es also eine Möglichkeit, die weniger feinkörnigen Daten anzuzeigen?
Der Code für die zwei Liniendiagramme ist spezifisch unten:
%Vor%Getrennte aber relevante Frage; Wie ändere ich die Y-Achse in den Liniendiagrammen? Standardmäßig umfassen sie nicht die höchsten und niedrigsten Werte in der Datenmenge, was seltsam erscheint.
Edit: Code, den ich geschrieben habe, um das Problem zu lösen:
%Vor%d.pointNumber ist eine eindeutige Punkt-ID für jeden Datenpunkt, kumulativ von 0 bis 22.000 ish. Nun aber ist das Liniendiagramm leer. Ich habe die Daten der Gruppe mit tempGroup.all () überprüft und jetzt hat jeder 21. Datenpunkt einen Temperaturwert, aber alle anderen haben NaN. Es ist mir nicht gelungen, die Gruppengröße zu reduzieren; es ist immer noch bei 22 Tausend oder so. Ich frage mich, ob das der richtige Ansatz ist ...
Bearbeiten 2: einen anderen Ansatz gefunden. Ich erstelle die TempGroup normal, aber dann eine andere Gruppe, die die vorhandene TempGruppe noch mehr filtert.
%Vor%Das Problem, das ich hier habe, ist, dass d.pointNumber nicht zugänglich ist, so dass ich nicht sagen kann, ob es der N-te Datenpunkt ist (oder ein Vielfaches davon). Wenn ich es einer Variablen zuweise, ist es sowieso nur ein fester Wert, also bin ich mir nicht sicher, wie ich das umgehen soll ...
Bei Leistungsproblemen mit d3-basierten Diagrammen ist der übliche Schuldige die Anzahl der DOM-Elemente, nicht die Größe der Daten. Beachten Sie, dass die Crossfilter-Demo viele Datenzeilen enthält, aber nur ein paar hundert Balken.
Es sieht so aus, als würden Sie versuchen, alle Punkte zu plotten, anstatt sie zu aggregieren. Ich nehme an, da Sie eine Zeitreihe machen, mag es nicht intuitiv sein, die Punkte zu aggregieren, aber bedenken Sie, dass Ihr Diagramm nur 1100 Punkte (die Breite) anzeigen kann. Es ist daher sinnlos, die SVG-Engine mit 25.000 zu überarbeiten.
Ich würde vorschlagen, es irgendwo zwischen 100-1000 Bins herunterzubringen, z.B. indem man jeden Tag mittelt:
%Vor%(wiederverwendbarer Durchschnitt reduzieren Funktionen aus den FAQ )
Geben Sie dann Ihren xUnits ein und verwenden Sie elasticY , um die Y-Achse automatisch zu berechnen:
Tags und Links javascript optimization d3.js dc.js crossfilter