jsPlumb 앵커 위치

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

을

이 문제를 해결하려면 도움이 필요합니다.

출처

2014-10-14 Rop

앵커는 끝점과 관련이 있습니다. 요소를 연결할 때 끝 점이 자동으로 만들어 지지만 요소 소스를 & 대상으로 만들면 연결이 생성되지 않는 한 끝 점이 만들어지지 않으므로 & 코드가 실패합니다.

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

출처

2014-10-15 18:56:57

흠 ... 그래서 내가 일을해야 어떤 순서로 대신 다음과 같이 그 요소 요소 source & target, addEndpoint을 만드는

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

? 이제 html-div로 요소를 만든 다음 앵커 위치를 수정 한 다음 .connect()로 수정하려고했습니다. 올바른 순서는 무엇입니까? .connect()를 사용해야합니까? 다른 방법이 있습니까? (이 프레임 워크의 개념을 이해하기 쉽지 않다 ... 문서의 일부 그림 삽화가 도움이되었을 것 같아서 ...) – Rop

'jsPlumb'은 매우 유연하기 때문에 요소와 외부 끝점 사이에 직접 연결을 만들 수 있습니다. 나는 개인적으로이 [예제] (https://jsplumbtoolkit.com/demo/flowchart/dom.html)와 [code] (https://jsplumbtoolkit.com/demo/flowchart/demo.js)를 선호합니다. –

jsPlumb 앵커 위치

답변

관련 문제