[javascript] Cytoscape.js에서 그래프의 특정 부분을 클릭하거나 드래그하여 하위 그래프를 확장 또는 축소하는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js에서는 expand와 collapse라는 두 가지 기본 레이아웃 옵션을 사용하여 하위 그래프를 확장하거나 축소할 수 있습니다. 이를 위해 다음과 같이 코드를 작성할 수 있습니다:

// Cytoscape.js 초기화
var cy = cytoscape({
  container: document.getElementById('cy'),  // 그래프를 표시할 요소의 ID
  elements: [ /* 그래프 요소들 */ ],
  layout: { name: 'grid' },  // 그래프 레이아웃 설정
  // 이벤트 리스너 등록
  ready: function(){
    cy.on('tap', 'node', function(event){
      var node = event.target;  // 이벤트가 발생한 노드
      // 'expand' 레이아웃을 사용하여 하위 그래프 확장
      node.expandCollapse('expand');
      // 'collapse' 레이아웃을 사용하여 하위 그래프 축소
      // node.expandCollapse('collapse');
    });
  }
});

위 코드에서는 Cytoscape.js를 초기화하고, 레이아웃을 설정하고, 이벤트 리스너를 등록하고 있습니다. cy.on('tap', 'node', ...)을 사용하여 노드를 클릭할 때 expandCollapse() 함수를 호출하여 하위 그래프를 확장하거나 축소합니다. expandCollapse() 함수의 인자로 expand 또는 collapse를 전달하여 원하는 작업을 수행할 수 있습니다.

이 예제 코드를 사용하여 Cytoscape.js에서 그래프의 특정 부분을 클릭하거나 드래그하여 하위 그래프를 확장 또는 축소할 수 있습니다. 좀 더 자세한 내용은 Cytoscape.js 문서를 참조하십시오.