Визуализация иерархии деревьев в HTML

Я ищу вдохновение для создания дизайна взаимодействия в иерархической структуре дерева. (продукты с рядом субпродуктов, правила, применяемые для выбора субпродуктов).Визуализация иерархии деревьев в HTML

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

Типовые правила:

обязательным: выбрать только один из одного суб-продукта
Дополнительно: выбрать 0 или более из нескольких субпродуктов
взаимоисключающими: выбрать только один из нескольких субпродуктов

Надеюсь, вы поняли эту идею.

Я ищу любое вдохновение в этой области. Любые предложения, примеры, советы приветствуются

источник

2010-01-18 Jesper Rønn-Jensen

Вот несколько:

Если вы готовы использовать что-то другое, чем HTML/JavaScript, Flare отличная библиотека для Adobe Flash ,

источник

2010-01-20 06:40:37

Эти примеры Protovis просто невероятно красивы. Я мог изучать их часами. Спасибо, что указали на меня. На мой вопрос, есть некоторые примеры, которые могут подойти к структуре продуктов/субпродуктов: Sunburst или Icicle представляют собой иератичность. Но никто не видит перспективу правил. Как визуализировать, что некоторые продукты являются обязательными, другие необязательны, а другие снова являются взаимоисключающими? –

Можете ли вы привести пример? Вы говорите, что пользователь выбирает марку автомобиля, а затем имеет выбор для столь многих взаимоисключающих моделей, а затем имеет взаимоисключающий выбор автоматического vs manual, а затем имеет взаимоисключающий выбор для цвета автомобиля и т. Д. Затем они есть опциональный выбор DVD-плеера, GPS и т. д. ...? Это прецедент? Кто является пользователем? Потребители? Маркетинговые люди? Инженеры? –

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

Я использовал библиотеку Infoviz для такого сценария (вот demo). Вы можете использовать разные цвета узлов для разных правил выбора вместе с некоторым текстовым описанием, хотя сначала это было бы не очень интуитивно.

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

источник

2010-01-18 12:02:17 aaimnr

Визуализация иерархии деревьев в HTML

ответ

Смежные вопросы