web-dev-qa-db-ja.com

ダイアグラム作成用のJavascriptライブラリ？

コンピュータネットワーク図または電気回路図を作成できるJavaScriptライブラリ（無料または商用）。また、ダイアグラムなどの異なるアイテム間のアニメーションをサポートします。

ありがとう。

jquerycanvassvgjavascript
17
M99

これらの3つのライブラリをチェックして、それらが役立つかどうかを確認してください。

ラファエル

Raphaëlは小さなJavaScriptライブラリであり、Web上のベクターグラフィックスでの作業を簡素化する必要があります。たとえば、独自のチャートや画像の切り抜きと回転のウィジェットを作成する場合は、このライブラリを使用して簡単に実現できます。 Raphaël['ræfeɪəl]は、グラフィックを作成するためのベースとしてSVGW3C勧告とVMLを使用します。つまり、作成するすべてのグラフィカルオブジェクトはDOMオブジェクトでもあるため、JavaScriptイベントハンドラーをアタッチしたり、後で変更したりできます。 Raphaëlの目標は、ベクターアートの描画と互換性のあるクロスブラウザーを簡単にするアダプターを提供することです。

プロトビス

Protovisは、バーやドットなどの単純なマークを使用してデータのカスタムビューを作成します。視覚化がすぐに面倒になる低レベルのグラフィックライブラリとは異なり、Protovisは、データをエンコードする動的プロパティを介してマークを定義し、継承、スケール、およびレイアウトを使用して構築を簡素化します。 Protovisは無料でオープンソースであり、BSDライセンスの下で提供されています。 Webネイティブの視覚化にJavaScriptとSVGを使用します。プラグインは必要ありません（ただし、最新のWebブラウザーが必要です）。プログラミングの経験は役に立ちますが、Protovisはほとんどが宣言型であり、例によって学習できるように設計されています。

Processingjs

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

もともとBenFryとCaseyReasによって開発されたProcessingは、Javaに基づくオープンソースプログラミング言語として始まり、電子芸術とビジュアルデザインコミュニティがビジュアルコンテキストでコンピュータープログラミングの基礎を学ぶのを支援します。Processing .jsはこれを次のレベルに引き上げ、Processingコードを現在のバージョンのFirefox、Safari、Chrome、Opera、Internet ExplorerなどのHTML5互換ブラウザで実行できるようにします。Processing.jsは、最高のビジュアルプログラミングをWebにもたらします。処理とWeb開発者の両方。

10
AlienWebguy

答えは絶対に JointJS

15
kubudi

ダイアグラムを描くための無料のオンラインアプリを試してみてください draw.io 。ダイアグラムの描画に mxGraph ライブラリを使用します。

免責事項：

私はJGraphに関連するソフトウェア開発者です。

11
Boris Jockov

....最後になりましたが Draw2D 。

ダイアグラムを簡単に作成するためのJSライブラリです。 APIは、Java/C＃構文に似ています。有名なRaphaelJSライブラリの上の抽象化および管理レイヤー。

コード例：

      var canvas = new draw2d.Canvas("gfx_holder");

      // Create two standard nodes for "start" and "end" and link
      // this figures with a standard Connector
      //
      var start  = new draw2d.shape.node.Start();
      var end    = new draw2d.shape.node.End();

      canvas.addFigure(start, 80,180);
      canvas.addFigure(end, 450,250);

      // Add a connection via API calls between Start and Stop
      //
      var connection = new draw2d.Connection();
      connection.setSource(start.getOutputPort(0));
      connection.setTarget(end.getInputPort(0));
      canvas.addFigure(connection);
5
user1397870
  1. Googleチャート： http://code.google.com/intl/uk/apis/chart/
  2. 道場： http://dojotoolkit.org/grids-charts
  3. ExtJS： http://www.sencha.com/products/extjs/examples/#sample-
2
bravedick