jsPlumb - 使用单个端点为源和目标绘制多个连接

问题描述：

我正尝试使用一个端点创建从源到目标的多个连接。jsPlumb - 使用单个端点为源和目标绘制多个连接

基本上，当用户尝试从源中重新绘制第二条路径到同一节点时，连接源和目标的路径应该拆分并重新加入单个端点。另外，每个连接都会附加一个标签。

为了使图表看起来像是一条线路分成多个往返于同一端点的路径。

类似于图像中附加的东西。

我只是想知道是否可以使用社区版本来实现，或者我们应该购买JSPlumb的付费版本吗？ Something like the one attached in the image

由于提前，巴拉吉

答

模型端点 - 一个连接的一端。一个Endpoint有一个底层Anchor，它决定了Endpoint的位置。每个端点可以具有1个maxConnections连接（将maxConnections设置为-1以允许无限连接;默认值为1）。

http://jsfiddle.net/dL1ua517/

HTML

<div id="item_input" class="itemin">PROJECT NAME</div> 
<div class="down"> 
    <div id="downstream_1" class="ds">Output 1</div> 
    <div id="downstream_2" class="ds">Output 2</div> 
    <div id="downstream_3" class="ds">Output 3</div> 
</div>

CSS

.item { 
    height:80px; 
    width: 80px; 
    border: 1px solid blue; 
    float: left; 
} 
.ds { 
    width:100px; 
    height:100px; 
    border:1px solid brown; 
    float:left; 
    margin-left:50px; 
} 
.down{ 
    width:100%; 
    height:auto; 
    float:left; 
} 
.itemin{ 
    margin-top:150px; 
    margin-bottom:100px; 
    border:2px pink solid; 
    width:100px; 
    height:100px; 
    float:left; 
}

的Javascript

jsPlumb.ready(function() { 

    /*Second Instance*/ 
    var instance = jsPlumb.getInstance(); 
    instance.importDefaults({ 
     Connector: ["Bezier", { 
      curviness: 150 
     }], 
     Anchors: ["BottomCenter", "TopCenter"] 
    }); 

    instance.connect({ 
     source: "item_input", 
     target: "downstream_1", 
     scope: "someScope" 
    }); 
    instance.connect({ 
     source: "item_input", 
     target: "downstream_2", 
     scope: "someScope" 
    }); 
    instance.connect({ 
     source: "item_input", 
     target: "downstream_3", 
     scope: "someScope" 
    }); 
});

jsPlumb - 使用单个端点为源和目标绘制多个连接

相关推荐