[javascript] Cytoscape.js에서 동적 그래프를 생성하는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js는 JavaScript 기반의 그래프 시각화 라이브러리로서, 동적 그래프를 생성하기 위한 다양한 방법을 제공합니다. 이번 포스트에서는 Cytoscape.js를 사용하여 동적 그래프를 생성하는 방법에 대해 알아보겠습니다.

먼저, Cytoscape.js를 다운로드하고 프로젝트에 추가해야 합니다. 방법은 다음과 같습니다:

Cytoscape.js 공식 웹사이트(https://js.cytoscape.org/)에서 최신 버전의 라이브러리를 다운로드하거나 CDN을 통해 가져옵니다.
다운로드한 파일을 프로젝트의 적절한 디렉토리에 저장하고 HTML 파일에 다음과 같이 스크립트를 추가합니다:

<script src="path/to/cytoscape.js"></script>

이제 Cytoscape.js를 사용하여 동적 그래프를 생성하는 방법에 대해 알아보겠습니다. 다음은 간단한 예제 코드입니다:

// 그래프 요소 생성
var cy = cytoscape({
  container: document.getElementById('cy'), // 그래프를 표시할 HTML 요소
  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: {
        'line-color': 'gray',
        'target-arrow-color': 'gray',
        'target-arrow-shape': 'triangle'
      }
    }
  ]
});

// 그래프 렌더링
cy.layout({ name: 'grid' }).run(); // 그래프를 그리드 레이아웃으로 정렬

// 이벤트 리스너 추가
cy.on('tap', 'node', function(evt){
  var node = evt.target;
  console.log('Clicked node: ' + node.id());
});

위의 코드에서는 Cytoscape 객체를 생성하고, 그래프 요소를 정의하고, 스타일을 지정한 후, 그래프를 렌더링하는 방법을 보여줍니다. 마지막으로 그래프의 노드를 클릭하는 이벤트 리스너를 추가하는 방법도 포함되어 있습니다.

이제 Cytoscape.js를 사용하여 동적 그래프를 생성하는 기본적인 방법에 대해 알게 되었습니다. Cytoscape.js의 다양한 기능을 익히고 활용하면 더욱 다양한 동적 그래프를 생성할 수 있습니다. 자세한 내용은 Cytoscape.js 공식 문서를 참조하세요.