Как "красиво" отобразить дерево у клиента?

Question

[Вадим]

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


Вот отображения дерева, ставшее уже стандартом де-факто:



Но, ИМХО, такой способ отображения не достаточно интуитивно понятен. Мне хотелось бы видеть на клиенте то же дерево, но в таком вот виде:



Или, например, в таком:



Т.к. изобретать вилосипедов не хочется, то, внимание, вопрос: может кто-то подсказать готовые решения, которые реализуют отображения деревьев в «красивом» виде? Идеально было б с динамической подгрузкой данных и открытием/закрытием узлов. Можно на флеше

Answer 1

[temaHT]

Посмотрите в сторону JsViz и Flare. Последний работает на базе флеш. Первый — чистый JS

Comments

[Вадим]

Интересный варианты, спасибо!

[temaHT]

Да, еще забыл. Если задача не тривиальная, и нужно делать действительно сложные вещи, то тогда можно попробовать:

Processing.js — рисует на канвасе, куча библиотек
Raphaël — Это похожий проект, только для рисования на SVG

Answer 2

[Олег Яковенко]

thejit.org/ попробуйте это. Там есть дерево как вам надо как раз thejit.org/static/v20/Jit/Examples/Spacetree/example2.html например

Answer 3

[TheHorse]

Extjs tree?

Comments

[Вадим]

Так это самый обычный способ (мой рис.1). Мне как раз интересны альтернативные варианты

[TheHorse]

блин, не дочитал вопрос…

Answer 4

[Petr Zhuchkov]

Можно попробовать такой вариант.
code.google.com/intl/ru-RU/apis/chart/interactive/docs/gallery/orgchart.html

Answer 5

[Анатолий]

А как Вы видете такое дерево:

node 0.0
    - node 1.0
        - node 2.0
        - node 2.1
        - node 2.2
    - node 1.1
        - node 2.0
        - node 2.1
        - node 2.2
    - node 1.2
        - node 2.0
        - node 2.1
        - node 2.2
- node 0.1
    - то же что и у нулевой ноды

Вы только представьте себе масштабы его, если все это расположить в ширину =) Вот по этому дефакто пока еще не переплюнул никто

Comments

[Вадим]

Вопрос-то не в этом. Деревья очень разные бывают — в т.ч. с ограничениями по числу «детей» у одного «родителя» и/или с ограничениями по глубине. Поэтому для каких-то частных случаев было бы неплохо иметь частный (отличный от стандартного и более удобный) способ отображения