[javascript] Cytoscape.js에서 그래프에 레이어를 추가하여 여러 그래프를 겹쳐 표시하는 방법은 무엇인가요?

24 Nov 2023

javascript

아래는 Cytoscape.js를 사용하여 여러 그래프를 겹쳐 표시하는 방법에 대한 예제 코드입니다.

// Cytoscape.js 인스턴스 생성
var cy = cytoscape();

// 첫 번째 그래프 생성
var graph1 = cy.add([
  { data: { id: 'node1' } },
  { data: { id: 'node2' } },
  { data: { id: 'edge1', source: 'node1', target: 'node2' } }
]);

// 두 번째 그래프 생성
var graph2 = cy.add([
  { data: { id: 'node3' } },
  { data: { id: 'node4' } },
  { data: { id: 'edge2', source: 'node3', target: 'node4' } }
]);

// 새로운 레이어 생성
var layer = cy.addLayer('background');

// 첫 번째 그래프를 새로운 레이어에 추가
layer.add(graph1);

// 두 번째 그래프를 새로운 레이어에 추가
layer.add(graph2);

// 레이어의 z-index를 조정하여 겹치는 그래프의 표시 순서를 제어할 수 있습니다.
layer.zIndex(0); // 첫 번째 그래프가 가장 아래로 표시됩니다.

위의 코드에서 addLayer 함수는 새로운 레이어를 생성하고 add 함수는 그래프 노드와 엣지를 추가하는 데 사용됩니다. zIndex 함수를 사용하여 레이어의 표시 순서를 조정할 수 있습니다.

이렇게하면 두 개의 그래프가 서로 다른 레이어에 그려지며 겹처서 표시됩니다. 각 레이어의 z-index를 조정하여 겹치는 그래프의 표시 순서를 제어할 수 있습니다.

추가로, Cytoscape.js는 다양한 그래프 레이아웃 및 스타일링 옵션을 제공하여 그래프를 자유롭게 수정하고 사용자 정의할 수 있습니다. 자세한 내용은 Cytoscape.js 공식 문서를 참조하시기 바랍니다.