이벤트 리스너 등록하기

Cytoscape.js에서는 cy.on('event', handler) 메서드를 사용하여 그래프 이벤트에 대한 리스너를 등록할 수 있습니다. 이벤트는 ‘click’, ‘drag’, ‘mouseover’, ‘mouseout’ 등 다양한 유형이 있습니다. 아래는 ‘click’ 이벤트에 대한 예시입니다.

cy.on('click', 'node', function(event){
  var clickedNode = event.target;
  // 클릭된 노드에 대한 작업 수행
});

위의 예제에서 cy.on('click', handler)를 사용하여 노드 클릭 이벤트에 대한 리스너를 등록하였습니다. ‘node’는 세부 선택자로, 이벤트가 발생한 노드에 대해서만 동작하도록 지정하였습니다. event 객체를 통해 클릭된 노드에 대한 정보에 접근할 수 있습니다.

관련 관계 확인하기

클릭된 노드와 연결된 관계를 확인하기 위해서는 해당 노드에 연결된 엣지를 탐색해야 합니다. Cytoscape.js에서는 connectedEdges() 메서드를 사용하여 노드와 연결된 엣지를 얻을 수 있습니다. 다음은 클릭된 노드와 연결된 엣지를 추출하는 예시입니다.

cy.on('click', 'node', function(event){
  var clickedNode = event.target;
  var connectedEdges = clickedNode.connectedEdges();
  
  connectedEdges.forEach(function(edge){
    var sourceNode = edge.source();
    var targetNode = edge.target();
    
    // sourceNode와 targetNode 사이의 관계에 대한 작업 수행
  });
});

위의 예제에서 connectedEdges() 메서드를 사용하여 클릭된 노드에 연결된 엣지를 얻었습니다. forEach() 메서드를 사용하여 얻은 엣지들을 순회하며 소스 노드와 타겟 노드를 얻을 수 있습니다. 이후 적절한 작업을 수행할 수 있습니다.

드래그 이벤트 역시 비슷한 방법으로 처리할 수 있습니다. cy.on('drag', handler)로 드래그 이벤트를 등록하고, 이벤트 핸들러에서 드래그된 노드에 대한 작업을 수행할 수 있습니다.

Cytoscape.js를 사용하여 그래프의 노드를 클릭하거나 드래그하여 다른 관계를 확인하는 방법에 대해 알아보았습니다. 더 자세한 내용은 Cytoscape.js 문서를 참조하세요.