Библиотека для Canvas/SVG для веб-древовидных графиков с алгоритмом компоновки?
Я ищу библиотеку, которая может рисовать интерактивные (т.е. интерактивные узлы) древовидные графики.
Что-то вроде этого, но с текстом в блоках node (т.е. узлы будут иметь переменную ширину и высоту).
![Tree Layout]()
Canviz не имеет стабильного выпуска, и из того, что я могу сказать, ProtoVis не может выполнять текстовые узлы и может выполнять только однопользовательские узлы с макетами дерева. Кто-нибудь знает о каких-либо библиотеках, чтобы сделать это в браузере?
Ответы
Ответ 1
Учебник по базовому дереву digram (вы можете расширить его, чтобы получить то, что вы хотите)
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
Ответ 2
Вам может быть интересна Cytoscape.js, библиотека визуализации и анализа графики JS с открытым исходным кодом. Он имеет встроенные жесты, поддержку сенсорных устройств и богатый API, который можно использовать для его интеграции в ваш webapp.
http://js.cytoscape.org
Cytoscape.js имеет встроенный макет breadthfirst
для деревьев и DAG, и этот макет очень эффективен в пространстве.
Существует также расширение cytoscape-dagre
для Cytoscape.js, которое позволяет использовать отличный алгоритм макета Dagre tree/DAG: https://github.com/cytoscape/cytoscape.js-dagre
Дагр производит очень эстетические результаты.
Отказ от ответственности: я работаю над Cytoscape.js
Ответ 3
Вы еще не просмотрели JIT? Я сделал некоторую работу с их радиальным графиком, и это был cinch.
Ответ 4
Так как эта картина в исходном сообщении фактически создана продуктом того же семейства продуктов, я хотел бы добавить, что "yFiles for HTML" также продается с 2012 года.
Изображение выше было создано Java-вариантом этой библиотеки. Вариант библиотеки Javascript поддерживает все алгоритмы компоновки, поддерживаемые Java-вариантом, с теми же свойствами и возможностями настройки. Они реализованы в Javascript и не требуют активного серверного компонента.
Библиотека по умолчанию использует SVG в качестве бэкэнда рендеринга, но также могут быть включены визуализации на холсте.
См. этот живой демонстрационный браузер для примера, который показывает аналогичный график (требуется браузер с поддержкой HTML5).
Отказ от ответственности: я работаю в компании, которая создает эту библиотеку, но на SO/SE я не представляю своего работодателя.
Ответ 5
Этот вопрос довольно старый и довольно высокий в результатах Google, поэтому я подумал, что обновляю его. GraphVis делает именно то, что вы хотите, на рабочем столе, основанном на Java, но это не идеально. Их описание - иерархический граф. Я искал это и наткнулся на дагра, который построен на d3. http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
JIT можно сделать, но он очень громоздкий и хрупкий.