Библиотеки визуализации графов в JavaScript

У меня есть структура данных, которая представляет собой направленный график, и я хочу динамически отображать это на HTML-странице. Эти графики обычно состоят из нескольких узлов, может быть, десяти в самом верхнем конце, поэтому я предполагаю, что производительность не будет большой проблемой. В идеале я хотел бы подключить его с помощью jQuery, чтобы пользователи могли настроить макет вручную, перетаскивая узлы.

примечание: Я не ищу библиотеку диаграмм.

5 ответов


Я только что собрал то, что вы, возможно, ищете: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). Если у вас есть какие-либо замечания или вам нужна определенная функция, я могу ее реализовать, просто спросите!


возможно, вы захотите взглянуть и на другие проекты! Ниже приведены два мета-сравнения:

  • SocialCompare имеет обширный список библиотек, и линия" Node / edge graph " будет фильтровать для визуализации графа.

  • DataVisualization.ч уже оценили многие библиотеки, в том числе узловые/графовые. К сожалению, нет прямой ссылки, поэтому вам придется фильтровать для "graph":Selection DataVisualization.ch

вот список подобных проектов (некоторые из них уже упоминались здесь):

Чистые Библиотеки JavaScript

  • vis.js поддержка многих типов сетевых / краевых графиков, а также графиков и 2D / 3D-диаграмм. Авто-макет, авто-кластеризация, пружинящий физический движок, передвижн-содружественный, навигация клавиатуры, иерархический план, одушевленност etc. MIT licensed и разработана голландской фирмой, специализирующейся на исследованиях самоорганизующихся сетей.

  • Cytoscape.js - интерактивный анализ и визуализация графика с мобильной поддержкой, следуя соглашениям jQuery. Финансируется через гранты NIH и разработан by @maxkfranz (см. его ответ ниже) С помощью нескольких университетов и другие организации.

  • Инструментарий JavaScript InfoVis - Jit, интерактивный, многоцелевой графический рисунок и структура макета. См., например,Гиперболическое Дерево. Построенный архитектором Twitter dataviz Николя Гарсия Бельмонте и купил Сенча в 2010 году.

  • D3.js мощная многоцелевая библиотека визуализации JS, преемник Protovis. Увидеть форс-ориентированный граф пример и другие примеры графиков в галерея.

  • Plotly это библиотека визуализации JS использует D3.JS с привязками JS, Python, R и MATLAB. См. пример nexworkx в IPython здесь пример взаимодействия человека здесь и JS Embed API.

  • Сигма.js легкая, но мощная библиотека для рисования графики

  • jsPlumb jQuery-плагин для создания интерактивных связных графов

  • пружинистой - алгоритм компоновки силового графа

  • обработка.js Javascript порт библиотеки обработки по John Resig

  • JS график это - перетаскивание коробок, Соединенных прямыми линиями. Минимальный автоматическ-план русло.

  • RaphaelJS по graffle по - пример интерактивного графика универсальной многоцелевой библиотеки векторного рисования. RaphaelJS не может автоматически компоновать узлы; для этого вам понадобится другая библиотека.

  • Ядро JointJS - MPL-лицензированная библиотека диаграмм с открытым исходным кодом Дэвида дурмана. Его можно использовать для создания статических диаграмм или полностью интерактивных инструментов построения диаграмм и приложений. Работает в браузерах поддержка SVG. Алгоритмы компоновки не включены в основной пакет

  • mxGraph ранее коммерческий HTML в библиотеке 5 диаграмм, теперь доступен под Apache версии 2.0. mxGraph-базовая библиотека, используемая в ничья.io.

коммерческие библиотеки

  • GoJS интерактивная графическая библиотека рисования и компоновки

  • yFiles для HTML-код коммерческий график рисунок и библиотека макета

  • KeyLines коммерческий JS Network visualization toolkit

  • ZoomCharts коммерческая многоцелевая библиотека визуализации

заброшенный библиотеки

  • Cytoscape Web встраиваемый JS Network viewer (никаких новых функций не планируется; успешно Cytoscape.в JS)

  • Canviz JS рендерер для графов Graphviz. бросил В сентябре 2013 года.

  • Арбор.js сложные графики с хорошей физикой и глаз конфеты. Брошенные в мае 2012 года. Несколько полу-сохранить - Форкс.

  • jssvggraph " реализован простейший алгоритм компоновки графа, ориентированный на силу как библиотека Javascript, которая использует объекты SVG". Брошенные в 2012 году.

  • jsdot применение чертежа диаграммы стороны клиента. заброшен в 2011.

  • Protovis графический инструментарий для визуализации (JavaScript). Заменены Д3.

  • МОО Колеса интерактивное представление JS для соединений и отношений (2008)

  • JSViz 2007-эра графической визуализации скрипта

  • дагре макет графика для JavaScript

Библиотеки Без Javascript


отказ от ответственности: я разработчик Cytoscape.js

Cytoscape.js-это библиотека визуализации графов HTML5. API является сложным и следует соглашениям jQuery, включая

  • селекторы для запросов и фильтрации (cy.elements("node[weight >= 50].someClass") делает много, как и следовало ожидать),
  • цепочки (например,cy.nodes().unselect().trigger("mycustomevent")),
  • библиотека jQuery функции для привязки к событиям,
  • элементы как коллекции (например, jQuery имеет коллекции HTMLDomElements),
  • расширяемость (можно добавлять пользовательские макеты, UI, основные и коллекционные функции и т. д.),
  • и многое другое.

Если вы думаете о создании серьезного веб-приложения с графиками, вы должны, по крайней мере, рассмотреть Cytoscape.js. Это бесплатно и с открытым исходным кодом:

http://js.cytoscape.org


JsVIS было довольно приятно, но медленно с большими графиками и было оставлено с 2007 года.

prefuse представляет собой набор программных средств для создания интерактивных визуализаций данных в Java. вспышка - библиотека ActionScript для создания визуализаций, запущенных в Adobe Flash Player, заброшенном с 2012 года.


в коммерческом сценарии серьезным конкурсантом наверняка является yFiles для HTML:

гости:

  • легко импорт пользовательских данных (это интерактивная онлайн демо Кажется, в значительной степени делать именно то, что OP искал)
  • Интерактивное редактирование для создания и редактирования диаграмм с помощью жестов пользователя (см. Полный редактор)
  • огромный Программирование В API для настройки каждого аспекта библиотеки
  • поддержка группировка и вложение (как интерактивные, так и через алгоритмы компоновки)
  • не зависит от набора инструментов specfic UI, но поддерживает интеграция практически в любой существующий инструментарий Javascript (см. демо-версии"интеграция")
  • автоматический макет (различные стили, такие как "иерархический", "органический", " ортогональный", "дерево", "круговое", "радиальное" и многое другое)
  • автоматическая изощренная трасса края (ортогональная и органическая трасса края с избеганием препоны)
  • инкрементный и частичный макет (добавление и удаление элементов и только немного или вообще не изменение остальной части диаграммы)
  • поддержка группировки и вложенности (как интерактивные, так и через алгоритмы компоновки)
  • реализации алгоритмы анализа графов (пути, centralities, сетевых потоков и т. д.)
  • использует технологии HTML 5, такие как SVG+CSS и Canvas и современный Javascript, используя свойства и другие функции ES5 и ES6 (но по той же причине не будет работать в IE версии 8 и ниже).
  • использует модульный API, который может быть загружен по требованию с помощью загрузчиков UMD

вот пример рендеринга, который показывает большинство запрошенных функций:

Screenshot of a sample rendering created by the BPMN demo.

полное раскрытие: я работаю для yWorks, но на Stackoverflow я не представляю своего работодателя.


как упоминал гуруз,JIT имеет несколько прекрасных макетов графика / дерева, включая довольно привлекательные визуализации RGraph и HyperTree.

кроме того, я только что поставил супер простой SVG-based реализация на github (без зависимостей, ~125 LOC), который должен работать достаточно хорошо для небольших графиков, отображаемых в современных браузерах.