1. 이벤트 리스너 등록하기

사용자가 특정 부분을 클릭하거나 드래그할 때 이벤트를 캡처하기 위해 이벤트 리스너를 등록해야 합니다. Cytoscape.js는 cy.on() 메서드를 사용하여 이벤트 리스너를 등록할 수 있습니다.

cy.on('tap', function(event) {
  var target = event.target;
  // 클릭된 요소인 노드를 확인할 수 있습니다.
  if(target.isNode()) {
    var position = event.position;
    var nodeId = target.id();
    // 새로운 노드를 생성하고 그래프에 추가할 수 있습니다.
    // position은 클릭된 위치를 나타냅니다.
    // nodeId는 클릭된 노드의 ID입니다.
    // ...
  }
});

위의 예제에서는 tap 이벤트를 사용했습니다. 원하는 이벤트 유형에 따라 다른 이벤트를 선택할 수 있습니다. 자세한 이벤트 종류는 Cytoscape.js 이벤트 문서를 참조하세요.

2. 새로운 노드 또는 엣지 추가하기

위의 이벤트 리스너에서 새로운 노드 또는 엣지를 추가할 수 있습니다. 예를 들어 새로운 노드를 생성하고 그래프에 추가하는 코드는 다음과 같습니다.

var newNode = cy.add({
  group: 'nodes',
  data: { id: 'newNode' },
  position: { x: position.x, y: position.y }
});

위의 코드에서는 cy.add() 메서드를 사용하여 새로운 노드를 생성하고 position 파라미터를 사용하여 클릭한 위치에 노드를 배치합니다.

새로운 엣지를 추가하려면 다음과 같이 cy.add() 메서드를 사용할 수 있습니다.

var sourceNode = cy.$('#sourceNode');
var targetNode = cy.$('#targetNode');

var newEdge = cy.add({
  group: 'edges',
  data: { id: 'newEdge', source: sourceNode.id(), target: targetNode.id() }
});

위의 코드에서는 cy.$() 메서드를 사용하여 기존의 노드를 가져와서 사용합니다. source와 target 속성을 사용하여 엣지의 출발 노드와 도착 노드를 지정합니다.

새로운 노드 또는 엣지를 추가한 후에는 적절한 스타일을 지정할 수 있습니다. 이에 대한 자세한 내용은 Cytoscape.js 스타일 문서를 참조하세요.

위의 예제에서는 간단한 방법으로 노드와 엣지를 추가하는 방법을 보여주었습니다. 더 복잡한 그래프 구조를 만들기 위해서는 다른 속성과 메서드를 사용해야 할 수도 있습니다. 자세한 내용은 Cytoscape.js 문서를 참조하세요.