2つ以上の要素を結ぶ線を描くにはどうすればよいですか?HTML / CSS / JavaScript / SVG / Canvasのどの組み合わせでも問題ありません。
あなたの答えがこれらのいずれかをサポートしている場合は、それを言及してください:
- ドラッグ可能な要素
- ドラッグ/編集可能な接続
- 要素の重複回避
この質問は更新され、多数のバリエーションが統合されました。
2つ以上の要素を結ぶ線を描くにはどうすればよいですか?HTML / CSS / JavaScript / SVG / Canvasのどの組み合わせでも問題ありません。
あなたの答えがこれらのいずれかをサポートしている場合は、それを言及してください:
この質問は更新され、多数のバリエーションが統合されました。
回答:
jsPlumbは、フローチャートデモを含む多数のデモで見られるように、ドラッグアンドドロップをサポートする利用可能なオプションです。
無料のコミュニティエディションと有料のツールキットエディションで利用できます。
Toolkitエディションは、Communityエディションを包括的なデータバインディングレイヤーでラップし、一般的なライブラリのアプリケーションと統合を構築するためのいくつかのUIウィジェットを備え、商用ライセンスされています。
svgを使用して行を結合することは、私にとっては一見の価値があり、完全に機能しました...まず、Scalable Vector Graphics(SVG)は、双方向性とアニメーションをサポートする2次元グラフィックス用のXMLベースのベクトル画像フォーマットです。SVG画像とその動作は、XMLテキストファイルで定義されます。<svg>
タグを使用してHTMLでsvgを作成できます。Adobe Illustratorは、パスを使用して複雑なsvgを作成するために使用される最高のソフトウェアの1つです。
行を使用して2つのdivを結合する手順:
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ファイルを作成することは常に良いことです)
<svg><line id="line1"/></svg>
Lineタグを使用すると、指定した2つの点(x1、y1)と(x2、y2)の間に線を引くことができます。(参照用にw3schoolsを参照してください。)まだ指定していません。jQueryを使用してラインタグの属性(x1、y1、x2、y2)を編集するためです。
で<script>
タグ書き込み
line1 = $('#line1');
div1 = $('#div1');
div2 = $('#div2');
セレクターを使用して2つのdivとラインを選択しました...
var pos1 = div1.position();
var pos2 = div2.position();
jQuery position()
メソッドを使用すると、要素の現在の位置を取得できます。詳細については、https://api.jquery.com/position/にアクセスしてください(offset()
メソッドも使用できます)。
必要なすべての位置を取得したので、次のように線を引くことができます...
line1
.attr('x1', pos1.left)
.attr('y1', pos1.top)
.attr('x2', pos2.left)
.attr('y2', pos2.top);
jQuery .attr()
メソッドは、選択された要素の属性を変更するために使用されます。
上記の行で行ったのは、行の属性を
x1 = 0
y1 = 0
x2 = 0
y2 = 0
に
x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top
position()
「左」と「上」の2つの値を返すので、オブジェクト(ここでは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>
私も数日前に同じ要件を持っていました
全幅と高さの svgを使用して、すべてのdivの下に追加し、これらのsvgに動的に行を追加しました。
ここでsvgを使用してどのようにしたかを確認してください
HTML
<div id="ui-browser"><div class="anchor"></div>
<div id="control-library" class="library">
<div class="name-title">Control Library</div>
<ul>
<li>Control A</li>
<li>Control B</li>
<li>Control C</li>
<li>Control D</li>
</ul>
</div><!--
--></div><!--
--><div id="canvas">
<svg id='connector_canvas'></svg>
<div class="ui-item item-1"><div class="con_anchor"></div></div>
<div class="ui-item item-2"><div class="con_anchor"></div></div>
<div class="ui-item item-3"><div class="con_anchor"></div></div>
<div class="ui-item item-1"><div class="con_anchor"></div></div>
<div class="ui-item item-2"><div class="con_anchor"></div></div>
<div class="ui-item item-3"><div class="con_anchor"></div></div>
</div><!--
--><div id="property-browser"></div>
https://jsfiddle.net/kgfamo4b/
$('.anchor').on('click',function(){
var width = parseInt($(this).parent().css('width'));
if(width==10){
$(this).parent().css('width','20%');
$('#canvas').css('width','60%');
}else{
$(this).parent().css('width','10px');
$('#canvas').css('width','calc( 80% - 10px)');
}
});
$('.ui-item').draggable({
drag: function( event, ui ) {
var lines = $(this).data('lines');
var con_item =$(this).data('connected-item');
var con_lines = $(this).data('connected-lines');
if(lines) {
lines.forEach(function(line,id){
$(line).attr('x1',$(this).position().left).attr('y1',$(this).position().top+1);
}.bind(this));
}
if(con_lines){
con_lines.forEach(function(con_line,id){
$(con_line).attr('x2',$(this).position().left)
.attr('y2',$(this).position().top+(parseInt($(this).css('height'))/2)+(id*5));
}.bind(this));
}
}
});
$('.ui-item').droppable({
accept: '.con_anchor',
drop: function(event,ui){
var item = ui.draggable.closest('.ui-item');
$(this).data('connected-item',item);
ui.draggable.css({top:-2,left:-2});
item.data('lines').push(item.data('line'));
if($(this).data('connected-lines')){
$(this).data('connected-lines').push(item.data('line'));
var y2_ = parseInt(item.data('line').attr('y2'));
item.data('line').attr('y2',y2_+$(this).data('connected-lines').length*5);
}else $(this).data('connected-lines',[item.data('line')]);
item.data('line',null);
console.log('dropped');
}
});
$('.con_anchor').draggable({drag: function( event, ui ) {
var _end = $(event.target).parent().position();
var end = $(event.target).position();
if(_end&&end)
$(event.target).parent().data('line')
.attr('x2',end.left+_end.left+5).attr('y2',end.top+_end.top+2);
},stop: function(event,ui) {
if(!ui.helper.closest('.ui-item').data('line')) return;
ui.helper.css({top:-2,left:-2});
ui.helper.closest('.ui-item').data('line').remove();
ui.helper.closest('.ui-item').data('line',null);
console.log('stopped');
}
});
$('.con_anchor').on('mousedown',function(e){
var cur_ui_item = $(this).closest('.ui-item');
var connector = $('#connector_canvas');
var cur_con;
if(!$(cur_ui_item).data('lines')) $(cur_ui_item).data('lines',[]);
if(!$(cur_ui_item).data('line')){
cur_con = $(document.createElementNS('http://www.w3.org/2000/svg','line'));
cur_ui_item.data('line',cur_con);
} else cur_con = cur_ui_item.data('line');
connector.append(cur_con);
var start = cur_ui_item.position();
cur_con.attr('x1',start.left).attr('y1',start.top+1);
cur_con.attr('x2',start.left+1).attr('y2',start.top+1);
});
VisJSは、ドラッグ可能な要素をサポートするArrowsの例でこれをサポートしています。
また、相互作用イベントの例を使用して、編集可能な接続をサポートします。
GoJSは、要素のドラッグアンドドロップと接続の編集をサポートするステートチャートの例でこれをサポートしています。
この回答は、ウォルターノースウッズの 回答に基づいています。
最近、ドラッグアンドドロップコンポーネントを使用し、それらを結ぶ線を持つ単純なWebアプリの開発を試みました。私はこれら2つのシンプルで驚くべきJavaScriptライブラリに出くわしました。
RaphaëlはGraffleの例でこれをサポートしています。
この回答は、Awais Akhtarの 回答とVaibhav Jainの 回答に基づいています。
D3には数百の例があり、そのいくつかはこの質問に適しています。
ドラッグアンドドロップなしの例は修正されています。
インタラクティブなドラッグアンドドロップのない例:
ドラッグアンドドロップの例:
この回答は、Glenn Daytonの 回答に基づいています。
mxGraph -が使用するdraw.io -そのとともに、このユースケースをサポートGrapheditor例。ドキュメンテーション。 例。
この回答は、Vainbhav Jainの 回答に基づいています。
Cytoscapeは、要素のドラッグをサポートするアーキテクチャの例でこれをサポートしています。
接続を作成するために、edgehandles拡張があります。既存の接続の編集はまだサポートされていません。 質問。
接続形状を編集するために、エッジ編集拡張機能があります。デモ。
編集editationの延長は、しかし、まだデモありません、有望と思われます。
js-graph.itは、この使用例をサポートしています。これは、スタートガイドに示されているように、接続が重複することなく要素をドラッグすることをサポートしています。接続の編集/作成をサポートしているようには見えません。もうメンテナンスされていないようです。
JointJS / Rappidは、要素のドラッグアンドドロップと接続の再配置をサポートするKitchensinkサンプルでこのユースケースをサポートしています。多くの例があります。
この回答は、Vainbhav Jainの 回答に基づいています。