21

是否可以使 jsPlumb Flowchart 连接器不交叉连接项目或指定元素（在示例中：具有“项目”类的元素）？

默认流程图行为：

在此处输入图像描述

期望的结果：

在此处输入图像描述

这是我尝试过的：

http://jsfiddle.net/CcfTD/1/

编辑澄清

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

   jsPlumb.connect({
    source: $('#item2'),
    target: $('#item7'),
    anchors: [ "Continuous" ],
    connector:[ "Flowchart" ],
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    }
});

基本上让 jsPlumb 引擎（SVG 或画布）了解相关的 DOM 元素并有一个对象避免方案

http://jsfiddle.net/adardesign/2ZFFc/

4

4 回答 4

6

虽然我实际上是在尝试找到一种合适的方法来做到这一点（这让我想到了你的问题）。我确实有一个解决方案，同时我正在使用它来让 jsPlumb 以我想要的方式工作。

基本上你必须添加一个零高度/宽度的 div 来充当中间节点。然后，您可以在该节点之间建立连接，而不是直接在实际项目之间建立连接。

我已经修改了您的 jsfiddle（更新的链接）以提供一个示例。

需要注意的重要事项是使用坐标设置锚点位置的能力以及使用两种不同端点形状的能力。此外，由于在您的示例中从锚点到第一圈的默认长度太长，因此可以使用 stub 参数来控制它。

以下是相关的修改和评论。

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 

.node {
    position: absolute;
    height: 0px;
    width: 0px;
    visibility: hidden;

    /* change these to place the midpoint properly */
    left: 285px;
    top: 160px;
}

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
});
于 2013-02-01T16:31:56.887 回答
2

实际上，您的问题的解决方案更深入，尤其是在您使用动态数据时。

经过几个小时的挖掘，我终于找到了一个“裂缝”，不是一个漂亮的解决方案，而是一个裂缝。

我只是对流程图连接器进行了此更改，而且我对其他连接器一点也不熟悉，从未使用过它们。

在考虑了 midx 和 midy 以及初始存根（那些应该在完整的解决方案中使用但我放弃了它们）等各种东西之后，最简单的事情是在 connector-flowchart.js 文件中搜索 addSegment 函数。这就是添加片段的地方。

在添加当前段之前（将其推入段数组中），您检查它是否会与您的任何元素相交，只需计算一些中间点（从而添加额外的段，将初始段分成几部分）所以它基本上需要一个绕过相交的元素。

如果需要更多细节，我很乐意分享。

于 2013-12-31T12:11:32.130 回答
2

我刚刚遇到了一个类似的问题，动态生成的图表的连接与元素相交。

对我有用的是为流程图连接指定“中点”参数。也许这对您也有帮助。

存根参数也接受数组（不在文档中）。我刚刚设置：

jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];

希望这可以帮助！

于 2014-01-08T14:33:49.800 回答
1

我已经尝试了上述选项，如果您只想要一个简单的解决方案而不添加中间节点，以下对我有用：

connector: ["Flowchart", { anchors: ["Bottom", "Top"] }]

在您的连接上添加这些参数。

于 2019-10-09T09:12:47.080 回答