[javascript] Cytoscape.js에서 그래프의 특정 요소를 드래그하여 이동하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Cytoscape.js 라이브러리를 HTML 페이지에 추가합니다. cytoscape.js 파일을 다운로드하거나, CDN을 통해 가져올 수 있습니다.

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

그 후, 그래프를 생성하고 드래그 이동 기능을 활성화합니다. 아래는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Cytoscape.js Dragging Example</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
  <div id="cy"></div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var cy = cytoscape({
        container: document.getElementById("cy"),
        elements: [
          { data: { id: "node1" }, position: { x: 100, y: 100 } },
          { data: { id: "node2" }, position: { x: 200, y: 200 } },
          { data: { id: "edge1", source: "node1", target: "node2" } }
        ],
        style: [
          { selector: "node", style: { "background-color": "#blue" } },
          { selector: "edge", style: { "width": 3 } }
        ]
      });

      cy.nodes().forEach(node => {
        node.draggable(true); // 요소를 드래그 가능하게 설정
      });
    });
  </script>
</body>
</html>

위 코드에서 cytoscape() 함수를 호출하여 Cytoscape.js 인스턴스를 생성합니다. container 옵션은 그래프가 표시될 <div> 요소를 지정합니다. elements 옵션으로 그래프 요소를 정의하고, style 옵션으로 그래프의 스타일을 지정합니다.

cy.nodes().forEach()를 사용하여 그래프의 모든 노드를 선택하고, draggable(true)로 드래그 가능하도록 설정합니다.

이제 웹 페이지를 열어서 그래프 요소를 드래그하여 이동할 수 있습니다.