Сетевой граф в javascript, возможно только с jQuery?

Question

Мне нужно реализовать конкретный сетевой график в JavaScript.Я посмотрел на InfoVis Toolkit и Protovis, но мне нужно было бы реализовать для них индивидуальный макет и много собственного кода.Я не уверен, что они добавляют большую ценность.Этот виджет должен быть очень эффективным, так как он будет работать на многих посещаемых веб-страницах, я не хочу, чтобы виджет что-либо замедлял.

Узлы этого графика богаты HTML.Выпадающие списки, элементы ввода, всплывающие окна и т. Д. Таким образом, элементы div имеют большой смысл для каждого узла.Я мог бы просто создать div в javascript, используя AJAX для чтения данных с моего сервера.Реализуйте механизм компоновки в javascript и анимируйте все, когда добавляете / обновляете / удаляете узлы через jQuery.

Единственное, что я могу помешать мне использовать только jQuery - это соединения между узлами.Как мне их нарисовать?Я мог бы использовать что-то вроде Рафаэль под узлами и координаты между позициями узлов и Рафаэля, но после очень краткого взгляда на Рафаэля это выглядит сложно.

Есть ли еще один более простой способнарисовать связи между узлами?Поддержка IE важна по крайней мере для IE8.Предпочтительно линии могут быть изогнутыми и с рисунком (пунктирные линии, двойные линии и т. Д.) Для представления различных типов соединений.

ОБНОВЛЕНИЕ : я не против заплатитьдля решения, как mxGraph, который был предложен.Решение, которое существует до сих пор, заключается в создании прозрачных изображений PNG различных соединений.Так как узлы в моей ситуации находятся в некоторой степени в виде сетки, существует максимальное количество различных изображений соединений (хотя они будут довольно большими), и, поскольку они прозрачные, их можно наложить друг на друга.Имеет смысл?

Answer 1

Это именно то, для чего предназначен mxGraph (я работаю над продуктом), но вопрос в том, хотите ли вы решение с открытым исходным кодом или нет.mxGraph можно использовать по бесплатной академической лицензии, если это является предполагаемым использованием.

Answer 2

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

Объекты Raphael являются элементами DOM, поэтому нет проблем с присоединением к ним обработчиков для вашего поведения (например, нажатие на один из узлов, чтобы вызвать меню, такого рода вещи), и на самом деле Raphael предоставляет некоторые удобные функции для выполнения этого кросс-браузера.