Cytoscape.js는 다양한 레이아웃 알고리즘을 제공하며, 각각의 알고리즘은 그래프의 노드와 엣지를 최적의 위치로 배치하는 역할을 합니다. 다음은 Cytoscape.js에서 레이아웃을 지정하는 방법에 대한 예제 코드입니다.

const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'A' } },
    { data: { id: 'B' } },
    { data: { id: 'C' } },
    { data: { id: 'AB', source: 'A', target: 'B' } },
    { data: { id: 'BC', source: 'B', target: 'C' } },
  ],
  layout: {
    name: 'grid',
    rows: 1
  }
});

위의 예제 코드에서 cytoscape 함수를 사용하여 그래프 객체를 생성합니다. 객체를 생성할 때 layout 속성을 사용하여 레이아웃을 지정할 수 있습니다. 위의 예제에서는 ‘grid’라는 레이아웃 알고리즘을 사용하고 있습니다. ‘grid’ 레이아웃 알고리즘은 그래프를 격자 모양으로 배치하는 알고리즘입니다. 또한, rows 속성을 사용하여 한 행에 배치될 노드의 수를 지정할 수 있습니다.

Cytoscape.js에서 사용할 수 있는 다른 레이아웃 알고리즘에는 ‘circle’, ‘cose’, ‘cise’, ‘grid’, ‘preset’ 등이 있습니다. 각각의 알고리즘은 고유한 특징과 사용법을 가지고 있으며, 필요에 따라 적절한 알고리즘을 선택할 수 있습니다.

더 많은 Cytoscape.js의 레이아웃 알고리즘과 사용 방법에 대해서는 Cytoscape.js 문서를 참고하시기 바랍니다.