Графическое отображение сетей и деревьев с помощью JavaScript

Если заниматься связыванием материалов сайта вручную, то в определенный момент возникнут проблемы управления отношениями. Структура сети может стать действительно сложной, тогда на помощь придут интерактивные графические схемы — карты контента.

Нарисовать кусочек сети на бумаге не составляет труда. Организация динамической генерации схем не так проста, но тем и интересна. Основная проблема — рисование связей. Возможностей с технологической точки зрения немало. Вот самые очевидные:
* flash,
* картинки, сделанные с помощью библиотеки GD,
* VML (да-да, он жив),
* даже HTML+CSS.

Я не стал искать готовые веб-решения для графического отображения сетей, а посмотрел в сторону деревьев. Очень быстро нашлись три варианта. Все используют heavy JavaScript. Самый красивый работает с VML. VML — это язык разметки, с помощью которого можно описывать векторные изображения в браузерах Internet Explorer.

Итак, свежий симпатичный скрипт с красочными примерами в студию! Минусов много, но идея, несомненно, хороша. Для управления связями функции просмотра будет недостаточно, так что придется дописать немного кода хотя бы для удаления связей. С этим справится даже очень средний веб-программист, так как скрипт уже поддерживает выбор узлов, и написан метод getSelectedNodes().

Можно обойтись и без VML. Посмотрите на знаменитый dTree или на его горизонтальный вариант.

Если бы я серьезно занялся доработкой какого-нибудь из перечисленных решений, то в первую очередь переделал бы деревья в сети, потом добавил бы связывание объектов с помощью drag’n’drop, а также возможность редактирования связей. Это заняло бы пару-тройку дней.