Я пытаюсь выбрать правильную технологию для обновления проекта, который в основном отображает тысячи точек в масштабируемом, панорамируемом графике. Текущая реализация с использованием Protovis неэффективна. Проверьте это здесь:

http://www.planethunters.org/classify

Есть около 2000 точек при полном уменьшении. Попробуйте использовать ручки внизу, чтобы немного увеличить масштаб, и перетащите его, чтобы перемещаться. Вы увидите, что это довольно нестабильно, и ваша загрузка процессора может возрасти до 100% на одном ядре, если у вас нет действительно быстрого компьютера. Каждое изменение в области фокуса вызывает перерисовку к Protovis, которая чертовски медленная и хуже с большим количеством нарисованных точек.

Я хотел бы внести некоторые изменения в интерфейс, а также изменить основную технологию визуализации, чтобы она была более отзывчивой с анимацией и взаимодействием. Из следующей статьи кажется, что выбор между другой библиотекой на основе SVG или библиотекой:

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

d3.js, который вырос из Protovis, основан на SVG и являетсядолжен быть лучше при рендеринге анимации, Однако я сомневаюсь, насколько лучше и каков его потолок производительности. По этой причине я также рассматриваю более полный пересмотр с использованием библиотеки на основе холста, такой какKineticJS, Однако, прежде чем я углублюсь в использование того или иного подхода, я хотел бы услышать от кого-то, кто сделал подобное веб-приложение с таким большим количеством данных, и узнать их мнение.

Самая важная вещь - производительность, с дополнительным акцентом на простоту добавления других функций взаимодействия и программирования анимации. Вероятно, будет не более 2000 точек одновременно с этими маленькими барами ошибок на каждом.Zooming in, out, and panning around need to be smooth. Если самые последние библиотеки 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 все еще медленно.

Я знаю, что есть некоторые существующие вопросы, которые похожи на этот, но ни один из них точно не задает то же самое. Спасибо за вашу помощь.

Follow-up: реализация, которую я в конечном итоге использовал, находится вhttps://github.com/zooniverse/LightCurves