Cytoscape.js는 JavaScript로 작성된 강력한 그래프 시각화 도구입니다. 그룹화는 여러 노드를 하나의 그룹으로 묶어서 그래프를 보다 직관적으로 관리하고 시각화하는데 사용됩니다. Cytoscape.js에서 그래프를 그룹화하고 관리하기 위한 몇 가지 방법을 소개하겠습니다.

1. 비주얼 스타일로 그룹화하기

노드를 그룹화하여 시각적으로 구분할 수 있습니다. Cytoscape.js는 node.style() 기능을 사용하여 노드에 스타일을 지정할 수 있습니다. 그룹화된 노드에 대해서는 다른 스타일을 적용하여 그룹 간의 시각적인 구분을 만들 수 있습니다.

cy.nodes().style({
  'background-color': 'red' // 그룹화되지 않은 노드의 스타일
});

cy.elements(':parent').style({
  'background-color': 'blue' // 그룹화된 노드의 스타일
});

2. 그룹 요소로 노드 그룹화하기

노드를 그룹 요소로 묶어서 그룹화를 표현할 수 있습니다. Cytoscape.js에서는 cy.add()를 사용하여 그룹 요소를 생성하고 그룹화된 노드를 추가할 수 있습니다. 그룹 요소는 isParent 속성을 통해 식별되며, 노드들은 아래에 추가됩니다.

cy.add([
  { group: 'nodes', data: { id: 'group1' }, position: { x: 100, y: 100 }, },
  { group: 'nodes', data: { id: 'group2' }, position: { x: 200, y: 200 }, },
  { group: 'edges', data: { source: 'group1', target: 'group2' } },
  { group: 'nodes', data: { id: 'node1' }, position: { x: 150, y: 150 } },
  { group: 'nodes', data: { id: 'node2' }, position: { x: 250, y: 250 } },
]);

// 노드들을 그룹 요소에 추가
cy.getElementById('group1').move(cy.getElementById('node1'));
cy.getElementById('group2').move(cy.getElementById('node2'));

3. 그룹 확장 및 축소하기

그룹 요소를 확장 및 축소하여 그룹화 된 노드를 편리하게 관리할 수 있습니다. Cytoscape.js에서는 isParent 속성이 있는 노드에 대해 expand()와 collapse() 메서드를 사용하여 그룹을 확장 및 축소할 수 있습니다.

cy.getElementById('group1').expand();
cy.getElementById('group2').collapse();

위의 예제에서는 group1을 확장하고 group2를 축소하는 것을 볼 수 있습니다.

Cytoscape.js에서 그래프를 그룹화하고 관리하는 몇 가지 방법을 살펴보았습니다. 이를 통해 그래프를 더욱 직관적으로 시각화하고 관리할 수 있습니다. 더 자세한 내용은 Cytoscape.js 공식 문서를 참조하시기 바랍니다.