绘制两个元素之间的连接线

Question

我如何（或哪些工具可用）在两个或多个元素之间绘制一条线来连接它们？ HTML / CSS / JavaScript / SVG / Canvas的任意组合都可以。

如果您的答案支持其中任何一项，请务必提及：

• draggable elements
• 可拖动/可编辑的连接
• 元素重叠避免

  

此问题已更新至consolidate the numerous variations。

Answer 1

jsPlumb是一个支持拖放功能的选项，如numerous demos所示，包括Flowchart demo。

它提供免费的社区版和付费的工具包版。

  

Toolkit版包含了一个全面的数据绑定层社区版，以及用于构建流行库的应用程序和集成的几个UI小部件，并且已获得商业许可。

Answer 2

与svgs联系对我来说值得一试，而且它完美地运作了...... 首先，可缩放矢量图形（SVG）是一种基于XML的矢量图像格式，用于支持交互性和动画的二维图形。 SVG图像及其行为在XML文本文件中定义。您可以使用<svg>标记在HTML中创建svg。 Adobe Illustrator是用于使用路径创建复杂svgs的最佳软件之一。

使用一行连接两个div的过程：

1. 创建两个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>

   线标记允许我们在两个指定点（x1，y1）和（x2，y2）之间绘制一条线。 （参考访问w3schools。）我们尚未指定它们。因为我们将使用jQuery来编辑行标记的属性（x1，y1，x2，y2）。

3. 在<script>代码中写

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

   我使用选择器来选择两个div和line ...

   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()返回两个值，一个'左'和另一个'顶'，我们可以使用.top和.left使用对象（此处为pos1和pos2）轻松访问它们...

现在，行标记有两个不同的坐标，用于在两点之间绘制线条。

提示：根据需要添加事件侦听器

提示：确保先在脚本标记

中编写任何内容之前导入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>

Answer 3

最近，我尝试开发一个简单的Web应用程序，该应用程序使用拖放组件并用线连接它们。我遇到了以下两个简单而有趣的javascript库：

1. Plain Draggable：简单而高性能的库，允许拖动HTML / SVG元素。
2. Leader Line：在网页上绘制引导线

Working example link（用法：单击添加场景以创建可拖动对象，单击添加选择以在两个不同的可拖动对象之间绘制引线）

Answer 4

我几天前也有同样的要求

我使用了完整的宽度和高度 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);
});

Answer 5

Raphaël通过Graffle example支持这一点。

  

此答案基于Awais Akhtar's answer和Vaibhav Jain's answer。

Answer 6

D3具有hundreds of examples，其中一些适合该问题。

没有拖放的示例是固定的：

• https://beta.observablehq.com/@mbostock/d3-cluster-dendrogram
• https://beta.observablehq.com/@mbostock/d3-tidy-tree
• https://beta.observablehq.com/@mbostock/d3-hierarchical-edge-bundling
• https://beta.observablehq.com/@mbostock/d3-radial-dendrogram
• https://beta.observablehq.com/@mbostock/d3-sankey-diagram
• https://www.jasondavies.com/collatz-graph/
• https://bost.ocks.org/mike/hive/
• https://bost.ocks.org/mike/fisheye/
• https://bl.ocks.org/wvengen/cab9b01816490edb7083

没有拖放的示例是交互式的：

• https://beta.observablehq.com/@mbostock/collapsible-tree
• https://beta.observablehq.com/@mbostock/d3-force-directed-graph

拖放示例：

• http://bl.ocks.org/MoritzStefaner/1377729
• http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779

  

此答案基于Glenn Dayton's answer。

Answer 7

Cytoscape通过其Architecture example支持此功能，该功能支持拖动元素。

要创建连接，请使用edgehandles扩展名。 It does not yet support editing existing connections. Question.

要编辑连接形状，请使用edge-editing扩展名。 Demo.

edit-editation扩展名似乎很有希望，但是还没有演示。

Answer 8

VisJS通过其Arrows example支持此功能，该功能支持可拖动的元素。

它还通过Interaction Events example支持可编辑的连接。

Answer 9

GoJS通过其State Chart example支持此功能，该功能支持拖放元素以及编辑连接。

  

此答案基于Walter Northwoods' answer。

Answer 10

JointJS/Rappid通过其Kitchensink example支持此用例，该用例支持元素的拖放和连接的重新放置。 It has many examples.

  

此答案基于Vainbhav Jain's answer。

Answer 11

由mxGraph使用的

draw.io及其Grapheditor example支持此用例。 Documentation. Examples.

  

此答案基于Vainbhav Jain's answer。

Answer 12

js-graph.it支持此用例，如其getting started guide所示，支持拖动元素而没有连接重叠。似乎不支持编辑/创建连接。似乎不再维护了。