[javascript] Cytoscape.js를 사용하여 그래프를 인터랙티브하게 탐색하는 방법은 무엇인가요?

24 Nov 2023

javascript

다음은 Cytoscape.js를 사용하여 그래프를 인터랙티브하게 탐색하는 간단한 예제입니다:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cytoscape.js Interactive Graph</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.1/cytoscape.min.js"></script>
</head>
<body>
  <div id="cy"></div>

  <script>
    // 그래프 생성
    var cy = cytoscape({
      container: document.getElementById('cy'),
      elements: [
        { data: { id: 'node1' } },
        { data: { id: 'node2' } },
        { data: { id: 'edge1', source: 'node1', target: 'node2' } }
      ],
      style: [
        {
          selector: 'node',
          style: {
            'background-color': 'red',
            'label': 'data(id)'
          }
        },
        {
          selector: 'edge',
          style: {
            'width': 3,
            'line-color': 'blue'
          }
        }
      ],
      layout: {
        name: 'grid'
      }
    });

    // 이벤트 처리
    cy.on('tap', 'node', function(evt){
      var node = evt.target;
      console.log('클릭한 노드:', node.id());
    });
  </script>
</body>
</html>

위의 예제에서는 HTML 문서 내에 Cytoscape.js 라이브러리를 추가하고, <div id="cy"></div> 태그를 사용하여 그래프를 표시할 공간을 만듭니다. JavaScript 코드를 이용하여 그래프를 생성하고, 그래프 요소 및 스타일을 설정합니다. 또한 노드를 클릭하는 이벤트를 처리하여 클릭한 노드의 ID를 콘솔에 출력합니다.

Cytoscape.js를 통해 그래프를 인터랙티브하게 탐색하는 방법은 다양하며, 그래프의 레이아웃, 스타일, 이벤트 처리 등을 조정하여 원하는 동작을 구현할 수 있습니다.

더 자세한 내용은 Cytoscape.js 공식 문서를 참조하세요.