[javascript] Cytoscape.js에서 그래프의 특정 부분을 확대 또는 축소하여 사용자에게 집중할 수 있는 방법은 무엇인가요?
Cytoscape.js에서 그래프를 확대 또는 축소하는 기능은 zoom() 메서드를 사용하여 구현할 수 있습니다. 이 메서드를 사용하면 그래프의 현재 확대/축소 수준을 조절할 수 있습니다.
아래는 Cytoscape.js를 사용하여 그래프를 확대 또는 축소하는 간단한 예제 코드입니다.
// Cytoscape.js 그래프 생성
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// 그래프 요소 정의
// ...
],
// 그래프 스타일 정의
// ...
});
// 그래프 확대
cy.zoom({
level: cy.zoom() + 0.25, // 현재 확대/축소 수준에 0.25를 더해 확대
renderedPosition: { x: 0, y: 0 } // 확대 기준 위치 (옵션)
});
// 그래프 축소
cy.zoom({
level: cy.zoom() - 0.25, // 현재 확대/축소 수준에서 0.25를 뺀 축소
renderedPosition: { x: 0, y: 0 } // 축소 기준 위치 (옵션)
});
위의 예제 코드에서는 먼저 cytoscape() 함수를 사용하여 Cytoscape.js 그래프를 생성합니다. 그래프 생성 후 cy 변수를 사용하여 zoom() 메서드를 호출하여 확대 또는 축소를 수행합니다. level 매개변수를 사용하여 확대/축소 수준을 조절하고, renderedPosition 매개변수를 사용하여 확대 또는 축소할 기준 위치를 지정할 수 있습니다.
Cytoscape.js는 이외에도 다양한 그래프 조작 및 시각화 기능을 제공하므로, 자세한 내용은 Cytoscape.js 공식 문서를 참조하세요.