[javascript] Cytoscape.js에서 그래프의 특정 부분을 확대 또는 축소하여 볼 수있는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js에서 그래프를 확대 또는 축소하는 방법에는 두 가지가 있습니다. 첫 번째는 zoom 메소드를 사용하는 것이며, 두 번째는 pan 메소드를 사용하는 것입니다.

// 그래프 객체 생성
var cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    // 그래프 요소들
  ],
  
  layout: {
    // 레이아웃 설정
  }
});

// 그래프 확대
cy.zoom({
  level: 1.5,    // 확대할 레벨 (1보다 큰 값)
  position: { x: 100, y: 100 },    // 확대할 중심 좌표
});

// 그래프 축소
cy.zoom({
  level: 0.5,    // 축소할 레벨 (1보다 작은 값)
  position: { x: 200, y: 200 },    // 축소할 중심 좌표
});

// 그래프 이동
cy.pan({
  x: 50,    // 이동할 x축 거리
  y: -50    // 이동할 y축 거리
});

위의 코드는 Cytoscape.js에서 그래프를 확대 또는 축소하는 방법을 보여줍니다. zoom 메소드를 사용하여 그래프를 확대 또는 축소하고, pan 메소드를 사용하여 그래프를 이동할 수 있습니다. position 매개 변수를 사용하여 확대 또는 축소할 중심 좌표를 지정할 수 있습니다.

더 많은 정보와 예제는 Cytoscape.js 문서를 확인하십시오.