4

Je cherche de l'inspiration pour faire du design d'interaction sur une structure hiérarchique/arborescente. (produits avec un certain nombre de sous-produits, règles qui s'appliquent à la sélection des sous-produits).Visualisation de la hiérarchie arborescente en HTML

Je veux avoir un arbre où il y a une connexion visible entre les sous-nœuds et leur nœud parent. Et je veux aussi visualiser quelles règles s'appliquent pour les sélectionner.

règles typiques:

  • obligatoire: sélectionnez une seule d'un sous-produit
  • en option: sélectionnez 0 ou plus de plusieurs sous-produits
  • mutuelle exclusive: sélectionner une seule de plusieurs sous-produits

J'espère que vous avez l'idée.

Je suis à la recherche d'inspiration dans ce domaine. Toutes les suggestions, exemples, conseils sont les bienvenus

Répondre

4

Voici plusieurs:

Si vous êtes prêt à utiliser autre chose que html/javascript, Flare est une excellente bibliothèque pour Adobe Flash .

+0

Ces exemples de Protovis sont incroyablement beaux. Je pourrais les étudier pendant des heures. Merci de m'avoir indiqué. De retour à ma question, il y a quelques exemples qui pourraient correspondre à la structure des produits/sous-produits: Sunburst ou Icicle représentent tous les deux la hiérarchie. Mais personne ne visualise la perspective des règles. Comment visualiser que certains produits sont obligatoires, d'autres optionnels, et d'autres encore s'excluent mutuellement? –

+0

Pouvez-vous donner un exemple? Êtes-vous en train de dire qu'un utilisateur choisit une marque de voiture et a ensuite le choix pour tant de modèles mutuellement exclusifs et a ensuite des choix mutuellement exclusifs de automatique vs manuel et a ensuite des choix mutuellement exclusifs pour la couleur de la voiture, etc ... avoir les choix optionnels de lecteur DVD, GPS, etc ...? Est-ce le cas d'utilisation? Qui est l'utilisateur? Les consommateurs? Les gens du marketing? Ingénieurs? –

+0

Oui, l'exemple de la voiture est plutôt bon, en fait. (laissons pour l'instant ignorer les sélections obligatoires comme un moteur, quatre pneus, etc.). Mis à part les sélections obligatoires, il y a les facultatifs que vous mentionnez. Et aussi certains qui sont mutuellement exclusifs. Dans votre exemple, changement automatique ou manuel. L'arborescence de produits que j'essaie de visualiser est plus hiérarchique, donc les sélections entrent dans des sous-produits à n'importe quelle profondeur. Donc, sur chaque nœud d'arbre, j'ai vraiment besoin de quelque chose qui indique le type de sélection. (peut-être 'sélectionner 0..2' ou similaire sur le noeud de l'arbre) –

2

J'ai utilisé la bibliothèque Infoviz pour un tel scénario (voici le demo). Vous pouvez utiliser des couleurs de nœud distinctes pour différentes règles de sélection avec une description textuelle, bien que cela ne soit pas très intuitif au début.

L'orientation par défaut de l'arborescence est horizontale, ce qui peut sembler étrange, mais est logique lorsque vous ajoutez des noms de nœuds textuels de longueur variable.

Questions connexes