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

24 Nov 2023

javascript

Cytoscape.js 설치: Cytoscape.js를 사용하기 위해 먼저 필요한 패키지를 설치합니다. npm을 사용한다면 다음 명령어를 실행합니다:
```
npm install cytoscape
```

HTML 파일 설정: Cytoscape.js를 사용할 HTML 파일에 다음과 같은 기본 구조를 설정합니다:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cytoscape.js Example</title>
  <link rel="stylesheet" href="https://unpkg.com/cytoscape/dist/cytoscape.min.css">
</head>
<body>
  <div id="cy"></div>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</body>
</html>

그래프 생성 및 초기화: JavaScript 파일에서 Cytoscape.js를 사용하여 그래프를 생성하고 초기화합니다:

var cy = cytoscape({
  container: document.getElementById('cy'), // 그래프를 렌더링할 div 요소
  elements: [ ... ], // 그래프의 요소들을 정의하는 배열
  style: [ ... ], // 그래프의 스타일을 정의하는 배열
  layout: { ... } // 그래프의 레이아웃을 정의하는 객체
});

사용자 입력 또는 외부 이벤트에 대한 반응: 사용자의 입력 또는 외부 이벤트를 감지하여 그래프를 업데이트하는 코드를 작성합니다. 예를 들어, 클릭 이벤트에 반응하여 그래프의 노드에 스타일을 변경하는 코드는 다음과 같습니다:
```
cy.on('click', 'node', function(event){
  var node = this;
  // 노드의 스타일 변경 코드
});
```
그래프 업데이트: 그래프를 업데이트하기 위해 Cytoscape.js API를 사용합니다. 예를 들어, 새로운 노드를 추가하는 코드는 다음과 같습니다:
```
cy.add({
  data: { id: 'new-node' },
  position: { x: 100, y: 100 }
});
```
다양한 기능 활용: Cytoscape.js는 다양한 기능을 제공합니다. 그래프 레이아웃 변경, 노드 및 엣지 스타일 변경, 그래프 애니메이션 등을 사용하여 그래프를 동적으로 조작할 수 있습니다. Cytoscape.js의 문서와 예제를 참고하여 필요한 기능을 활용할 수 있습니다.

더 자세한 내용은 Cytoscape.js 문서를 참고하시기 바랍니다.