Визуализация древовидной иерархии в HTML

Question

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

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

Типичные правила:

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

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

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

Answer 1

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

• http://thejit.org/
• http://www.jsviz.org/blog/
• http://vis.stanford.edu/protovis/

Если вы хотите использовать что-то кроме html / javascript, Flare - отличная библиотека для Adobe Flash.

Answer 2

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

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