D3 Scatterplot mit Tausenden von Datenpunkten

Question

Ich möchte ein Streudiagramm mit D3 machen mit der Fähigkeit, nur einen kleinen Abschnitt zu einer Zeit mit einer Art Schieberegler über die x-Achse zu betrachten. Gibt es eine Methode in Javascript, wo ich die Daten effizient puffern kann und schnell auf die Elemente zugreifen kann, wenn der Benutzer nach links oder rechts scrollt?

Mein Ziel ist ähnlich diesem Protovis Beispiel here, aber mit der 10-fachen Menge an Daten. Dieses Beispiel drosselt, wenn ich so viele Datenpunkte mache.

Answer 1

Ich habe ein Streudiagramm mit ungefähr 10k Punkten gemacht, wo ich Teile der Handlung interaktiv filtern musste. ich eine Reihe von Tipps teilen, die für mich gearbeitet, die hoffentlich einige hoffentlich auch Ihnen helfen können:

• Verwenden Sie eine Schlüsselfunktion für Ihren .data() Operator, wie es am Ende dieses tutorial erfolgt. Der Vorteil der Verwendung von Schlüsseln besteht darin, dass Sie Elemente, die sich nicht ändern, nicht aktualisieren müssen.
• Nicht verwandt mit d3, aber ich habe meinen Datenraum in ein Raster unterteilt, so dass jeder Datenpunkt einer einzelnen Zelle zugeordnet ist (mit anderen Worten, jede Zelle ist ein Index für eine Menge von Punkten). Auf diese Weise wusste ich von x_0 bis x_1, wann ich zugreifen musste, und wusste, welche Zellen ich benötigte, und somit konnte ich auf eine viel raffiniertere Menge möglicher Datenpunkte zugreifen (ohne Iteration entlang aller Punkte).
• Vermeiden Sie Übergänge: von meinen persönlichen Erfahrungen der .transition() nicht sehr glatt ist, wenn Tausende von SVG-Elemente ausgewählt werden (es kann nun in neueren Versionen oder mit schnelleren Prozessoren besser)
• In meinem Fall war es bequemer Punkte zu machen unsichtbar (.attr("display","none")) oder sichtbar, anstatt SVG-Elemente zu entfernen und zu erstellen (ich frage mich, ob dies auch zeiteffizienter ist)