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

24 Nov 2023

javascript

먼저 Cytoscape.js 라이브러리를 웹 프로젝트에 추가해야 합니다. Cytoscape.js는 npm을 통해 설치하거나 CDN을 통해 가져올 수 있습니다. 아래는 CDN에서 Cytoscape.js를 가져오는 예제입니다.

<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.16.1/dist/cytoscape.min.js"></script>

그래프를 생성하기 위해 HTML 요소를 생성합니다. 일반적으로 <div> 요소를 사용하며, 이 요소에 그래프가 표시될 것입니다.

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

이제 JavaScript 코드를 사용하여 그래프를 생성하고 상태를 업데이트하는 방법을 알아보겠습니다. 아래는 간단한 예제 코드입니다.

// Cytoscape 인스턴스 생성
var cy = cytoscape({
  container: document.getElementById('cy'), // 그래프를 표시할 HTML 요소 선택자
  elements: [ // 그래프를 구성하는 요소들
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b' } }
  ],
  style: [ // 그래프의 스타일 설정
    {
      selector: 'node',
      style: {
        'background-color': 'red',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': 'blue'
      }
    }
  ],
  layout: {
    name: 'grid' // 그래프의 레이아웃 설정
  }
});

// 사용자 입력에 응답하여 그래프 상태 업데이트하기
var inputElement = document.getElementById('input');
inputElement.addEventListener('change', function() {
  var userInput = inputElement.value;
  
  // 그래프에 새로운 노드 추가하기
  cy.add({
    data: { id: userInput }
  });
  
  // 그래프 레이아웃 업데이트
  cy.layout({ name: 'grid' }).run();
});

// 외부 이벤트에 응답하여 그래프 상태 업데이트하기
document.addEventListener('click', function() {
  // 그래프 요소들의 스타일 변경
  cy.nodes().forEach(function(node) {
    node.style('background-color', 'green');
  });
});

위 코드에서 cytoscape 함수를 사용하여 Cytoscape 인스턴스를 생성하고, container, elements, style, layout 등의 옵션을 설정합니다. 사용자의 입력이나 외부 이벤트에 응답하는 코드는 addEventListener 함수를 사용하여 구현합니다.

위의 예제 코드는 간단한 그래프를 생성하고, 사용자 입력과 클릭 이벤트에 응답하여 그래프의 상태를 업데이트합니다. 사용자가 입력을 변경하면 그래프에 새로운 노드가 추가되고, 클릭 이벤트가 발생하면 그래프 요소들의 스타일이 변경됩니다.

Cytoscape.js를 사용하여 그래프를 동적으로 생성하고 상태를 업데이트하는 방법에 대해 간단히 알아보았습니다. 더 자세한 내용은 Cytoscape.js 공식 문서를 참조하시기 바랍니다.