JSplumb连接到多个端点

Question

我需要使用库d1 to d2从d1 to d3和JSplumb中画线。

下面的代码只适用于单个源和单个目标包。

JS:

 jsPlumb.ready(function(){
  jsPlumb.Defaults.Endpoint = "Blank";
  var container = document.getElementById("cartspace");
  jsPlumb.setContainer(container);

  var endpointOptions = { isSource: true, isTarget: true };
  var d1 = jsPlumb.addEndpoint( $('#m1'), { anchor: "LeftMiddle" }, endpointOptions );
  var d2 = jsPlumb.addEndpoint( $('#m2'), { anchor: "LeftMiddle" }, endpointOptions );
  var d3 = jsPlumb.addEndpoint( $('#m3'), { anchor: "LeftMiddle" }, endpointOptions );

  jsPlumb.connect({
    source: d1,
    target: d2,
    connector: [ "Flowchart", { curviness: 1, stub: 10 }, {cssClass:"connectorClass"} ],
    paintStyle:{ lineWidth:2, strokeStyle:'green' }
  });

   jsPlumb.connect({
    source: d1,
    target: d3,
    connector: [ "Flowchart", { curviness: 1, stub: 10 }, {cssClass:"connectorClass"} ],
    paintStyle:{ lineWidth:2, strokeStyle:'green' }

  });

});

Check for code：https://codepen.io/pvnkk/pen/qQxGvQ?editors=1010

**Console error: "could not add connection; source endpoint is full"**

如何连接多目标points.check在哪里我做错了！

Answer 1

您需要告诉jsplumb，特定的端点可以支持多个连接：

var d1 = jsPlumb.addEndpoint( $('#m1'), { anchor: "LeftMiddle" }, endpointOptions );

例如：

let endpointOptions = {
            endpoint: ['Dot', { radius: 7 }],
            paintStyle: { fill: '#somecolor' },
            isSource: true,
            scope: 'green',
            connectorStyle: { stroke: '#somecolor', strokeWidth: 3 },
            connector: ['Bezier', { curviness: 63 } ],
            maxConnections: 30,
            isTarget: false,
            connectorOverlays: [ [ 'Arrow', { location:1 } ] ],
            dropOptions: exampleDropOptions
        };

在这里，端点将支持多达30个连接，您可以使用-1作为无限数。