Есть ли какая-нибудь библиотека Canvas, похожая на d3.js (библиотека svg). У меня есть веб-сайт здесь, и я закодировал график с элементами svg, однако он неэффективен в браузерах смартфонов и работает очень медленно. Теперь я хочу изменить его на 2d-холст и посмотреть, лучше он или нет. Можете ли вы предложить библиотеку холстов, которая полезна для этой цели?
Спасибо...
D3 не обязательно является библиотекой только для svg — svg используется во многих случаях, но библиотека может делать любые представления, которые вы хотели бы сделать. См. этот пример параллельных координат с использованием холста в D3, автор Кай Чанг: http://bl.ocks.org/2409451.
Также см. здесь некоторые обсуждения вопросов производительности и т. д., которые могут оказаться полезными: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion
Я знаю, что опаздываю на вечеринку, но времена изменились, и я считаю, что этот вопрос заслуживает обновленного ответа. Производительность SVG значительно улучшилась за последние годы, и особенно для нетривиальных графических визуализаций она часто дает превосходную производительность; но это действительно зависит от конкретного варианта использования: если визуализация проста и состоит из тысяч элементов, особенно на мобильных устройствах, Canvas может быть более быстрым вариантом. Если визуализация почти тривиальна, WebGL дает наилучшую производительность и превосходит Canvas, особенно на мобильных устройствах!
Однако особенно WebGL, а также Canvas немного сложнее в использовании, чем декларативный подход, который использует SVG. Такие вещи, как CSS-анимация и переходы, легко выполняются с помощью SVG и обеспечивают хорошую производительность благодаря аппаратному ускорению и полной независимости от производительности JavaScript. Canvas и WebGL всегда требуют JavaScript.
Если вы посмотрите на коммерческую библиотеку рисования графиков yFiles для HTML, вы увидите, что она предлагает все три технологии. в то же время. Это связано с тем, что все три могут быть лучшим выбором, в зависимости от конкретного варианта использования.
Существует запись в блоге, в которой сравнивается производительность SVG, Canvas и WebGL, особенно в контексте визуализации графа. Он сравнивает различные размеры графиков и категории устройств. «Вывод» состоит в том, что явного победителя нет. Часто сочетание всех трех технологий дает наилучшие результаты. Однако для небольших графиков SVG в большинстве случаев дает очень хорошие результаты, и с ним приятно работать. Я бы сказал, что это также причина, по которой d3.js фокусируется на SVG, а не на Canvas и WebGL.
В этой записи блога есть интерактивная демонстрация, которая позволяет вам поиграть с различными технологиями. и увидеть их сильные и слабые стороны. Конечно, демонстрация в основном сравнивает три технологии, используемые в этой конкретной библиотеке, поэтому ваши результаты могут отличаться, но они потратили много времени на оптимизацию всех трех технологий в этой библиотеке, поэтому я думаю, что результаты не слишком предвзяты.
Отказ от ответственности: я работаю в компании, которая создает вышеупомянутую библиотеку, но я не представляю своего работодателя здесь, на SO. Думаю, то, что я сказал, должно относиться не только к этой библиотеке.
Для приложения Samsung Olympic Genome Project для Facebook мы использовали http://thejit.org, чтобы создать для приложения анимацию в стиле направленного графика. Конечно, он сильно изменен мной и другими членами моей команды и играет очень небольшую роль в приложении, но это довольно мощный фреймворк.
Chart.js — это недавно вышедшая библиотека javascript, которая создает диаграммы с использованием HTML5 для рендеринга. Он не такой многофункциональный, как D3, но он работает над тем, чтобы стать именно таким в будущем. http://www.chartjs.org/
Взгляните на Cytoscape.JS, в котором для рендеринга используется холст HTML5. На момент написания этой статьи он находился в зачаточном состоянии, но проект кажется многообещающим. Согласно вики, библиотека поддерживает как настольные, так и мобильные браузеры:
Cytoscape.js легко интегрируется в ваше веб-приложение, тем более что Cytoscape.js поддерживает как настольные браузеры, такие как Chrome, так и мобильные браузеры, например, на iPad.
