Cytoscape.js에서 새로운 노드를 생성하려면 add 메서드를 사용합니다. 이 메서드는 기존 그래프에 새로운 요소를 추가할 수 있습니다. 노드를 추가할 때는 해당 노드의 속성을 지정해야합니다. 속성은 {} 형태로 표현되며, 각 노드의 고유 ID와 원하는 속성들을 포함할 수 있습니다.

다음은 Cytoscape.js를 사용하여 그래프에 새로운 노드를 추가하는 예제입니다:

// Cytoscape.js 인스턴스 생성
var cy = cytoscape({
  container: document.getElementById('cy'), // 그래프를 표시할 HTML 요소 지정
  elements: [ // 초기 그래프 요소 정의
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'c' } }
  ],
  // 그래프 스타일 설정
  style: [
    // 스타일 정의
    {
      selector: 'node',
      style: {
        'background-color': '#ad1a66',
        'label': 'data(id)'
      }
    }
  ]
});

// 새로운 노드 추가
cy.add({
  data: { id: 'd' }, // 새로운 노드의 ID
  position: { x: 100, y: 100 } // 새로운 노드의 위치
});

위 코드는 초기 그래프에 노드 ‘a’, ‘b’, ‘c’를 포함하고 있습니다. 그리고 cy.add 메서드를 사용하여 노드 ‘d’를 추가하고, 해당 노드의 ID와 초기 위치를 지정하고 있습니다.

사용자의 입력이나 외부 데이터를 통해 그래프를 확장하고 싶다면, 새로운 노드를 추가하는 로직을 사용자 입력 또는 외부 데이터에 맞게 구현하면 됩니다. 예를 들어, 버튼 클릭이나 AJAX 요청 등의 이벤트 핸들러 내에서 cy.add 메서드를 호출하여 새로운 노드를 추가할 수 있습니다.

이렇게 새로운 노드를 동적으로 추가하면 그래프가 확장되고, 변경된 그래프는 화면에 업데이트됩니다. 사용자의 입력이나 외부 데이터에 따라 그래프를 동적으로 확장할 수 있게 되며, Cytoscape.js의 다양한 기능을 활용하여 그래프 시각화를 할 수 있습니다.

더 자세한 내용과 더 많은 예제는 Cytoscape.js 공식 홈페이지를 참고하시기 바랍니다.