javascript jsPlumb：如何使流程图连接器避免元素相交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10621934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsPlumb: how to make Flowchart connectors avoid intersecting elements?
提问by Dmitry Druganov
Is it possible to make jsPlumb Flowchart connectors not to cross connectable items or specified elements (in the example: elements with 'item' class)?
是否可以使 jsPlumb Flowchart 连接器不交叉可连接的项目或指定的元素（在示例中：具有“项目”类的元素）？
Default Flowchart behaviour:
默认流程图行为：
A desired result:
想要的结果：
Here's what I tried:
这是我尝试过的：
Edited to clarify
编辑以澄清
HTML
HTML
<div id="root">
<div class="item" id="item1">Item 1</div>
<div class="item" id="item2">Item 2</div>
<div class="item" id="item3">Item 3</div>
<div class="item" id="item4">Item 4</div>
<div class="item" id="item5">Item 5</div>
</div>
JS
JS
jsPlumb.connect({
source: $('#item2'),
target: $('#item7'),
anchors: [ "Continuous" ],
connector:[ "Flowchart" ],
paintStyle: {
strokeStyle: "#000000",
lineWidth:1
}
});
Basically to have jsPlumb engine (SVG or canvas) be aware of the relevant DOM elements and have a object-avoidance scheme
基本上让 jsPlumb 引擎（SVG 或画布）知道相关的 DOM 元素并有一个对象避免方案
采纳答案by Jeff
While I am actually trying to find a proper method for doing this (which led me to your question). I do have a solution that I am using in the meanwhile to get jsPlumb to work in the way that I want it to.
虽然我实际上是在试图找到一种合适的方法来做到这一点（这让我想到了你的问题）。我确实有一个解决方案，我同时使用它来让 jsPlumb 以我想要的方式工作。
Basically you have to add in a zero height/width div to act as an intermediate node. You then make connections to and from that node instead of directly between the real items.
基本上你必须添加一个零高度/宽度的 div 来充当中间节点。然后，您可以在该节点之间建立连接，而不是直接在实际项目之间建立连接。
I have modified your jsfiddle(updated link) to provide an example of this.
我已经修改了您的 jsfiddle（更新链接）以提供一个示例。
The important things to note are ability to set the anchor placement using coordinates and the ability to use two different endpoint shapes. In addition, since the default length from the anchor to the first turn is too long in your example, it can be controlled by using the stub argument.
需要注意的重要事项是使用坐标设置锚点位置的能力以及使用两个不同端点形状的能力。此外，由于您的示例中从锚点到第一圈的默认长度太长，因此可以使用 stub 参数进行控制。
Below are the relevant modifications with comments.
下面是相关的修改和评论。
HTML
HTML
<div id="root">
<div class="item" id="item1">Item 1</div>
<div class="item" id="item2">Item 2</div>
<div class="item" id="item3">Item 3</div>
<div class="item" id="item4">Item 4</div>
<div class="item" id="item5">Item 5</div>
<div class="item" id="item6">Item 6</div>
<div class="item" id="item7">Item 7</div>
<div class="node" id="8-12"></div> <!-- Midpoint -->
<div class="item" id="item8">Item 8</div>
<div class="item" id="item9">Item 9</div>
<div class="item" id="item10">Item 10</div>
<div class="item" id="item11">Item 11</div>
<div class="item" id="item12">Item 12</div>
<div class="item" id="item13">Item 13</div>
<div class="item" id="item14">Item 14</div>
</div>
CSS
CSS
.node {
position: absolute;
height: 0px;
width: 0px;
visibility: hidden;
/* change these to place the midpoint properly */
left: 285px;
top: 160px;
}
JS
JS
//connection from item8 to midpoint(8-12)
jsPlumb.connect({
source: $('#item8'),
target: $('#8-12'),
connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
// as short as you need it
paintStyle: {
strokeStyle: "#000000",
lineWidth:1
},
anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
endpoints:[ ["Dot", {radius:2}],["Blank"] ] //<== Blank connector at end
});
//connection from midpoint(8-12) to item12
jsPlumb.connect({
source: $('#8-12'),
target: $('#item12'),
connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
// as short as you need it
paintStyle: {
strokeStyle: "#000000",
lineWidth:1
},
anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
endpoints:[ ["Blank"],["Dot", {radius:2}] ] //<== Blank connector at start
});
回答by Diana
Actually, the solution to your problem is deeper, especially if you're working with dynamic data.
实际上，您的问题的解决方案更深入，尤其是在您处理动态数据时。
After some hours of digging I finally found a "crack", not a pretty solution, but a crack.
经过几个小时的挖掘，我终于找到了一个“裂缝”，不是一个很好的解决方案，而是一个裂缝。
I just did this change for Flowchart connectors, also I am not familiar at all with the other connectors, never used them.
我只是对 Flowchart 连接器进行了此更改，而且我对其他连接器完全不熟悉，从未使用过它们。
After considering various things like midx and midy and initial stubs (those should be used in the complete solution but I abandoned them), simplest thing to do is to search for the addSegment function in connectors-flowchart.js file. That's where the segments are added.
在考虑了诸如 midx 和 midy 以及初始存根（它们应该在完整解决方案中使用但我放弃了它们）等各种事情之后，最简单的方法是在 connector-flowchart.js 文件中搜索 addSegment 函数。这就是添加段的地方。
Prior to adding the current segment (push it in the segments array), you check if it will intersect with any of your elements, just calculate some intermediary points (thus adding additional segments, breaking the initial one into pieces) so it basically takes a detour around the intersected element.
在添加当前段之前（将它推入段数组中），您检查它是否会与您的任何元素相交，只需计算一些中间点（从而添加额外的段，将初始段分成几部分）所以它基本上需要一个绕过相交元素。
If more details are needed, I'd be happy to share.
如果需要更多细节，我很乐意分享。
回答by Heiko
I just had a similar problem, where connections of a dynamically generated diagram intersected with elements.
我刚刚遇到了类似的问题，动态生成的图表的连接与元素相交。
What worked for me was to specify the "midpoint"argument for the Flowchart connection. Maybe this helps in you case as well.
对我有用的是为流程图连接指定“中点”参数。也许这对您也有帮助。
The stubargument also accepts arrays (not in documentation). I just set:
该存根参数还接受阵列（未在文档）。我只是设置：
jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];
jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];
Hope this helps!
希望这可以帮助！
回答by dessskris
I've tried out the above options and if you just want a simple solution without adding middle nodes, the following worked for me:
我已经尝试了上述选项，如果您只想要一个简单的解决方案而不添加中间节点，以下对我有用：
connector: ["Flowchart", { anchors: ["Bottom", "Top"] }]
Add those params on your connect.
在您的连接上添加这些参数。
