// Cytoscape.js 인스턴스 생성
var cy = cytoscape({
  container: document.getElementById('cy'),

  elements: [
    // 그래프의 루트 노드들을 추가합니다
    { data: { id: 'A' } },
    { data: { id: 'B' } },
    { data: { id: 'C' } },
    { data: { id: 'D' } },

    // 서브그래프 내의 노드들을 추가합니다.
    { data: { id: 'X' }, parent: 'A' },
    { data: { id: 'Y' }, parent: 'A' },
    { data: { id: 'Z' }, parent: 'A' },
  ],

  style: [
    // 노드와 엣지의 스타일을 지정합니다.
    {
      selector: 'node',
      style: {
        'background-color': 'green',
        'label': 'data(id)'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': 'gray'
      }
    }
  ],

  layout: {
    name: 'breadthfirst' // 그래프의 노드 배치 알고리즘
  }
});