jsPlumb anchors position

Question

Я пытаюсь настроить jsPlumb для рисования графиков со всеми стрелками, идущими вниз, с источниками подключения с нижней стороны контейнера и целями подключения к верхней части контейнера где-то вниз по странице , я использую:

instance.connect({ source:"sourceDiv", target:"targetDiv" , anchors:["Bottom", "Top"] }); 

, который работает отлично, за исключением одного маленького вопроса ...

Все стрелки будут исходить из средней донного стороны и заканчиваются в средней из в Топ- боковая сторона.

Когда есть много стрелок, идущих в/из одного и того же контейнера, я бы предпочел, чтобы анкеры равномерно распределяли вдоль верхних и нижних сторон.

Из документов, я пытался что-то вроде:

instance.makeSource("sourceDiv", { anchor: "Continuous" }); 
instance.makeTarget("targetDiv", { anchor: "Continuous" }); 

или (с JQuery):

instance.makeSource($("#sourceDiv"), { anchor: "Continuous" }); 
instance.makeTarget($("#targetDiv"), { anchor: "Continuous" }); 

Но, видимо, не правильный синтаксис ... получаю ошибки, такие как:

jsPlumb: fire failed for event connection : TypeError: info.connection.getOverlay(...) is null 

Нужна помощь в сортировке.

Answer 1

Анкеры связаны с конечной точкой. При подключении элементов конечные точки создаются автоматически, но создание объекта источника & цели, не создает конечную точку, если не создается соединение &, поэтому код не работает.

https://jsplumbtoolkit.com/doc/anchors.html 

Вместо того, чтобы элемент source & target, addEndpoint к этому элементу следующим образом:

jsPlumb.addEndpoint("someDiv", { 
    endpoint:"Dot", 
    isSource:true, 
    isTarget:false, 
    anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }] 
});