Вопрос по html5 – HTML5 альтернативы холстам для d3.js, библиотека визуализации графиков

20

Есть ли библиотека Canvas, похожая на d3.js (это библиотека svg). У меня есть сайтВот и я закодировал график с элементами svg, однако он неэффективен в браузерах смартфонов и работает так медленно. Теперь я хочу изменить его с помощью типа 2D-холста и посмотреть, лучше это или нет. Можете ли вы предложить библиотеку холста, которая будет полезна для этой цели?

Спасибо...

Ваш Ответ

5   ответов
23

о многих случаях, но библиотека может делать любые представления, которые вы хотели бы сделать. Посмотрите этот пример параллельных координат, используя canvas в D3, автор Kai Chang:http: //bl.ocks.org/240945

Также смотрите здесь для обсуждения вопросов производительности и т. Д., Которые могут быть полезны:https: //groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussio

Есть ли сравнение производительности SVG против CANVAS? кажется, что canvas намного лучше, но для визуализации данных не так много библиотек, ориентированных на canvas, как D3 для svg Phyo Arkar Lwin
@ V3ss0n: Для сравнения SVG и холста, посмотрите на сравнение, представленное наOpenLayers website. amergin
6

Samsung Олимпийский Геном Проект facebook приложение, мы использовалиhttp: //thejit.or, чтобы сделать анимацию в стиле форсированного графа для приложения. Конечно, он сильно изменен мной и другими членами моей команды и играет очень небольшую роль в приложении, но это довольно мощная структура.

Какова совместимость для этой библиотеки? dax
4

Cytoscape.JS, который использует холст HTML5 для рендеринга. На момент написания этой статьи это только начало, но проект выглядит многообещающим. Согласно ее вики библиотека поддерживает как настольные, так и мобильные браузеры:

Cytoscape.js легко интегрируется в ваше веб-приложение, тем более что Cytoscape.js поддерживает как настольные браузеры, такие как Chrome, так и мобильные браузеры, как на iPad.

Хорошее использование различных слоев холста для оптимизации перерисовки взаимодействия с пользователем! Пораженный. Joseph Lust
Чувак, большое спасибо за упоминание этого. Сегодня я прошел через целую кучу библиотек JS, включая D3, JIT, Arbor, Sigma и еще много чего, и все они либо безумные (D3), либо абсолютно негибкие (JIT, ...). Похоже, это может спасти мой день. kralyk
4

которая создает графики для рендеринга с использованием HTML5. Это не такая особенность, как D3, но она работает, чтобы стать именно такой в будущем.http: //www.chartjs.org

3

что опоздал на вечеринку, но времена изменились, и я считаю, что этот вопрос заслуживает обновленного ответа. С годами производительность SVG значительно улучшилась, и особенно для нетривиальных графоподобных визуализаций, она часто дает превосходную производительность; но это действительно зависит от конкретного варианта использования: если визуализация проста и состоит из тысяч элементов, особенно на мобильных устройствах, Canvas может быть более быстрым вариантом. Если визуализация почти тривиальна, WebGL обеспечивает лучшую производительность и опережает Canvas - особенно на мобильных устройствах!

Однако WebGL особенно, а также Canvas немного сложнее в использовании, чем декларативный подход, который использует SVG. Такие вещи, как CSS-анимации и переходы, легко сделать с помощью SVG и обеспечить хорошую производительность благодаря аппаратному ускорению и полной независимости от производительности JavaScript. Canvas и WebGL всегда требуют JavaScript.

Если вы посмотрите на коммерческую библиотеку для рисования графиковyFiles для HTML вы увидите, что он предлагает все три технологии одновременно. Это потому, что все три могут быть лучшим выбором, в зависимости от конкретного варианта использования.

Eстьзапись в блог который сравнивает производительность SVG, Canvas и WebGL, особенно в контексте визуализации графиков. Он сравнивает различные размеры графиков и категории устройств. «Вывод» заключается в том, что нет явного победителя. Часто сочетание всех трех технологий дает наилучшие результаты. Однако для небольших графиков SVG большую часть времени дает очень хорошие результаты и работать с ним приятно. По этой же причине я бы сказал, что d3.js фокусируется на SVG, а не на Canvas и WebG

Есть интерактивный Демо Ссылка на эту запись в блоге позволяет вам поиграть с различными технологиями и увидеть их сильные и слабые стороны. Конечно, демонстрация в основном сравнивает три технологии, используемые в этой конкретной библиотеке, поэтому ваши результаты могут отличаться, но они потратили много времени на оптимизацию всех трех технологий в этой библиотеке, поэтому я думаю, что результаты не слишком предвзяты.

Disclaimer: я работаю в компании, которая создает вышеупомянутую библиотеку, но я не представляю своего работодателя здесь на SO. Я думаю, что то, что я сказал, должно быть действительно не только для этой библиотеки.

Похожие вопросы