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

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

Примечание: я не ищу библиотеку графиков.

10.08.2008 04:07:52
посмотрите на этот вопрос: stackoverflow.com/questions/8308516/multigraphs-with-javascript
linker 29.11.2011 09:44:43
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.ch оценил многие библиотеки, в том числе нод / граф. К сожалению, прямой ссылки нет, поэтому вам придется отфильтровать по «графику»:Выбор DataVisualization.ch

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

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

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

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

  • JavaScript InfoVis Toolkit - Jit, интерактивный, многоцелевой фреймворк для рисования графиков и макетов. Смотрите, например, Гиперболическое Дерево . Построенный в Твиттере датавизом архитектором Николасом Гарсиа Бельмонте и купленный Сенчей в 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 Джон Резиг

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

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

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

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

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

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

  • yFiles for 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 Графический инструментарий для визуализации (JavaScript). Заменено на d3.

  • Представление Moo Wheel Interactive JS для связей и отношений (2008)

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

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

Не-JavaScript библиотеки

916
20.11.2018 06:45:54
Да, направленные ребра возможны! Используйте g.addEdge ("cherry", "apple", {"Direct": true});
Johann Philipp Strathausen 19.10.2010 17:29:03
нужно также добавить библиотеку chart.js & chartnew.js. и это ( charts.livegap.com ) генерируется для этого
Omar Sedki 10.03.2015 07:43:17
В список можно добавить еще две заслуживающие внимания библиотеки, а именно Linkuroius.js и VivaGraphJS .
Łukasz K 17.06.2017 18:05:28
Есть ли альтернатива с открытым исходным кодом для алгоритма компоновки yFILES? Например, yworks.com/products/yfiles-layout-algorithms-for-cytoscape
Ryan Chou 18.10.2017 15:25:48
Я сделал бесплатную и легкую библиотеку, которая может быть полезна для других: github.com/n-yousefi/Arg-Graph
Naser Yousefi 9.04.2018 08:41:00

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

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

35
13.11.2014 09:47:19
Эти библиотеки кажутся немного старыми на данный момент, что люди используют сегодня? Я специально изучаю сюжет независимой серии XY.
blong 18.04.2012 20:37:44
-1 - префузия - это Java, а не JavaScript. Flare - это Flash, а не JavaScript. JsVIS глючит и устарел.
anatoly techtonik 19.04.2012 07:54:37
@animuson: еще один не по теме: OP запрашивал библиотеки JavaScript. Единственная часть о JS в ответе - это библиотека, которая не разрабатывалась с 2007 года.
Dan Dascalescu 17.11.2014 01:55:43

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

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

7
5.05.2017 12:07:54

Отказ от ответственности: я разработчик 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

47
13.03.2015 21:03:12
Все API полностью документированы. Документы даже помогут вам начать работу (например, init). Есть также примеры выполнения для отдельных API, и есть живые демонстрации. Функциональность намного выше любой библиотеки графов JS, и документы более обширны, чем большинство проектов - коммерческих или открытых. Что именно вам не хватает в документах?
maxkfranz 13.03.2015 21:02:57
Хорошо, извини, мой плохой. Я не выглядел должным образом. Да, это хорошо задокументировано.
Storm 23.03.2015 08:14:05
Есть ли способ компоновки графиков в иерархическом порядке (макет, который выглядит как дерево, но на самом деле это график, то есть есть узлы с несколькими родителями)
Mina 9.05.2016 21:43:29
И дагр, и самый широкий макет работают для этого случая
maxkfranz 12.05.2016 16:11:56
Мне нужно отредактировать график с помощью drag'n'drop стрелок, начинающихся и заканчивающихся концами. Эта библиотека говорит, что эти вещи неизменны. Так что мне нужно искать другую библиотеку ...
Eugene Gr. Philippov 7.07.2016 13:34:57

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

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

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

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

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

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

9
26.07.2017 14:13:57
Лучший набор алгоритмов, но также и самый закрытый, что делает невозможным использование в проектах с открытым исходным кодом :-(
forresto 14.03.2014 11:55:06
«Лучшая коллекция», вероятно, соответствует действительности, но «наиболее закрытая» относительна, а «невозможная» неверна: это коммерческая лицензия, поэтому, если проект с открытым исходным кодом не использует вирусную лицензию , его можно использовать в проектах с открытым исходным кодом. Конечно , с помощью проектов с открытым исходным кодом в других проектах с открытым исходным кодом является менее проблематично ...
Sebastian 20.11.2014 07:15:53
Вы, кажется, не понимаете, как работает с открытым исходным кодом. Вы хотите сказать, что ваша компания может предоставить проекту с открытым исходным кодом право использовать это программное обеспечение для бесконечных разработчиков, право распространять его среди бесконечных разработчиков, участников и тестировщиков по фиксированной единовременной стоимости? Конечно нет .
Félix Saparelli 3.06.2015 23:22:22
@ FélixSaparelli: поверьте мне: я делаю. То, что вы описываете, возможно, и подобные вещи были сделаны раньше. Вы ссылаетесь на стандартные условия лицензии, но, конечно, пользовательские соглашения возможны и были заключены ранее. Это не подходящее место для обсуждения этого вопроса. Не стесняйтесь обращаться к yWorks напрямую.
Sebastian 5.06.2015 14:10:37