recursion - HTML でのツリー階層の視覚化

Question

階層/ツリー構造でインタラクション デザインを行うためのインスピレーションを探しています。(多数のサブプロダクトを含むプロダクト、サブプロダクトの選択に適用されるルール)。

サブノードとその親ノードの間に目に見える接続があるツリーが必要です。また、それらを選択するためにどのルールが適用されるかを視覚化したいと考えています。

典型的なルール:

• 必須: 1 つのサブ製品から 1 つだけ選択してください
• オプション: 複数のサブプロダクトから 0 個以上を選択します
• 相互排他的: 複数のサブプロダクトから 1 つだけを選択します

理解していただければ幸いです。

この分野のインスピレーションを探しています。提案、例、ヒントは大歓迎です

Answer 1

ここにいくつかあります：

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

html/javascript 以外のものを使用する場合、Flareは Adob​​e Flash の優れたライブラリです。

Answer 2

私はそのようなシナリオに Infoviz ライブラリを使用しました (ここにデモがあります)。最初はあまり直感的ではありませんが、さまざまな選択ルールに異なるノードの色をテキストの説明と共に使用できます。

デフォルトのツリーの向きは水平で、奇妙に見えるかもしれませんが、可変長のテキスト ノード名を追加すると意味があります。