[javascript] Cytoscape.js에서 그래프의 레이아웃을 설정하는 방법은 무엇인가요?

24 Nov 2023

javascript

가장 기본적인 레이아웃 알고리즘인 ‘grid’는 그래프를 격자 모양으로 배치합니다. 이 레이아웃은 다음과 같이 설정할 수 있습니다:

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    // 그래프의 요소들을 정의합니다.
  ],
  layout: {
    name: 'grid'
  }
});

또 다른 유용한 레이아웃 알고리즘으로는 ‘circle’, ‘concentric’, ‘breadthfirst’, ‘cose’, ‘cola’ 등이 있습니다. 각각의 레이아웃은 다음과 같은 방식으로 설정할 수 있습니다:

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    // 그래프의 요소들을 정의합니다.
  ],
  layout: {
    name: 'circle',
    spacingFactor: 2,  // 요소 사이의 간격을 설정합니다.
    startAngle: 3 / 2 * Math.PI  // 그래프의 시작 각도를 설정합니다.
  }
});

설정 가능한 레이아웃 알고리즘과 그에 따른 설정 옵션은 Cytoscape.js 문서를 참조하시기 바랍니다.