[javascript] Cytoscape.js에서 그래프의 데이터를 가져오거나 수정하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Cytoscape.js를 사용하여 그래프를 생성해야 합니다. 그래프를 만든 후에는 해당 그래프 객체를 변수에 할당합니다. 그런 다음 해당 변수를 사용하여 데이터를 가져오거나 수정할 수 있습니다. 예를 들어, 다음과 같이 그래프를 생성하고 데이터를 가져와 보겠습니다:

// Cytoscape.js를 사용하여 그래프 생성
var cy = cytoscape({
  // 그래프 구성 요소 설정
  container: document.getElementById('cy'),
  
  // 노드 및 엣지 데이터
  elements: [
    { data: { id: 'node1', label: 'Node 1' } },
    { data: { id: 'node2', label: 'Node 2' } },
    { data: { id: 'edge1', source: 'node1', target: 'node2' } }
  ],
  
  // 그래프 스타일 설정
  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#ccc',
        'label': 'data(label)'
      }
    }
  ]
});

// 노드와 엣지 데이터 가져오기
var nodes = cy.nodes();
var edges = cy.edges();

// 가져온 데이터 출력
console.log(nodes);
console.log(edges);

위의 코드에서는 cy.nodes()와 cy.edges() 함수를 사용하여 해당 그래프의 모든 노드와 엣지 데이터를 가져옵니다. 이를 console.log를 사용하여 출력합니다.

그래프 데이터를 수정하는 경우에는 cy 객체의 매서드를 사용하여 데이터를 변경할 수 있습니다. 예를 들어, 노드의 데이터를 수정하는 방법은 다음과 같습니다:

// 노드 데이터 수정하기
var node = cy.getElementById('node1'); // 수정할 노드 선택
node.data('label', 'New Label'); // 데이터 수정

// 수정된 데이터 확인
console.log(node.data('label'));

위의 코드에서는 cy.getElementById() 함수를 사용하여 수정할 노드를 선택한 다음, .data() 함수를 사용하여 해당 노드의 데이터를 수정합니다.

이와 같은 방법으로 Cytoscape.js를 사용하여 그래프 데이터를 가져오거나 수정할 수 있습니다. Cytoscape.js의 다양한 기능과 매서드에 대해 더 자세히 알아보려면 공식 문서를 참조하세요.