그래프의 레이아웃은 노드와 엣지가 어떻게 배치되는지 결정하는 역할을 맡고 있습니다. Cytoscape.js를 사용하여 그래프의 레이아웃을 런타임에서 변경하는 방법에 대해 알아보겠습니다.

Cytoscape.js에서 그래프 레이아웃을 변경하는 것은 간단한데, layout 객체를 사용하여 그래프 레이아웃을 지정하면 됩니다. 다음은 예제 코드입니다:

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b' } }
  ],
  layout: { name: 'grid' }
});

// 레이아웃을 런타임에서 변경하는 함수
function changeLayout(layoutName) {
  var layout = cy.layout({
    name: layoutName
  });
  
  layout.run();
}

// 예시: 그래프 레이아웃을 원형(layout: 'circle')으로 변경
changeLayout('circle');

위의 코드에서 cy 객체는 Cytoscape.js 그래프 인스턴스를 나타냅니다. layout 속성을 사용하여 초기 레이아웃을 설정하고, changeLayout 함수를 사용하여 런타임에서 레이아웃을 변경할 수 있습니다. cy.layout() 메서드를 호출하여 새로운 레이아웃 객체를 생성하고, run() 메서드를 호출하여 그래프의 레이아웃을 적용합니다.

Cytoscape.js는 여러 가지 레이아웃 옵션을 제공하며, 원하는 레이아웃을 선택할 수 있습니다. 예를 들어, ‘grid’, ‘circle’, ‘random’, ‘concentric’ 등의 레이아웃이 있습니다.

• Cytoscape.js 문서: https://js.cytoscape.org
• Cytoscape.js GitHub 저장소: https://github.com/cytoscape/cytoscape.js