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"**

如何连接多个目标点。检查我在哪里做错了！

Answer 1

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

var data = [];

data[0] = {
  Name: "Jack",
  accuracy: "average",
  accent: 79,
  weight: 1
};
data[1] = {
  Name: "Sara",
  accuracy: "good",
  accent: 24,
  weight: 2
};
data[2] = {
  Name: "Nick",
  accuracy: "not bad",
  accent: 89,
  weight: 1
};
data[3] = {
  Name: "Doe",
  accuracy: "good",
  accent: 88,
  weight: 4
};
data[4] = {
  Name: "Lee",
  accuracy: "excellent",
  accent: 63,
  weight: 9
};
data[5] = {
  Name: "Sasha",
  accuracy: "good",
  accent: 42,
  weight: 5
};

const names = data.map(item => item.Name)
const accuracies = data.map(item => item.accuracy)
const list = [names, accuracies]
console.log(list);

例如，

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

该端点最多支持30个连接，您可以使用-1作为无限数。

JSplumb连接到多个端点

1 个答案: