Библиотека визуализации графиков на JavaScript
https://stackoverflow.com/questions/7034
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть структура данных, которая представляет собой ориентированный граф, и я хочу динамически отображать ее на HTML-странице.Эти графы обычно состоят всего из нескольких узлов, может быть, из десяти в самом верхнем конце, поэтому я предполагаю, что производительность не будет иметь большого значения.В идеале я хотел бы иметь возможность подключить его к jQuery, чтобы пользователи могли настраивать макет вручную, перетаскивая узлы.
Примечание:Я не ищу библиотеку диаграмм.
Решение
Я только что собрал то, что вы, возможно, ищете: http://www.graphdracula.net
Это JavaScript с ориентированным расположением графов, SVG, и вы даже можете перетаскивать узлы.Все еще нуждается в некоторой доработке, но вполне пригоден для использования.Вы легко создаете узлы и ребра с помощью кода JavaScript следующим образом:
var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");
Я использовал ранее упомянутую библиотеку Raphael JS (пример graffle) плюс некоторый код для алгоритма компоновки графов на основе силы, который я нашел в сети (все с открытым исходным кодом, лицензия MIT).Если у вас есть замечания или вам нужна определенная функция, я могу ее реализовать, спрашивайте!
Возможно, вам захочется взглянуть и на другие проекты!Ниже приведены два мета-сравнения:
Социальные сетиСравнить имеет обширный список библиотек, а строка «Узел/ребро графа» будет фильтровать библиотеки визуализации графа.
DataVisualization.ch оценил множество библиотек, включая узлы/графы.К сожалению, прямой ссылки нет, поэтому вам придется отфильтровать «график»:
Вот список подобных проектов (некоторые уже упоминались здесь):
Библиотеки чистого JavaScript
вис.js поддерживает множество типов сетевых/граничных графиков, а также временные шкалы и 2D/3D-диаграммы.Автоматическая компоновка, автоматическая кластеризация, гибкий физический движок, мобильность, навигация с помощью клавиатуры, иерархическая компоновка, анимация и т. д. лицензия MIT и разработан голландской фирмой, специализирующейся на исследованиях самоорганизующихся сетей.
Cytoscape.js - интерактивный анализ и визуализация графиков с поддержкой мобильных устройств в соответствии с соглашениями jQuery.Финансируется за счет грантов НИЗ и разработан @maxkfranz (видеть его ответ ниже) при помощи нескольких университетов и других организаций.
Набор инструментов JavaScript InfoVis - Jit, интерактивная, многоцелевая платформа для рисования и компоновки графиков.См., например, Гиперболическое дерево.Создано архитектором данных Twitter. Николя Гарсиа Бельмонте и купил Сенча в 2010.
D3.js Мощная многоцелевая библиотека JS-визуализации, преемница Protovis.См. силовой граф и другие примеры графиков в галерея.
Плотли Библиотека визуализации JS использует D3.js с привязками JS, Python, R и MATLAB.См. пример nexworkx в IPython. здесь, пример человеческого взаимодействия здесь, и API для встраивания JS.
сигма.js Легкая, но мощная библиотека для рисования графиков.
jsPlumb Плагин jQuery для создания интерактивных связанных графиков
Упругий - алгоритм компоновки графиков с принудительным управлением
Обработка.js Javascript-порт библиотеки Processing от Джона Ресига
JS график это - перетаскиваемые коробки, соединенные прямыми линиями.Минимальная авторазметка строк.
Граффл RaphaelJS - пример интерактивного графика универсальной многоцелевой библиотеки векторных рисунков.RaphaelJS не может автоматически размещать узлы;для этого вам понадобится другая библиотека.
JointJS Core - Библиотека диаграмм с открытым исходным кодом Дэвида Дюрмана, имеющая лицензию MPL.Его можно использовать для создания статических диаграмм или полностью интерактивных инструментов построения диаграмм и разработчиков приложений.Работает в браузерах, поддерживающих SVG.Алгоритмы компоновки, не включенные в основной пакет
mxGraph Ранее коммерческая библиотека диаграмм HTML 5 теперь доступна в Apache v2.0.mxGraph — базовая библиотека, используемая в draw.io.
Коммерческие библиотеки
GoJS Интерактивная библиотека рисования и макетов графиков
yFiles для HTML Библиотека чертежей и макетов коммерческих графиков
Ключевые линии Набор инструментов для визуализации коммерческой сети JS
ZoomДиаграммы Коммерческая многоцелевая библиотека визуализации
Диаграмма JavaScript Syncfusion Коммерческая библиотека диаграмм для рисования и визуализации.
Заброшенные библиотеки
Веб-сайт Cytoscape Встраиваемая программа просмотра сети JS (новые функции не планируются);сменил Cytoscape.js)
Канвиз JS средство визуализации для графиков Graphviz. Заброшенный в сентябре 2013 года.
arbor.js Сложная графика с приятной физикой и приятным глазу.Заброшен в мае 2012 года.Несколько полуподдержанный вилки существуют.
jssvggraph «Самый простой из возможных алгоритмов компоновки графов с принудительной направленностью, реализованный как библиотека Javascript, использующая объекты SVG».Заброшен в 2012 году.
jsdot Клиентское приложение для рисования графиков. Заброшен в 2011 году..
Протовис Графический инструментарий для визуализации (JavaScript).Заменен на d3.
Му Колесо Интерактивное JS-представление связей и отношений (2008 г.)
JSViz Скрипт визуализации графиков 2007 года
дагре Макет графика для JavaScript
Библиотеки, не использующие Javascript
Графвиз Сложный язык визуализации графиков
- Graphviz был скомпилирован в Javascript с использованием Emscripten. здесь с интерактивная онлайн-демо здесь
Вспышка Красивое и мощное рисование графиков на основе Flash
НодБокс Визуализация графа Python
Другие советы
Отказ от ответственности:Я разработчик Cytoscape.js.
Cytoscape.js — это библиотека визуализации графиков HTML5.API является сложным и следует соглашениям jQuery, включая
- селекторы для запроса и фильтрации (
cy.elements("node[weight >= 50].someClass")делает то, что вы ожидаете), - цепочка (например,
cy.nodes().unselect().trigger("mycustomevent")), - jQuery-подобные функции для привязки к событиям,
- элементы как коллекции (например, в jQuery есть коллекции HTMLDomElements),
- расширяемость (можно добавлять собственные макеты, пользовательский интерфейс, основные функции и функции коллекции и т. д.),
- и более.
Если вы думаете о создании серьезного веб-приложения с графиками, вам следует хотя бы рассмотреть Cytoscape.js.Это бесплатно и с открытым исходным кодом:
JsVIS был довольно хорош, но медленный, с большими графиками, и от него отказались с 2007 года.
предварительный предохранитель — это набор программных инструментов для создания насыщенной интерактивной визуализации данных на языке Java. вспышка — это библиотека ActionScript для создания визуализаций, запускаемых в Adobe Flash Player, заброшенная с 2012 года.
В коммерческом сценарии серьезным участником наверняка будет yFiles для HTML:
Это предлагает:
- Легкий Импортировать пользовательских данных (эта интерактивная онлайн-демо кажется, в значительной степени делает именно то, что искал ОП)
- Интерактивное редактирование для создания диаграмм и управления ими с помощью жестов пользователя (см. редактор)
- Огромный API программирования для настройки каждого аспекта библиотеки
- Поддержка для группировка и гнездование (как интерактивно, так и через алгоритмы верстки)
- Не зависит от конкретного набора инструментов пользовательского интерфейса, но поддерживает интеграция практически в любой существующий набор инструментов Javascript (см. «интеграционные» демо)
- Автоматическая компоновка (различные стили, например «иерархический», «органический», «ортогональный», «дерево», «круговой», «радиальный» и т. д.)
- Автоматическая сложная фрезеровка кромок (ортогональная и органичная фрезеровка кромок с обходом препятствий)
- Инкрементная и частичная компоновка (добавление и удаление элементов и незначительное изменение или отсутствие вообще изменения остальной части диаграммы)
- Поддержка группировки и вложенности (как интерактивная, так и посредством алгоритмов компоновки)
- Реализации алгоритмы анализа графов (пути, центральности, сетевые потоки и т. д.)
- Использует технологии HTML 5, такие как SVG+CSS и Canvas, а также современные свойства Javascript и другие возможности ES5 и ES6 (но по той же причине не работает в IE версии 8 и ниже).
- Использует модульный API, который можно загружать по требованию с помощью загрузчиков UMD.
Вот пример рендеринга, который показывает большинство запрошенных функций:
Полное раскрытие:Я работаю в yWorks, но на Stackoverflow я не представляю своего работодателя.
Как упомянул Гуруз, ТОЧНО в срок имеет несколько прекрасных макетов графиков/деревьев, включая довольно привлекательные визуализации RGraph и HyperTree.
Кроме того, я только что создал очень простой пример на основе SVG. реализация на github (без зависимостей, ~125 LOC), что должно работать достаточно хорошо для небольших графиков, отображаемых в современных браузерах.
