Как создать очень сложную древовидную структуру в HTML

Question

В нашей игре у нас есть типичное дерево технологий, которое в настоящее время редактируется вручную - очень сложно поддерживать и подвержено ошибкам: http://igmarauders.isotx.com/library/images/a/a3/Techtree-july26-2011-vehicles-resized.png

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

Некоторые технические данные:

• Каждый узел является сущностью с уникальным идентификатором (номером)
• У каждой сущности есть список предпосылок (других сущностей)
• Исходная технология (слева) - это массив сущностей
• На карте отображаются только объекты, которые можно отследить до начальной технологии
• Уровень исследования (столбцы вверху) - это свойство, доступное для каждого объекта
• Объекты одних и тех же типов, но разных уровней (например, Assault Archos LvL 1, Assault Archos LvL 2), связаны свойством от более высокого уровня до более низкого уровня (и более высокий уровень всегда имеет более низкий уровень в качестве предварительного условия)
• Мы можем различить Technology (верхняя часть) и Vehicles (нижняя часть) по типу сущности, свойству каждой сущности.
• Фактические имена также являются свойством каждой сущности и не очень важны для самого дерева

Наконец:

• Вы можете игнорировать различие между сплошными линиями и пунктирными линиями (я даже не знаю, в чем разница на самом деле)
• Ящики, которые объединяют транспортные средства, которые разблокированы одним исследовательским проектом, приятно иметь, но не обязательны

Заранее спасибо. Я искал в Google, но все примеры «сложного дерева», которые я нашел, были по-детски просты по сравнению с моими:)

edit : Вот некоторые примеры данных в формате JSON: http://pastebin.com/Fa3JcnRw

edit 2 : Кроме того, если это имеет значение, мы используем PHP на стороне сервера, но я открыт для альтернатив - мы можем сгенерировать статический HTML, например, в сценарии сборки.

Answer 1

Я взломал альтернативную идею, вы можете увидеть ее на http://jsfiddle.net/jedidiah/sTj3E/4/embedded/result/

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

Я думаю, что было бы немного легче разобраться, чем все линии, хотя это не дало бы вам краткий обзор, вы быкликать вокруг.

edit : Вы можете увидеть код здесь http://jsfiddle.net/jedidiah/sTj3E/4/ простите беспорядок, просто быстрый пример, чтобы понять идею.

Answer 2

Итак, хотя я не могу дать вам рабочую демонстрацию, поскольку у меня просто нет времени, чтобы выяснить все связи, это то, что я предлагаю;

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

Однако возможно создание html-структуры (сетки), которая может содержать все элементы и отношения (строки).

Сами строки достаточно просты вот плагин , который позволит вам устанавливать реальные соединения не менее чем с 3 популярными библиотеками JS (jQuery, Mootools, YUI3). Оттуда вы можете построить необходимые структуры между узлами HTML.

Я бы сохранил узлы в таблице, вы можете назначить положение по умолчанию в 2-мерной сетке оттуда на основе уровня, который они имеют, но оттуда потребуется некоторый человеческий вклад, возможно, система перетаскивания, которая перемещает узлы на разных позициях в сетке, делайте грубые действия.

Это определенно возможно, но много работы. Проблема в том, что вы пытаетесь делать вещи, которые почти соответствуют функциональности Visio.

Если вы не справляетесь с этой задачей, я предлагаю вам по-другому взглянуть на отношения. Что-то вроде @Jedidiah сделало хорошее начало.

Если кто-то еще хочет что-то сделать с этим плагином / идеей, я желаю им удачи, у меня просто нет времени сейчас, извините.

Answer 3

Простого решения этого не будет.

Я бы порекомендовал создать файл SVG (стандартная векторная графика) для этого дерева.SVG - это, по сути, файл XML, в котором описываются различные объекты на холсте с использованием координат, заливок, градиентов и т. Д. Во всех современных браузерах есть встроенная поддержка файлов SVG.

Вы можете использовать PHP или почти любыеязык для генерации XML-кода файла SVG.

Я немного поиграл с этим и нашел очень полезным, если вы создаете некоторые шаблоны XML и затем заменяете только часть, отличную от одного элемента.другому.Позвольте мне привести пример: на вашей диаграмме у вас есть синие прямоугольники с текстом.Это может быть блок, для которого вы создаете шаблон XML (для этого вы можете использовать InkScape, а затем просто заглянуть в создаваемый SVG-файл).Затем просто замените координаты и текст внутри кода XML.«sprintf» в PHP - отличный инструмент для этого.

Использование SVG имеет некоторые большие преимущества: - Очень маленький размер файла - Полностью масштабируемый без потери качества (потому что он основан на векторах, а не на пикселях).- Может отображаться как встроенный объект на веб-странице.

Для написания кода, без сомнения, потребуется некоторое время, но это даст высококачественный результат.

Answer 4

Если вы не можете адаптировать или расширить что-то существующее, вам наверняка нужно будет использовать canvas .

(похоже, у вас много работы - но интересноодин.)