Cytoscape.js는 다양한 레이아웃 알고리즘을 제공합니다. 그래프 레이아웃을 동적으로 변경하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

1. 필요한 Cytoscape.js 라이브러리 파일을 HTML 문서에 포함시킵니다:

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

1. 그래프를 생성하고 초기 레이아웃을 설정합니다. 예를 들어, 다음과 같이 원형 레이아웃을 사용하는 그래프를 만들어보겠습니다:

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

  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } },
    { data: { id: 'd' } },
    { data: { id: 'e' } },
    { data: { id: 'f' } },
    { data: { id: 'g' } },
    { data: { id: 'h' } },
    { data: { id: 'i' } },
    { data: { id: 'j' } }
  ],

  layout: {
    name: 'circle'
  }
});

1. 그래프를 화면에 표시합니다:

cy.mount(document.getElementById('cy'));

1. 그래프의 레이아웃을 동적으로 변경하려면 layout 속성을 업데이트해야 합니다. 다른 레이아웃 알고리즘을 사용하고 싶다면, name 속성을 해당 알고리즘의 이름으로 변경하면 됩니다. 예를 들어, 다음과 같이 grid 레이아웃으로 변경해보겠습니다:

cy.layout({ name: 'grid' }).run();

이렇게하면 그래프의 레이아웃이 원형에서 그리드로 동적으로 변경됩니다.

참고로, Cytoscape.js는 다양한 레이아웃 알고리즘 외에도 많은 다른 기능과 확장성을 제공합니다. 자세한 내용은 Cytoscape.js 공식 문서를 참조하십시오.