시그마 JS 노드 애니메이션

Question

클릭 이벤트에서 노드를 시그마 JS로 이동하고 싶습니다. 위치 x 0.7에서 위치 x -0.7로 말하십시오.

시그마 js에서 노드를 이동할 수 있습니까? 그렇다면 그것을 달성하기 위해 친절하게 안내해주십시오.

Answer 1

예, 가능합니다.

sigInst.bind('downnodes',onNodeDown); 

:

• http://jsfiddle.net/kaliatech/P255K/

당신은 사용자 정의에 "downnodes"이 같은 이벤트를 바인딩 할 수 있습니다 : 여기 마우스 클릭에 노드 위치, 크기 및 색상을 변경하는 방법을 보여주는 jsfiddle을 생성

이벤트 콜백에는 선택된 노드 ID 배열이 포함되어 있습니다. 나는 그것을 클릭 할 때 둘 이상일 때 언제인지 모른다. 복잡한 그래프에서 축소했을 때.

sigmajs를 사용할 때 미묘한 문제 중 하나는 getNodes와 같은 대부분의 메소드가 인스턴스 자체가 아니라 복제본을 반환한다는 것입니다. 이것은 내가 생각한 그래프에서 "개인"데이터, 특히 초기화 후 다시 그릴 수없는 데이터를 보호하기위한 것입니다. 실제로 속성을 수정하려면 반복기 메서드를 사용해야합니다. 그럼에도 불구하고, 당신은 복제품 만받습니다. 라이브러리는 사전 정의 된 허용 가능한 특성 목록을 사용하여 실제 노드 인스턴스를 갱신합니다. 자세한 내용은 graph.js의 checkNode 함수를 참조하십시오.

속성을 설정 한 후에 그래프를 새로 고침/다시 그려야합니다. "새로 고침"방법이 확실한 후보로 보이지만 작동하지 않았습니다. 그래도 그리기 방법을 사용하여 다시 그릴 수있었습니다. 다른 매개 변수를 이해하려면 소스 코드를 검토해야합니다. 예 : 고급 요구를 들어

function onNodeDown(evt) { 
    var sigmajs = evt.target; 
    var nodeId = evt.content[0]; 
    sigmajs.iterNodes(function(n){ 
     n.size = 10; 
     n.color = "#0000FF"; 
    },[nodeId]);  

    sigmajs.draw(2, 2, 2, true); 
}; 

는 sigmajs 웹 사이트는 마우스 이벤트를 받고 동적 노드를 업데이트하는 다른 방법을 보여주는 플러그인 예제를 포함하고 있습니다.

• http://sigmajs.org/examples/more_node_info.html

sigmajs 문서는 다음과 같습니다

• http://sigmajs.org/examples/a_plugin_example_advanced.html

또 다른 노드에 액세스하는 예 속성입니다 : 하나는 어안 효과 고급 플러그인의 예입니다 약한, 그래서 당신은 review the source code 것들을 이해해야합니다.

Answer 2

격리 된 노드를 그래프에서 이동할 수있는 플러그인이 있습니다. 확인

https://github.com/Linkurious/linkurious.js/blob/develop/examples/lasso.html