Ich versuche, die richtige Technologie für die Aktualisierung eines Projekts auszuwählen, mit der im Grunde Tausende von Punkten in einem zoombaren, verschiebbaren Diagramm dargestellt werden. Die derzeitige Implementierung mit Protovis ist unterdurchschnittlich. Schau es dir hier an:

http://www.planethunters.org/classify

Es gibt ungefähr 2000 Punkte, wenn es vollständig herausgezoomt ist. Verwenden Sie die Ziehpunkte am unteren Rand, um ein wenig zu zoomen, und ziehen Sie sie, um sie zu verschieben. Sie werden feststellen, dass es ziemlich unruhig ist und Ihre CPU-Auslastung wahrscheinlich auf einem Kern bis zu 100% steigt, es sei denn, Sie haben einen wirklich schnellen Computer. Jede Änderung des Fokusbereichs ruft ein Neuzeichnen von Protovis auf, das verdammt langsam ist und mit mehr gezogenen Punkten schlechter abschneidet.

Ich möchte einige Aktualisierungen an der Benutzeroberfläche vornehmen sowie die zugrunde liegende Visualisierungstechnologie ändern, um eine schnellere Reaktion auf Animation und Interaktion zu erreichen. Aus dem folgenden Artikel geht hervor, dass die Wahl zwischen einer anderen SVG-basierten Bibliothek oder einer Canvas-basierten Bibliothek liegt:

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

d3.js, das aus Protovis hervorgegangen ist, basiert auf SVG und istsoll besser Animationen rendern. Ich bin jedoch zweifelhaft, wie viel besser und wie hoch die Leistungsobergrenze ist. Aus diesem Grund überlege ich mir auch eine umfassendere Überarbeitung mit einer Canvas-basierten Bibliothek wieKineticJS. Bevor ich jedoch zu weit gehe, möchte ich von jemandem hören, der eine ähnliche Webanwendung mit so vielen Daten erstellt hat, und dessen Meinung einholen.

Das Wichtigste ist die Leistung, wobei der zweite Schwerpunkt auf der einfachen Hinzufügung weiterer Interaktionsfunktionen und der Programmierung der Animation liegt. Es wird wahrscheinlich nicht mehr als 2000 Punkte auf einmal geben, mit diesen kleinen Fehlerbalken auf jedem.Das Vergrößern, Verkleinern und Schwenken muss reibungslos funktionieren. Wenn die neuesten SVG-Bibliotheken diesbezüglich anständig sind, überwiegt möglicherweise die einfache Verwendung von d3 die erhöhte Konfiguration für KineticJS usw. Aber wenn die Verwendung einer Zeichenfläche einen großen Leistungsvorteil bietet, insbesondere für Benutzer mit langsameren Computern, dann ich würde es definitiv vorziehen, diesen Weg zu gehen.

Beispiel einer von NYTimes erstellten App, die SVG verwendet, aber dennoch annehmbar reibungslos animiert:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . Wenn ich diese Leistung erbringen kann und keinen eigenen Zeichencode für die Leinwand schreiben muss, würde ich mich wahrscheinlich für SVG entscheiden.

Mir ist aufgefallen, dass einige User einen Hybrid von verwendet habend3.js Manipulation kombiniert mit Canvas-Rendering. Ich kann jedoch nicht viel Dokumentation zu diesem Thema online finden oder mich mit dem OP dieses Beitrags in Verbindung setzen. Wenn jemand Erfahrung mit dieser Art von DOM-to-Canvas hat (Demo, CodeIch würde gerne auch von Ihnen hören. Es scheint eine gute Mischung aus Manipulations- und benutzerdefinierten Steuerungsmöglichkeiten für das Rendern von Daten (und damit für die Leistung) zu sein, aber ich frage mich, ob das Laden aller Daten in das DOM immer noch zu einer Verlangsamung führt.

Ich weiß, dass es einige Fragen gibt, die dieser ähnlich sind, aber keine von ihnen stellt genau das Gleiche. Danke für Ihre Hilfe.

Nachverfolgen: Die Implementierung, die ich letztendlich verwendete, ist beihttps://github.com/zooniverse/LightCurves