Próbuję wybrać odpowiednią technologię do wykorzystania przy aktualizacji projektu, który generuje tysiące punktów na powiększalnym, panoramicznym wykresie. Obecna implementacja, wykorzystująca Protovis, jest słaba. Sprawdź tutaj:

http://www.planethunters.org/classify

W przybliżeniu jest około 2000 punktów. Spróbuj użyć uchwytów na dole, aby powiększyć nieco i przeciągnij go, aby przesuwać. Przekonasz się, że jest dość niepewny, a użycie procesora prawdopodobnie sięga 100% na jednym rdzeniu, chyba że masz naprawdę szybki komputer. Każda zmiana w polu ostrości wywołuje przerysowanie na protovis, które jest dość powolne i jest gorsze przy większej liczbie punktów.

Chciałbym dokonać pewnych aktualizacji interfejsu, a także zmienić podstawową technologię wizualizacji, aby lepiej reagować animacją i interakcją. Z poniższego artykułu wygląda na to, że wybór jest między inną biblioteką opartą na SVG lub bazującą na płótnie:

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

d3.js, który wyrósł z Protovis, jest oparty na SVG i jestpowinien być lepszy w renderowaniu animacji. Jednak wątpię, o ile lepiej i jaki jest jego pułap wydajności. Z tego powodu rozważam również bardziej kompletny przegląd przy użyciu biblioteki opartej na płótnie, takiej jakKineticJS. Zanim jednak zajdę za daleko, aby skorzystać z jednego lub innego podejścia, chciałbym usłyszeć od kogoś, kto wykonał podobną aplikację internetową z tak dużą ilością danych i uzyskać ich opinię.

Najważniejszą rzeczą jest wydajność, z dodatkowym naciskiem na łatwość dodawania innych funkcji interakcji i programowania animacji. Prawdopodobnie nie będzie więcej niż 2000 punktów na raz, z tymi małymi słupkami błędów na każdym z nich.Powiększanie, pomniejszanie i przesuwanie musi być płynne. Jeśli najnowsze biblioteki SVG są w tym przyzwoite, to być może łatwość korzystania z d3 przeważy nad zwiększoną konfiguracją KineticJS itd. Ale jeśli istnieje ogromna przewaga wydajności przy użyciu płótna, zwłaszcza dla osób z wolniejszymi komputerami, to ja zdecydowanie wolę iść w tę stronę.

Przykład aplikacji stworzonej przez NYTimes, która używa SVG, ale nadal animuje się płynnie:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . Jeśli uda mi się uzyskać tę wydajność i nie będę musiał pisać własnego kodu rysunkowego, prawdopodobnie wybiorę SVG.

Zauważyłem, że niektórzy użytkownicy używali hybrydyManipulacja d3.js połączona z renderowaniem płótna. Jednak nie mogę znaleźć wielu dokumentów na ten temat online ani skontaktować się z OP tego posta. Jeśli ktoś ma jakieś doświadczenie w wykonywaniu tego typu DOM-to-Canvas (próbny, kod) Wdrożenie, chciałbym również usłyszeć od Ciebie. Wydaje się, że jest to dobra hybryda umożliwiająca manipulowanie danymi i posiadanie niestandardowej kontroli nad sposobem ich renderowania (a tym samym wydajności), ale zastanawiam się, czy ładowanie wszystkiego do DOM nadal będzie spowalniało działanie.

Wiem, że istnieją pewne pytania podobne do tego, ale żaden z nich nie pyta dokładnie o to samo. Dzięki za pomoc.

Kontynuacja: implementacja, z której skończyłem, jest nahttps://github.com/zooniverse/LightCurves