У меня есть структура данных, которая представляет собой направленный граф, и я хочу динамически отобразить его на 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");
Возможно, вы захотите взглянуть и на другие проекты! Ниже приведены два мета-сравнения:
Отказ от ответственности: я являюсь разработчиком Cytoscape.js.
Cytoscape.js - это библиотека визуализации графов HTML5. API является сложным и следует соглашениям jQuery, включая
cy.elements("node[weight >= 50].someClass")
делает то, что вы ожидаете),cy.nodes().unselect().trigger("mycustomevent")
),Если вы думаете о создании серьезного веб-приложения с графами, вам стоит рассмотреть хотя бы Cytoscape.js. Он бесплатный и с открытым исходным кодом:
JsVIS был довольно хорошим, но медленным при работе с большими графами, и был заброшен с 2007 года.
prefuse - это набор программных инструментов для создания богатых интерактивных визуализаций данных на Java. flare - библиотека ActionScript для создания визуализаций, запускаемых в Adobe Flash Player, заброшена с 2012 года.
В коммерческом сценарии серьезный соперник наверняка [yFiles для HTML] (https://www.yworks.com/yfileshtml):
Это предлагает:
Вот образец, отдающий, который показывает большинство требуемых особенностей:
! Скриншот предоставления образца создан образцом BPMN.
Полное раскрытие: Я работаю на iWork, но на Stackoverflow я не представляю своего работодателя.
Как упомянул guruz, в JIT есть несколько прекрасных макетов графов/деревьев, включая весьма привлекательные визуализации RGraph и HyperTree.
Кроме того, я'только что выложил на github<a href="http://github.com/jackrusher/jssvggraph">- суперпростую реализацию на основе SVG<a href="- http://github.com/jackrusher/jssvggraph"> (без зависимостей, ~125 LOC), которая должна работать достаточно хорошо для небольших графиков, отображаемых в современных браузерах.