Библиотека для веб-графиков Canvas / SVG с алгоритмом верстки?

Question

Я ищу библиотеку, которая может рисовать интерактивные (то есть кликабельные узлы) древовидные графики.

Нечто подобное, но с текстом в полях узлов (то есть узлы будут иметь переменную ширину и высоту).

Canviz не имеет стабильной версии, и, насколько я могу судить, ProtoVis не может делать текстовые узлы и может делать только узлы с одним родителем с разметкой дерева.Кто-нибудь знает какие-либо библиотеки, чтобы сделать это в браузере?

Answer 1

Базовый урок по древовидной диграмме (вы можете расширить его, чтобы получить то, что вы хотите) http://www.codeproject.com/KB/scripting/graphic_javascript_tree.aspx

Это дополнительные ресурсы, на которые вы можете взглянуть =)

http://www.graphviz.org/Theory.php http://directory.google.com/Top/Science/Math/Combinatorics/Software/Graph_Drawing/

Очень надеюсь увидеть это в javascript в будущем, у меня тоже есть немало примеров использования таких классов = P

Answer 2

Вас может заинтересовать Cytoscape.js, библиотека визуализации и анализа графов JS с открытым исходным кодом. Он имеет встроенные жесты, поддержку сенсорных устройств и богатый API, который вы можете использовать для интеграции его в ваше веб-приложение.

http://js.cytoscape.org

Cytoscape.js имеет встроенный макет breadthfirst для деревьев и групп DAG, и этот макет очень экономит место.

Существует также расширение cytoscape-dagre для Cytoscape.js, которое позволяет использовать превосходный алгоритм дерева Dagre / DAG: https://github.com/cytoscape/cytoscape.js-dagre

Dagre дает очень эстетичные результаты.

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

Answer 3

Вы уже смотрели на JIT еще?Я немного поработал с их радиальным графиком, и это было легко.

Answer 4

Этот вопрос довольно старый и довольно высокий в результатах поиска Google, поэтому я решил обновить его. GraphVis делает именно то, что вы хотите в настольном Java-приложении на основе Swing, но это не идеально. Их описание представляет собой иерархический граф. Я прогуглил это и наткнулся на dagre, который построен на d3. http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

JIT можно сделать, чтобы сделать это, но это очень громоздко и хрупко.

Answer 5

Поскольку эта картинка в исходном сообщении фактически создается продуктом того же семейства продуктов, я хотел бы добавить, что "yFiles for HTML" также доступна в продаже с 2012 года.

Изображение выше было создано Java-вариантом этой библиотеки. Вариант библиотеки Javascript поддерживает все алгоритмы компоновки, которые поддерживает вариант Java, с теми же свойствами и возможностями настройки. Они реализованы в Javascript и не требуют активного серверного компонента.

Библиотека по умолчанию использует SVG в качестве бэкэнда рендеринга, но визуализация на основе Canvas также может быть включена. См. этот демонстрационный браузер , где приведен пример, показывающий похожий график (требуется браузер с поддержкой HTML5).

Отказ от ответственности : Я работаю в компании, которая создает эту библиотеку, но в SO / SE я не представляю своего работодателя.