Я пытаюсь выбрать правильную технологию для обновления проекта, который в основном отображает тысячи точек в масштабируемом, панорамируемом графике. Текущая реализация с использованием 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 точек одновременно с этими маленькими барами ошибок на каждом.Увеличение, уменьшение и панорамирование должны быть плавными. Если самые последние библиотеки 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»