Cytoscape.js는 강력한 그래프 시각화 라이브러리로, 노드 및 엣지에 대한 이벤트 핸들링을 구현하는 것은 매우 간단합니다.

우선, 이벤트 핸들러 함수를 작성해야 합니다. 이벤트 핸들러는 이벤트가 발생할 때 실행되는 함수로, 원하는 동작을 구현할 수 있습니다. 예를 들어, 노드를 클릭하면 해당 노드의 정보를 콘솔에 출력하는 동작을 구현해보겠습니다.

// 이벤트 핸들러 함수
function handleNodeClick(event) {
    var node = event.target;
    console.log("클릭한 노드의 ID: ", node.id());
    console.log("클릭한 노드의 데이터: ", node.data());
}

// Cytoscape.js 인스턴스 생성
var cy = cytoscape({
    container: document.getElementById('cy'), // 그래프를 표시할 컨테이너 요소
    elements: [ /* 그래프 요소들 */ ],
    // 그래프 스타일 등 설정
    // ...
});

// 노드 클릭 이벤트 리스너 등록
cy.on('click', 'node', handleNodeClick);

위 코드에서 handleNodeClick 함수는 노드 클릭 이벤트가 발생할 때 실행됩니다. 이 함수는 event 매개변수를 통해 이벤트에 관련된 정보를 받아와 사용할 수 있습니다. 예를 들어, 클릭한 노드의 ID를 node.id()로 가져오고, 데이터를 node.data()로 가져올 수 있습니다. 이후, 해당 정보를 콘솔에 출력하는 코드를 작성하였습니다.

마지막으로, Cytoscape.js 인스턴스를 생성하고, cy.on 메서드를 사용하여 이벤트 리스너를 등록합니다. click 이벤트를 리스닝하고, node 대상에 대해 handleNodeClick 함수를 실행하도록 설정하였습니다.

이와 같은 방식으로 노드 및 엣지에 대한 다양한 이벤트 핸들링을 구현할 수 있습니다. Cytoscape.js 공식 문서에는 더 많은 이벤트 및 기능에 대한 정보가 제공되어 있으니 참고하시면 도움이 될 것입니다.

• Cytoscape.js 공식 문서