24

ネットワーク アーキテクチャを描画するためにhttp://www.madeiracloud.comが提供するものと同様のインターフェイスを作成する必要があります(彼らが行っていることとは異なる目的で)。

基本的に、ユーザーは要素をキャンバスにドラッグ アンド ドロップし、方向矢印を使用してそれらを接続できる必要があります。

これにはどのライブラリを使用すればよいですか? 私はd3、ラファエル、およびocanvasを見ています。

4

3 に答える 3

21

Raphaël(http://raphaeljs.com/)とDracula Graph Library(http://dracula.ameisenbar.de/)を組み合わせて使用​​を開始します。

また、thejitは完璧です:

マルチツリーJavaScriptInfoVisToolkitは、Web用のインタラクティブなデータ視覚化を作成するためのツールを提供します。

http://thejit.org/

編集:

また、Processing.jsを確認することもできます

http://processingjs.org/

Processing.jsは、Web用に設計された人気のあるProcessingビジュアルプログラミング言語の姉妹プロジェクトです。Processing.jsを使用すると、データの視覚化、デジタルアート、インタラクティブアニメーション、教育用グラフ、ビデオゲームなどが、プラグインなしでWeb標準を使用して機能します。処理言語を使用してコードを記述し、それをWebページに含めると、Processing.jsが残りの作業を行います。

于 2012-04-19T16:53:39.723 に答える
5

内部でRaphael.jsを使用しているMindMapプロジェクトを見てください。

デモはhttp://kenneth.kufluk.com/google/js-mindmap/にあります。

ここに画像の説明を入力

于 2013-09-06T07:39:25.123 に答える
1

商用のコンテキストでは、HTML 用の yFilesが提供するものも確認する必要があります。

これは、「ドラッグ アンド ドロップして接続する」ユース ケースを簡単に解決する、一般的なグラフ描画および編集 JavaScript ライブラリです。オンラインで入手できる特定のマインドマップの例もあります。

マインド マップ デモ アプリケーションのスクリーンショット

ただし、このアプリケーションではノードはドラッグ アンド ドロップで作成されません。ただし、このオンラインデモで見られるように、もちろんこれも可能です。

そのライブラリの特定の強みは、ノードと接続の自動レイアウト/配置であるため、より大きなネットワークを作成したり、外部データ ソースからグラフを自動的に入力したりする場合、これらは非常に便利です。ただし、この機能セットが必要ない場合は、もちろん、より単純なソリューションも機能する可能性があります。d3 はデータの表示に重点を置いており、ユーザーの操作や対話的なグラフの作成にはあまり重点を置いていないことに注意してください。

免責事項: 私はそのライブラリを作成する会社で働いていますが、SO の雇用主を代表するものではありません。私のコメントは私自身のものです。

于 2016-02-09T18:04:02.823 に答える