0

JavaScript で特定のネットワーク グラフを実装する必要があります。InfoVis Toolkit と Protovis を見てきましたが、それらのカスタム レイアウトと多くのカスタム コードを実装する必要がありました。それらが多くの付加価値をもたらすかどうかはわかりません。このウィジェットは非常に効率的である必要があります。訪問者の多い多くの Web ページに表示されるためです。ウィジェットによって速度が低下することは望ましくありません。

このグラフのノードは html リッチです。ドロップダウン、入力要素、ポップアップなどです。したがって、div は各ノードにとって非常に意味があります。AJAX を使用して JavaScript で div を簡単に作成し、サーバーからデータを読み取ることができました。javascript でレイアウト メカニズムを実装し、jQuery を使用してノードを追加/更新/削除するときにすべてをアニメーション化します。

jQuery のみを使用することを妨げていると私が考えることができる唯一のことは、ノード間の接続です。それらを描くにはどうすればよいですか？ノードの下にRaphaelのようなものを使用して、ノードの位置と Raphael の間を調整できるかもしれませんが、Raphael を簡単に見てみると、難しいように見えます。

ノード間の接続を描画する別の簡単な方法はありますか? IE サポートは、少なくとも IE8 にとって重要です。線は、異なるタイプの接続を表すために、曲線およびパターン化（点線、二重線など）できることが好ましい。

更新：提案されたmxGraphのようなソリューションにお金を払ってもかまいません。これまでの解決策は、さまざまな接続の透明な PNG 画像を作成することです。私の状況のノードは幾分グリッドにあるため、最大数の異なる接続イメージがあり (かなり大きくなります)、それらは透過的であるため、互いの上に重ねることができます。わかる？

4

2 に答える 2

2

これはまさにmxGraphが設計されていることです (私はこの製品に取り組んでいます) が、問題はオープン ソース ソリューションが必要かどうかです。mxGraph は、それが意図された用途である場合、無料のアカデミック ライセンスの下で使用できます。

于 2010-11-15T13:26:51.320 に答える
1

RaphaelJS を使用して接続を行うだけでなく、グラフ全体を RaphaelJS で行うことができます。これは、接続のみに使用するよりもはるかに簡単です。いくつかのデモは、あなたが説明したものと似ています (ただし、デモであるため、はるかに単純です)。これは、接続が接続されたまま、ノードをドラッグする様子を示しています。これは、マウスオーバー統合を示しています。クリックに応じてポップアップを表示する主要なデモ機能のようには見えませんが、コンセプトはそこにあります。

Raphael オブジェクトは DOM 要素であるため、動作のためにハンドラーをオブジェクトにアタッチしても問題はありません (たとえば、ノードの 1 つをクリックするとメニューが表示されるなど)。そのクロスブラウザをやっています。

于 2010-11-15T11:50:43.910 に答える