Как лучше всего отображать (не упорядоченные) списки HTML в виде нисходящего дерева?

Question

UL/OL можно легко стилизовать / отображать для их естественного потока, то есть:

• корень
  • Уровень 1 Предмет 1
  • Уровень 1, предмет 2
    • Уровень 1.1, пункт 1
    • Уровень 1.1, пункт 2
      • Уровень 1.1.1 Элемент 1
  • Уровень 1 Предмет 3

И так далее...

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

Утверждается, что это лучший способ представления контента (каждый li не более 50 символов). Более интуитивно понятно увидеть разложение сверху вниз, подобное древовидной структуре с корнем вверху.

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

Мы не можем (и не хотим) использовать изображения. Пользователи вводят данные в форме, похожей на поле, и они отображаются в месте вставки (представьте себе функцию, похожую на комментарии в Facebook для вложенных списков). Есть ли способ "преобразовать" это с помощью CSS, Javascript/Jquery в древовидное представление? (или создать его "по мере продвижения"?). Не может быть ограничения по глубине, но боковая прокрутка допустима.

В естественной компоновке (LR) мы можем добиться визуального восприятия детей посредством отступов, цветового кодирования и творческого использования видимости границ. Я в конце-концов сообразил, что даже могу визуально отобразить это как дерево только с помощью конструкций HTML/CSS + javascript. Нет опыта в этом.

Будем весьма благодарны за любые идеи / указания / указатели на статьи / плагины для использования / готовые решения и т. Д.!

Answer 1

Я уверен, что это то, что вы ищете:

http://thejit.org/demos/

Попробуйте SpaceTree посередине, справа. Обратите внимание на доступный пользовательский стиль анимации и возможность перестроить график по требованию. В целом, это действительно крутой проект. :)

Чтобы использовать его со своим списком, вам нужно будет скрыть список, а затем создать собственный объект JS (обратите внимание, что это не объект JSON, независимо от того, как переменная вызывается в коде) и заполнить его, пока вы выполняете итерацию по UL и дети. Но это очень выполнимо.