[javascript] Cytoscape.js에서 그래프의 노드 크기를 조정하는 방법은 무엇인가요?

24 Nov 2023

javascript

style 객체에서 width와 height 속성을 사용하여 각 노드의 크기를 정의할 수 있습니다. 예를 들어, 모든 노드의 크기를 30px로 설정하려면 다음과 같이 코드를 작성합니다.

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    // 그래프 요소 정의
  ],
  style: [
    {
      selector: 'node',
      style: {
        'width': '30px',
        'height': '30px'
      }
    }
  ]
});

노드 크기를 동적으로 조정하려면 data 객체에서 노드에 대한 width와 height 속성을 추가 또는 수정할 수 있습니다. 아래의 예제에서는 모든 노드에 대해 노드 크기를 랜덤하게 변경하는 함수를 작성합니다.

// 각 노드에 대해 크기를 랜덤하게 조정하는 함수
function resizeNodesRandomly() {
  var nodes = cy.nodes();
  
  nodes.forEach(function(node) {
    var randomWidth = Math.floor(Math.random() * 50) + 10; // 10 ~ 60 사이의 랜덤한 너비
    var randomHeight = Math.floor(Math.random() * 50) + 10; // 10 ~ 60 사이의 랜덤한 높이
    
    node.data('width', randomWidth);
    node.data('height', randomHeight);
  });
}

// 함수 호출
resizeNodesRandomly();

Cytoscape.js는 layout을 사용하여 그래프의 노드 크기를 자동으로 조정하는 기능도 제공합니다. 예를 들어, cose 레이아웃을 사용하여 그래프를 정렬하고 노드 크기를 자동으로 조정하려면 다음과 같이 코드를 작성합니다.

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    // 그래프 요소 정의
  ],
  layout: {
    name: 'cose',
    animate: true // 애니메이션 효과 사용 여부
  }
});

위의 방법을 통해 Cytoscape.js에서 그래프의 노드 크기를 조정할 수 있습니다. 자세한 내용은 Cytoscape.js 문서를 참조하세요.