javascriptjavascriptjquerydata-structuresgraph-layout

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

просмотры: 460K

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

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

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

Библиотеки на чистом JavaScript

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

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

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

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

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

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

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

  • Springy - алгоритм компоновки графа с принудительной ориентацией

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

  • JS Graph It - блоки перетаскивания, соединенные прямыми линиями. Минимальная автоматическая раскладка линий.

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

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

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

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

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

  • yFiles для HTML Коммерческая библиотека для рисования и компоновки графиков

  • KeyLines Commercial JS инструментария для визуализации сети

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

  • Syncfusion JavaScript Diagram Коммерческая библиотека диаграмм для рисования и визуализации.

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

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

  • Средство визуализации Canviz JS для графов Graphviz. Заброшен в сентябре 2013 года.

  • arbor.js Сложная графика с хорошей физикой и приятным глазу. Заброшен в мае 2012 года. Есть несколько полуобслуживаемых вилок.

  • jssvggraph «Простейший алгоритм компоновки графа с принудительной направленностью, реализованный в виде библиотеки Javascript, использующей объекты SVG». Заброшен в 2012 году.

  • jsdot Приложение для рисования графиков на стороне клиента. Заброшен в 2011 году .

  • Protovis Graphical Toolkit для визуализации (JavaScript). Заменен на d3.

  • Интерактивное JS-представление Moo Wheel для связей и отношений (2008)

  • Скрипт визуализации графиков эпохи JSViz 2007

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

Библиотеки, не относящиеся к Javascript

Источник

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

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

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

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

http://js.cytoscape.org

Источник

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

Это предлагает:

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

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

Снимок экрана образца рендеринга, созданного демонстрацией BPMN.

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

Источник

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

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

Источник

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

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

Источник