Cytoscape.js는 JavaScript 기반의 그래프 시각화 라이브러리로, 다양한 기능을 제공합니다. 그 중에서도 트리 구조나 하위 그래프를 표현하기 위해서는 노드에 자식 노드를 추가하는 방법을 사용할 수 있습니다.

노드에 자식 노드를 추가하는 방법은 addChild() 메서드를 사용하는 것입니다. 이 메서드는 특정 노드에 새로운 자식 노드를 추가할 때 사용됩니다. 아래의 예제 코드를 통해 자식 노드를 추가하는 방법을 살펴보겠습니다.

var cy = cytoscape({  // Cytoscape.js 인스턴스 생성
  container: document.getElementById('cy'),  // 그래프를 렌더링할 요소 지정
});

// 루트 노드 생성
var rootNode = cy.add({
  data: { id: 'root' }
});

// 자식 노드 생성
var childNode1 = cy.add({
  data: { id: 'child1' }
});
var childNode2 = cy.add({
  data: { id: 'child2' }
});

// 루트 노드에 자식 노드 추가
rootNode.addChild(childNode1);
rootNode.addChild(childNode2);

위의 코드에서는 우선 Cytoscape.js 인스턴스를 생성하고, 그래프를 렌더링할 요소를 지정합니다. 그 다음, rootNode라는 루트 노드를 생성하고 childNode1과 childNode2라는 자식 노드를 생성합니다. 마지막으로, rootNode.addChild()를 사용하여 루트 노드에 자식 노드를 추가합니다.

이렇게 하면 노드 간의 계층 구조를 형성하여 트리 구조나 하위 그래프를 표현할 수 있습니다. 추가적으로 노드의 위치, 스타일 등을 원하는 대로 설정하여 그래프를 더욱 다양하게 표현할 수 있습니다.

더 자세한 내용은 Cytoscape.js 공식 문서(https://js.cytoscape.org/)를 참고하시기 바랍니다.