Визуализация графов с помощью библиотеки arbor.js

[Amangion]

Простота использования манит использовать этот метод. Я в своё время сталкивался с подобной задачей, но мне нужно было работать с сетями Петри (Для этих целей использовал Raphaël). Если нужно рисовать только графы — хорошо, но если понадобится внести в эти графы что-то большее, мне кажется появятся трудности.

[sundoser]

Я думаю их вполне можно связать. Arbor именно отрисовку примитивов возлагает на пользователя, а этим может занятся Raphaël.

[Selmaril]

Rephael работает вроде бы с SVG, а тут все на Canvas. Получится скрещение ужа и ежа.

Меня во всех этих примерах поражает укладка графа. Обвес и отрисовку сделать не сложно, а вот уложить граф — это искусство. Вы не разбирались как устроен алгоритм укладки, скажем тут: HalfViz?

[TheShock]

Я бы не сказал, что этот алгоритм очень хорош — он просто отталкивает точки друг от дружки и они, словно мусор в мешке «утрясываются» на странице. В итоге — куча ненужных пересечений, которые осложняют чтение графа:


Вручную его можно отсортировать намного изящнее и сразу добавляется читабельность:


Это я к тому, что алгоритм по ссылке — не идеален и, кстати, довольно лёгок по своей идее и реализации.

[sundoser]

Нет. Но если мне это потребуется, то это первая библиотека которую я разберу за этим. Кстати в arborjs.org/reference расписана arbor.ParticleSystem со всеми параметрами для укладки

[TheShock]

Я вот подвигал мышкой и представляю себе уложение графа приблизительно таким — идём от центра, расходимся в разные стороны, каждая нода имеет пространство вокруг себя, которое «закрепленно» за ней. От каждой дочерной ноды идём дальше и стараемся не попасть во власть другой ноды. Ставим точку на территорию другой ноды только в крайнем случае. Алгоритм откровенно не идеальный, но получше, чем «случайный разброс», как у HalfViz.

[Selmaril]

А пересечения? На указанном графе есть циклы. Не все так просто. Когда я делал — я так и строил елочку от корня (у меня был корень), рассчитывал пересечения на уровне и старался распологать элементы по уровням с миниумом пересечений, хоть это и было реализовано только на 2 уровня. В общем там все довольно нетривиально делается. Самая фигня в том что понятие «хорошо» для укладки графа субъективно. Каоночино — иметь наименьшее число пересечений. Но есть и другие параметры субъективного качества, например средняя длинна связи, площадь, занимаемая графом, узел с акцентом (начальный). Так что… В общем я бы полапал библиотеку именно для укладки. Отрисовка это клево, но не так сложно и самому сделать.

[maashaa]

Вот ещё примерчик графов (в основе обёрнутый Raphaël).

[Exorcist]

Самое красивое и удобное на мой взгляд InfoVis Toolkit

[vividsnow]

Есть еще d3 (например: Force-Directed Graph)

[EugeneKudashev]

Есть мощный кросс-платформенный инструмент построения графов — GraphViz. Эмбеддить картинки в веб не составляет труда.

[sergeyzhuzhgov]

Большое спасибо за пример. Как раз сегодня озадачился построением такой структуры, а тут добрый волшебник подкинул готовое ).

[Nashev]

Чем в подобных задачах подход на Canvas перспективнее подхода на SVG?

[web_dev]

Здравствуйте.
Я в поиске библиотеки для визуализации графов(интерактивной).
В принципе, нашел оч много всего, но у меня еще и критерий — нужно, чтоб работало в IE 7,8,9
Кто знает, сталкавался? подскажите!

Вот списочек, может кому пригодится:

arborjs.org/
flare.prefuse.org/ //flex-flash
www.graphviz.org/Gallery.php
thejit.org/demos/
js-graph-it.sourceforge.net/index.html
jsplumb.org/jquery/demo.html
mbostock.github.com/protovis/ex/
raphaeljs.com/
www.graphdracula.net/de/showcase/
github.com/mbostock/d3/wiki/Gallery
cytoscapeweb.cytoscape.org/demos
sigmajs.org/examples.html
javascript.open-libraries.com/utilities/drawing/canviz-javascript-library/

Ну понятное дело что из этого списка мне ничего не подходит, потому что нужно обязательно IE!!! :(
Из всего перечисленного на IE8 у меня запустилось только вот это, и то со глюками.
thejit.org/demos/

Оч нравится эта библиотека. о которой пример. но увы, головная боль интернета (IE) всю малину портит… :(

Спасибо за помощь!

[vladsharikov]

Возможность добавить вес дуге и отрисовывать его имеется?