[javascript] Cytoscape.js에서 그래프의 특정 요소에 대한 이벤

24 Nov 2023

javascript

Cytoscape.js는 웹 기반의 그래프 라이브러리로, 다양한 기능을 제공합니다. 이 중에서도 그래프의 특정 요소(노드 또는 엣지)를 클릭 또는 선택했을 때 발생하는 이벤트 처리에 대해서 알아보겠습니다.

먼저, Cytoscape.js를 HTML 파일에 포함시키고, 그래프를 생성하고 초기화해야 합니다. 아래의 예제 코드를 참고하세요.

<!DOCTYPE html>
<html>
<head>
  <title>Cytoscape.js Example</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
  <div id="cy"></div>

  <script>
    // 그래프 생성
    var cy = cytoscape({
      container: document.getElementById('cy'),

      elements: [
        { data: { id: 'nodeA' } },
        { data: { id: 'nodeB' } },
        { data: { id: 'edgeAB', source: 'nodeA', target: 'nodeB' } }
      ],

      style: [
        {
          selector: 'node',
          style: {
            'background-color': '#ff0000',
            'label': 'data(id)'
          }
        },
        {
          selector: 'edge',
          style: {
            'width': 3,
            'line-color': '#ff0000'
          }
        }
      ]
    });

    // 노드 클릭 이벤트 처리
    cy.on('tap', 'node', function(event){
      var node = event.target;
      console.log('클릭된 노드:', node.id());
    });

    // 엣지 클릭 이벤트 처리
    cy.on('tap', 'edge', function(event){
      var edge = event.target;
      console.log('클릭된 엣지:', edge.id());
    });
  </script>
</body>
</html>

위의 예제 코드에서는 Cytoscape.js를 사용하여 cy라는 이름의 그래프 객체를 생성하고 초기화하였습니다. 그리고 cy.on() 메서드를 사용하여 노드 또는 엣지 클릭 이벤트에 대한 처리를 정의하였습니다.

노드 클릭 이벤트를 처리하기 위해서는 cy.on('tap', 'node', function(event){})과 같이 사용합니다. 클릭된 노드는 event.target를 통해 가져올 수 있습니다. 위의 예제 코드에서는 클릭된 노드의 ID를 콘솔에 출력하도록 설정하였습니다.

마찬가지로, 엣지 클릭 이벤트를 처리하기 위해서는 cy.on('tap', 'edge', function(event){})와 같이 사용할 수 있습니다.

Cytoscape.js에서는 다양한 이벤트 및 처리 방식을 제공하므로, 원하는 기능에 맞게 이벤트 핸들러를 정의하여 사용할 수 있습니다.

더 자세한 내용은 Cytoscape.js 공식 문서를 참고하시기 바랍니다.