Webページ上の階層構造表現

Question

私は、単純なWebページ上に階層構造を表現するための適切な方法を見つけることを目的としたリサーチに取り組んでいます。 精度：膨大な量のデータです。

は、最初のいくつかの文脈付けてみましょう： レッツは、一般的に使用されて何

...あなたは複数の従業員が含まれているdepartementsで構成されている会社を持って言う：

ツリーアーキテクチャ：

しかし、私はそれが好きではありません。なぜなら、膨大な量のデータを持っていれば、いくつかのオブジェクトを探していると、それは扱いにくいかもしれないからです。ある程度の柔軟性を持って来るかもしれません

2他のアプローチ：

サークルモード：

とノードモード：私は助けることができると思い

つの機能最終的なユーザーはElastic Searchバーですが、ここでの目標はFlexBilユーザがその構造をナビゲートするためのものである。

私はJSFを使用したいと考えていますが、技術は実際には問題ではありません。概念的なフェーズです。

あなたの意見、アイデア、トレイルを共有してください...？

Answer 1

あなたが探しているように聞こえますツリー描画アルゴリズム。 、あなたは基本的な特性の三つのグループによって描画を記述することができ、グラフの描画で

：：私は簡単な概要を挙げてみましょう

• あなた描画規則、すなわちどのようノードとエッジあなたの視覚化で表現されています。可能な選択肢は次のとおりです。

  • 非交差カーブ、それらの間のとしてポイント、あなたのエッジとして、あなたのノードを表します。
    これは、ポイントを規則的なグリッド上に置くこと、ルートの周りの同心円上に置くこと、または同様のものを必要とする。また、エッジに直線、円の引数を要求することもできます。
    これはおそらく、ツリーの視覚化について話すときに考えているものです。
  • ノードをの長方形と表し、矩形をネストすることによって暗黙のうちにエッジを表します。これは一般的に、すなわち

• 一部美学はあなたが最適化したいツリーマップ、として知られているエッジ間

  • 最大化角
  • ツリーが
  をとる面積を最小限に抑えます
  • ツリーに基づいた物理モデルを構築すると、潜在的なエネルギーが最小限に抑えられます（Wikipedia：Force-directed graph drawing参照）
    ...

• また、例えば、あなたのノードやエッジに一部制約を課す可能性があります特定のノードをある位置に固定し、一定のエッジ長さまたは同様の考え方を適用する。円ベースのファッションで、いずれかのルートを置くことによって、あなたの木を描き、すでに示したとおり

  • ：今

  私は基本を説明してきたことを、私はいくつかのアプローチをリストアップしましょうノードのすべてのサブツリーをその周りに循環的に整列させることによって、ノードの位置を決定することができます。これらは

• サブツリーの配置で、主に水平方向と垂直方向のエッジに固執するあなたのツリービューに似HVレイアウトを使用circoとtwopi
• としてGraphVizツールに実装されますが、もう少し自由を可能にしています
• に似ツリーマップとして、あなたのツリーを表現...ルートが最上部に配置され、つまり、レベルごとの動作の多くの直線描画技術、その子1レベル下のいずれかを使用します上記の例。

ほとんどすべてではないこれらの技術はTassimaらによってグラフ描画のハンドブックTree-drawing chapter及び可視に記載され、可視化されます。 al。