[javascript] Cytoscape.js에서 그래프를 동적으로 생성하여 사용자의 입력 또는 외부 이벤트에 응답하고 관련 정보를 시각적으로 표시하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Cytoscape.js를 프로젝트에 추가합니다. 이를 위해 <script> 태그를 사용하여 Cytoscape.js 라이브러리를 로드합니다.

<!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>
    // Cytoscape.js 코드 작성
  </script>
</body>
</html>

그래프는 <div> 요소 내에 생성됩니다. Cytoscape.js를 사용하여 그래프를 동적으로 생성하는 방법은 다양합니다.

가장 기본적인 방법은 Cytoscape.js 객체를 만들고, nodes와 edges를 정의하여 그래프를 구성하는 것입니다. 아래 예제는 노드와 엣지를 정의하여 그래프를 생성하는 코드입니다.

<script>
var cy = cytoscape({
  container: document.getElementById('cy'),

  elements: {
    nodes: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      { data: { id: 'c' } }
    ],
    edges: [
      { data: { id: 'ab', source: 'a', target: 'b' } },
      { data: { id: 'ac', source: 'a', target: 'c' } }
    ]
  },

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

  layout: {
    name: 'grid'
  }
});
</script>

위의 코드에서는 nodes와 edges를 정의하고, 스타일을 지정하여 그래프를 시각적으로 표현하고 있습니다. 예를 들어, 노드의 배경색을 빨간색으로, 라벨을 노드의 ID로 설정하였으며, 엣지의 두께를 3px로, 선의 색상을 파란색으로 지정하고 있습니다.

사용자의 입력 또는 외부 이벤트에 응답하여 그래프를 동적으로 업데이트할 수도 있습니다. 이를 위해서는 이벤트 리스너를 추가해야 합니다. 예를 들어, 마우스로 노드를 클릭할 때 해당 노드를 강조하는 코드는 다음과 같습니다.

<script>
// 노드를 클릭했을 때 이벤트 핸들러
cy.on('tap', 'node', function(event){
  var node = this;
  
  // 노드 스타일 변경
  node.style('background-color', 'green');
});
</script>

위 코드에서는 cy.on('tap', 'node')를 사용하여 노드를 클릭했을 때의 이벤트 핸들러를 정의했습니다. 이 핸들러에서는 클릭한 노드를 node 변수로 저장하고, 해당 노드의 배경색을 녹색으로 변경하고 있습니다.

Cytoscape.js를 사용하여 그래프를 동적으로 생성하고 관련 정보를 시각적으로 표시하는 방법에 대해 간단히 알아보았습니다. 더 많은 기능과 옵션은 Cytoscape.js 공식 문서에서 확인할 수 있습니다.