javascript - 長方形を結ぶ線のアルゴリズム

Question

長方形の間に接続線を描画するためのアルゴリズムまたはサンプルソリューションを探しています。私の場合、長方形はガントチャートの要素であり、接続は依存関係を示します。RaphaelJSライブラリを使用して長方形と線を描画しています。したがって、JavaScriptのソリューションが最適ですが、メタ言語または他の同様のJSのアルゴリズムも優れています。

見栄えのする例を見つけましたが、誰かが何か他のことを知っているかもしれません。

私の場合、いくつかの関連する要件があります。

1. 水平線と垂直線のみが許可されます
2. 線は互いに交差してはいけません
3. 線は長方形と交差してはいけません私はこれに似た何かを達成したいと思っています：

Answer 1

javascriptのガントチャートを探しているようです。これをチェックしてください：

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml

• 編集可能なチャート
• JavaScriptAPIによるフルコントロール
• マルチブラウザ/マルチプラットフォームのサポート
• XMLからの読み込み
• XMLへのシリアル化
• 移動可能/サイズ変更可能なアクティビティ
• 組み込みの編集メニューに加えて、カスタムdhtmlxMenuサポート
• 拡張プロパティポップアップ
• オプションのツリービュー
• カスタマイズ可能なタスクサブスクリプション
• パーセント-完全なシェーディング
• 依存関係の矢印
• 高速でスムーズなレンダリング
• 組み込みの制約チェック
• 印刷に適したモード

http://www.bryntum.com/products/gantt/

• 完全にWeb標準に基づいて構築-HTML/CSS / JavaScript
• 任意のサーバー（PHP、Java、ASP.NET）で使用
• 依存関係、リード/ラグ、およびクリティカルパスをサポートします
• PDF / PNGにエクスポート、MSProjectのインポート
• プロジェクト、タスク、およびリソースのカレンダー
• シエスタでテストされたユニット

http://gxt-scheduler.com/

• 完全にWeb標準に基づいて構築-HTML/CSS / GWT
• あらゆるタイプのバックエンドと統合
• 完全にテーマ化可能で、基本的なHTML/CSSの知識のみが必要です
• アイテムを簡単にドラッグアンドドロップしてサイズ変更
• すべての主要なブラウザをサポートします

http://gantter.com/

• グーグルドライブ統合
• 無料のクラウドベースのプロジェクトスケジューリング

http://gantt.twproject.com/

• インプレース編集
• ドラッグドロップ
• ズーミング
• 行う/元に戻す
• 複数の依存関係
• 完全編集
• 日付のショートカット
• cssスキン
• 複数のブラウザ
• リソース編集
• 複数の割り当て
• マイルストーン
• JSON形式でデータをエクスポートする
• サイズ変更とスクロール