[javascript] Cytoscape.js를 사용하여 웹 페이지에 동적 네트워크 그래프를 표시하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Cytoscape.js 라이브러리를 웹 페이지에 추가합니다. <head> 태그 내에 다음 스크립트를 추가합니다.

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

다음으로, 그래프를 표시할 <div> 요소를 웹 페이지에 추가합니다.

<div id="cy"></div>

이제 JavaScript를 사용하여 Cytoscape.js를 초기화하고 그래프를 그릴 수 있습니다. 다음 코드를 <script> 태그 내에 추가합니다.

// Cytoscape 인스턴스를 생성하고 그래프를 초기화합니다
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'
      }
    }
  ]
});

// 그래프를 통해 사용자와 상호작용하도록 설정합니다
cy.on('tap', 'node', function(event){
  var node = event.target;
  console.log('클릭한 노드:', node.id());
});

위 코드에서, container 속성에는 그래프를 표시할 <div> 요소의 ID를 제공합니다. elements 속성에는 그래프의 노드와 엣지를 정의하고, style 속성에는 그래프의 노드와 엣지에 적용될 스타일을 정의합니다.

그래프를 초기화하고 그렸을 때 결과는 빨간색의 노드 두 개가 있는 그래프이며, 이 두 노드를 연결하는 파란색의 엣지가 있습니다.

마지막으로, 사용자와 상호작용하도록 그래프를 설정하기 위해 cy.on() 메서드를 사용합니다. 위 예제에서는 노드를 클릭하면 클릭한 노드의 ID를 콘솔에 표시합니다.

이렇게 하면 Cytoscape.js를 사용하여 웹 페이지에 동적 네트워크 그래프를 표시할 수 있습니다.

Cytoscape.js에 대한 자세한 내용은 공식 문서를 참조하십시오.