例えば、私がツリー構造を持っていたとしましょう。当然のことながらツリー コントロールを使用します。その GUI 要素は構造に完全にマップされるからです。
しかし、私が持っているのはグラフで、幅が広すぎて 1 つの Web ページに収まらない可能性があります。構造に本当に一致する GUI の例は思い浮かびません。私が持っているいくつかのアイデアのうち、うまく当てはまらないものは、Web 自体、ハイパーリンク、ブラウザの戻るボタン、および進むボタンです。ただし、これは一度に 1 つのノードを表示するだけです。できるだけ多くのノードを表示し、グラフの新しい領域に移動できるようにしたいと考えています。Google マップのようなものは、どの方向にも自由にスクロールできるという点で、良いモデルかもしれません。
Facebookは昔、友達を視覚化するためにこれを行っていました。予想どおり、ノードを小さなボックスとして描画し、それらを線で結びました。グラフを SVG 画像に描画したので、簡単にズームインおよびズームアウトできました。
<canvas>別のオプションは、何らかの方法でタグとスケールに描画することです。可能性はあると思いますが、よくわかりません<canvas>
別のオプションは、ユーザーが水平方向および垂直方向にスクロールできるインライン フレームまたは他のボックスに描画することです。
小さな領域で表示される巨大なグラフの動的な例については、Visuwordsをご覧ください。それらは、単語間の複数のリンクを示すグラフィカルな辞書として表示されます。
ツリーコントロールがツリー構造の場合のように、ニーズに合う既存のウィジェットはないと思います。
そうは言っても、私は間違いなくyWorks製品の1つをお勧めします。
yEdを試して、何ができるかを感じてから、非常に良いと思われるドキュメントを確認してください。彼らはまた、ライブラリにajaxとflexを提案します。これにより、ドラッグアンドドロップなどのGoogleマップを含む、Web互換の表現が提供されます。グラフビューアのデモを参照してください：http：//live.yworks.com/yfiles-ajax/Examples/Graph_Viewer .html）私は彼らのために働いていません、私は有料の顧客でさえありません、しかし私はyEdに非常に感銘を受けました。
基本的に、この種のことについて私が見た中で最高のものは、ノードをドラッグできるFlashまたはJavaのいずれかであり、エッジの張力値に基づいて自動的にストレッチ、移動、拡張します。
簡単なグーグルでこれを公開します。Java アプリケーションのバージョンを試してみましたが、基本的なレベルでは動作するようですが、おそらくあなたのニーズにはやり過ぎです。:) AJAX バージョンをチェックしてみてください。
おそらく、 jQuery でドラッグする方法を確認してください。
prefuseを試すことができます。これは、オープン ソースのインタラクティブなデータ視覚化ツールキットです。ノードグラフを他の視覚化効果とともに表示するために使用できる、非常に優れたレイアウトのコレクションがあります。このツールキットには、Java 用と Flash/Flex で使用できる Actionscript 用の 2 種類があります。