Cytoscape.js에서 노드와 엣지의 위치를 수동으로 설정하는 방법은 다음과 같습니다.

1. 노드의 위치 설정

   cy.$('#node-id').position({ x: 100, y: 200 });
   

   위의 코드에서 '#node-id'는 노드의 고유한 식별자입니다. position() 함수는 노드의 위치를 설정하기 위해 사용됩니다. { x: 100, y: 200 }은 노드의 x좌표와 y좌표를 나타내는 객체입니다. 원하는 위치로 x좌표와 y좌표를 설정하면 해당 노드가 해당 위치로 이동합니다.

2. 엣지의 위치 설정

   cy.$('#edge-id').source().position({ x: 100, y: 200 });
   cy.$('#edge-id').target().position({ x: 300, y: 400 });
   

   위의 코드에서 '#edge-id'는 엣지의 고유한 식별자입니다. source() 함수와 target() 함수는 엣지의 출발지와 목적지 노드를 가져오기 위해 사용됩니다. position() 함수는 노드의 위치를 설정하기 위해 사용됩니다. 출발지와 목적지 노드의 위치를 설정하여 엣지를 원하는 위치로 이동시킬 수 있습니다.

이렇게 하면 Cytoscape.js에서 노드와 엣지의 위치를 수동으로 설정할 수 있습니다. 이를 통해 그래프를 원하는 방식으로 배치하고 시각화할 수 있습니다. Cytoscape.js의 공식 문서를 참조하면 더 자세한 정보를 얻을 수 있습니다.