133

2 つ以上の要素間に線を引いてそれらを接続するにはどうすればよいですか? HTML/CSS/JavaScript/SVG/Canvas の任意の組み合わせで問題ありません。

あなたの答えがこれらのいずれかをサポートしている場合は、それについて言及してください。

  • ドラッグ可能な要素
  • ドラッグ可能/編集可能な接続
  • 要素の重複回避

この質問は、その多数のバリエーションを統合するために更新されました。

4

12 に答える 12

172

jsPlumbは、ドラッグ アンド ドロップをサポートするオプションとして利用できます。これは、Flowchartデモを含む多数のデモで見られます。

これは、無料の Community エディションと有料の Toolkit エディションで利用できます。

Toolkit エディションは、Community エディションを包括的なデータ バインディング レイヤーと、アプリケーションを構築するためのいくつかの UI ウィジェットおよび一般的なライブラリの統合でラップし、商用ライセンスを取得しています。

于 2011-06-08T18:47:21.613 に答える
72

svgs を使用して線を結合することは、私にとって試してみる価値があり、完璧に機能しました...まず第一に、Scalable Vector Graphics (SVG) は、対話機能とアニメーションをサポートする 2 次元グラフィックス用の XML ベースのベクター画像形式です。SVG 画像とその動作は、XML テキスト ファイルで定義されます。<svg>タグを使用して HTML で svg を作成できます。Adobe Illustrator は、パスを使用して複雑な SVG を作成するために使用される最高のソフトウェアの 1 つです。

線を使用して 2 つの div を結合する手順:

  1. 2 つの div を作成し、必要に応じて任意の位置に配置します

    <div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>

    （説明のためにインラインスタイリングを行っていますが、スタイリング用に別のcssファイルを作成することは常に良いことです）

  2. <svg><line id="line1"/></svg>

    Line タグを使用すると、指定した 2 つの点 (x1,y1) と (x2,y2) の間に線を引くことができます。(参照については、w3schools を参照してください。) まだ指定していません。行タグの属性 (x1、y1、x2、y2) を編集するために jQuery を使用するためです。

  3. <script>タグ書き込みで

    line1 = $('#line1');   
div1 = $('#div1');   
div2 = $('#div2');

    セレクターを使用して 2 つの div とラインを選択しました...

    var pos1 = div1.position();
var pos2 = div2.position();

    jQueryposition()メソッドを使用すると、要素の現在の位置を取得できます。詳細については、https://api.jquery.com/position/を参照してください(offset()メソッドも使用できます) 。

必要なすべての位置を取得したので、次のように線を引くことができます...

line1
  .attr('x1', pos1.left)
  .attr('y1', pos1.top)
  .attr('x2', pos2.left)
  .attr('y2', pos2.top);

.attr()選択した要素の属性を変更するには、jQueryメソッドを使用します。

上記の行で行ったのは、行の属性を

x1 = 0
y1 = 0
x2 = 0
y2 = 0

に

x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top

asposition()は 2 つの値 (1 つは「左」、もう 1 つは「上」) を返します。オブジェクト (ここでは pos1 と pos2) を使用して、.top と .left を使用して簡単にアクセスできます ...

ライン タグには、2 点間に線を引くための 2 つの異なる座標があります。

ヒント: 必要に応じてイベント リスナーを div に追加します

ヒント: スクリプト タグに何かを書き込む前に、まず jQuery ライブラリをインポートしてください。

JQueryを介して座標を追加した後...次のようになります

次のスニペットはデモンストレーションのみを目的としています。正しい解決策を得るには、上記の手順に従ってください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>

于 2016-02-18T22:29:27.997 に答える
1

draw.ioで使用されるmxGraphは、 Grapheditor の例でこのユース ケースをサポートします。ドキュメンテーション。 例。

この回答は、Vainbhav Jain の 回答に基づいています。

于 2018-11-05T21:43:58.250 に答える