[javascript] Cytoscape.js에서 그래프의 노드를 드래그하여 다른 위치로 이동하면 연결된 엣지도 함께 이동하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Cytoscape.js에서 드래그 이벤트를 감지하기 위해 drag 이벤트 리스너를 설정해야 합니다. 이 이벤트는 노드가 드래그될 때 발생하며, 드래그가 시작될 때와 끝날 때의 좌표 정보를 제공합니다.

아래는 Cytoscape.js에서 그래프의 노드를 드래그하여 다른 위치로 이동할 때 연결된 엣지도 함께 이동시키는 방법의 예시 코드입니다:

var cy = cytoscape({
  container: document.getElementById('cy'),
  // 그래프의 노드와 엣지 정의
  elements: {
    nodes: [
      { data: { id: 'node1' } },
      { data: { id: 'node2' } }
    ],
    edges: [
      { data: { id: 'edge1', source: 'node1', target: 'node2' } }
    ]
  },
  // 드래그가 시작될 때의 콜백 함수
  ready: function(){
    cy.on('drag', 'node', function(event){
      var node = this;
      var delta = event.target._private.position.subtract(event.position);
      // 연결된 엣지들도 함께 이동
      node.connectedEdges().forEach(function(edge){
        var edgePos = cy.getElementById(edge.id()).target().position();
        edge.style('target-position-x', edgePos.x + delta.x);
        edge.style('target-position-y', edgePos.y + delta.y);
      });
    });
  }
});

위 예시 코드에서 drag 이벤트 리스너를 설정하고, 그 안에서 드래그 중인 노드와 연결된 모든 엣지들의 좌표를 업데이트하고 있습니다. connectedEdges() 메소드로 드래그 중인 노드에 연결된 엣지들을 찾아내고, 해당 엣지의 타겟 노드의 위치를 이동된 위치에 따라 조정합니다.

이렇게 하면 Cytoscape.js에서 그래프의 노드를 드래그하여 다른 위치로 이동할 때 연결된 엣지도 함께 이동시킬 수 있습니다.