[javascript] Cytoscape.js에서 그래프의 특정 요소와 관련된 이벤트를 감지하고 이벤트에 대한 적절한 동작을 수행하는 방법은 무엇인가요?

24 Nov 2023

javascript

아래는 Cytoscape.js에서 이벤트를 감지하고 동작을 수행하는 예제 코드입니다.

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [ /* 그래프 요소들 */ ],
  // 그래프 설정들
});

// 특정 요소를 클릭할 때 동작을 수행하는 코드
cy.on('click', 'node', function(event) {
  var node = event.target;

  // 클릭한 노드에 대한 동작 수행
  // 예: 클릭한 노드의 속성 출력
  console.log('Clicked node:', node.data());
});

// 그래프 전체를 클릭할 때 동작을 수행하는 코드
cy.on('click', function(event) {
  var target = event.target;

  // 그래프 전체에 대한 동작 수행
  // 예: 클릭한 요소의 태그 출력
  console.log('Clicked:', target);
});

위의 예제 코드에서는 click 이벤트를 감지하고 해당 이벤트가 발생할 때 적절한 동작을 수행하고 있습니다. 첫 번째 cy.on('click', 'node', ...) 코드는 그래프의 노드를 클릭했을 때 동작을 수행하고, 두 번째 cy.on('click', ...) 코드는 그래프 전체를 클릭했을 때 동작을 수행합니다.

더 많은 이벤트와 해당 이벤트에 대한 동작을 추가하려면 on 메서드를 사용하여 원하는 이벤트와 동작을 지정할 수 있습니다. Cytoscape.js 개발자 문서에서 더 자세한 정보를 찾을 수 있습니다. [^1^]