jsPlumb позиции анкеров

Я пытаюсь настроить 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

Нужна помощь, чтобы разобраться с этим.


javascript jsplumb
person Rop    schedule 14.10.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Якоря связаны с конечной точкой. При соединении элементов конечные точки создаются автоматически, но создание исходного и целевого элемента не создает конечную точку, если соединение не создано и, следовательно, код не работает.

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

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

jsPlumb.addEndpoint("someDiv", {
    endpoint:"Dot",
    isSource:true,
    isTarget:false,
    anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }]
});
person coding_idiot    schedule 15.10.2014
comment
Хм... так в каком порядке мне делать? Теперь я создал элементы с помощью html-div, затем попытался изменить их позиции привязки, а затем .connect(). Какова правильная последовательность? Должен ли я по-прежнему использовать .connect()? Или каким-то другим способом? (Нелегко понять концепции этой структуры... Я думаю, некоторые иллюстрации в документах помогли бы...) - person Rop; 15.10.2014
comment
jsPlumb очень гибок, позволяя создавать соединения непосредственно между элементами и внешними конечными точками. Лично я предпочитаю этот пример, а вот [код ](jsplumbtoolkit.com/demo/flowchart/demo.js). - person coding_idiot; 16.10.2014