[javascript] Cytoscape.js에서 그래프에 대한 새로운 요소(노드, 엣지)를 추가하는 방법은 무엇인가요?

[javascript] Cytoscape.js에서 그래프에 대한 새로운 요소(노드, 엣지)를 추가하는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js 객체 생성

var cy = cytoscape({
  container: document.getElementById('cy')
});

노드 추가

cy.add({
  data: {
 id: 'node1' // 노드의 고유 식별자
  }
});

엣지 추가

cy.add({
  data: {
 id: 'edge1', // 엣지의 고유 식별자
 source: 'node1', // 출발 노드의 식별자
 target: 'node2' // 도착 노드의 식별자
  }
});

스타일 적용
```
cy.style()
  .selector('node')
 .style({
   'background-color': 'blue',
   'label': 'data(id)'
 })
  .selector('edge')
 .style({
   'width': 3,
   'line-color': 'gray'
 })
  .update();
```
위의 코드 예제는 Cytoscape.js를 사용하여 그래프에 새로운 노드와 엣지를 추가하고 스타일을 적용하는 방법을 보여줍니다. 실제 사용 시에는 해당 코드를 실행하기 전에 필요한 DOM 요소를 생성하고, 적절한 스타일과 데이터를 설정해야합니다.