Я намагаюся вибрати правильну технологію, яку слід використовувати для оновлення проекту, який, в основному, відображає тисячі балів у масштабованому, панорамуваному графіку. Поточна реалізація, використовуючи Protovis, є недостатньо ефективною. Перевірте це тут:
http://www.planethunters.org/classify
При повному зменшенні масштабів існує близько 2000 балів. Спробуйте скористатися ручками внизу, щоб трохи збільшити масштаб, і перетягніть їх, щоб обернути панораму. Ви побачите, що це досить спритно, і використання вашого процесора, ймовірно, досягає 100% на одному ядрі, якщо у вас немає справді швидкого комп'ютера. Кожна зміна зони фокусування викликає перемальовування протовісу, який досить проклятий повільно і гірший із тим, що більше очок набрано.
Я хотів би зробити деякі оновлення інтерфейсу, а також змінити базову технологію візуалізації, щоб бути більш чутливою до анімації та взаємодії. З наступної статті, схоже, що вибір є між іншою бібліотекою на основі SVG або на базі полотна:
http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/
d3.js , який виріс із протовісу, базується на SVG і повинен краще працювати з анімацією . Однак я сумніваюсь у тому, наскільки краще та яка плафона його продуктивності. З цієї причини я також розглядаю можливість більш повного капітального ремонту за допомогою бібліотеки на основі полотна на зразок KineticJS . Однак, перш ніж я занадто сильно вживаюсь у той чи інший підхід, я хотів би почути від когось, хто зробив подібну веб-програму з такою кількістю даних, і отримати їх думку.
Найголовніше - це продуктивність, з другорядним фокусом на простоті додавання інших функцій взаємодії та програмування анімації. Напевно, буде не більше 2000 балів одразу, з тими невеликими смужками помилок на кожному. Масштабування, зменшення масштабу та панорамування мають бути плавними. Якщо найсвіжіші бібліотеки SVG пристойні в цьому, можливо, простота використання d3 перевищить розширені налаштування для KineticJS тощо. Але якщо є величезна перевага для продуктивності використання полотна, особливо для людей з повільнішими комп'ютерами, то я Однозначно вважав за краще йти цим шляхом.
Приклад програми, зробленої NYTimes, яка використовує SVG, але все ще анімовує прийнятно плавно: http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . Якщо мені вдасться отримати таку виставу, і мені не доведеться писати власний код малювання полотна, я, ймовірно, пішов би на SVG.
Я помітив, що деякі користувачі використовували гібрид маніпуляції d3.js у поєднанні з відображенням полотна . Однак я не можу знайти багато документації щодо цього в Інтернеті чи зв’язатися з ОП на цій посаді. Якщо хтось має досвід роботи з подібною реалізацією DOM-to-Canvas ( демо , код ), я хотів би також почути від вас. Здається, це хороший гібрид того, що можна маніпулювати даними та мати власний контроль над тим, як їх рендерувати (і, отже, на продуктивність), але мені цікаво, чи потрібно все завантажувати в DOM, все одно сповільнить справи.
Я знаю, що є деякі існуючі запитання, подібні до цього, але жодне з них не задає те саме. Спасибі за вашу допомогу.
Наступні дії : реалізація, яку я закінчила використовувати, знаходиться за адресою https://github.com/zooniverse/LightCurves