[javascript] Cytoscape.js에서 그래프의 노드를 동적으로 생성하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Cytoscape.js를 프로젝트에 추가합니다. 일반적으로 cytoscape npm 패키지를 사용하여 설치할 수 있습니다.

npm install cytoscape

그런 다음, HTML 파일에 Cytoscape.js 라이브러리를 가져옵니다.

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

    <script>
        // Cytoscape.js를 이용한 그래프 생성 코드를 작성합니다.
    </script>
</body>
</html>

이제 실제로 노드를 추가해보겠습니다. JavaScript 코드 내부에서 cytoscape 객체를 생성하고 노드를 추가할 수 있습니다.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var cy = cytoscape({
            container: document.getElementById('cy'),
            elements: [
                { data: { id: 'node1' } },
                { data: { id: 'node2' } },
                { data: { id: 'node3' } }
            ]
        });

        // 새로운 노드 추가
        cy.add({ data: { id: 'node4' } });
    });
</script>

위의 코드에서 cy.add({ data: { id: 'node4' } }); 라인은 새로운 노드를 추가하는 코드입니다. 이렇게 하면 ID가 ‘node4’인 새로운 노드가 생성됩니다.

추가적인 스타일이나 이벤트 처리 등의 작업을 원하면 Cytoscape.js 문서를 참조하세요. Cytoscape.js는 다양한 기능을 제공하며, 그래프 시각화에 사용되는 많은 옵션과 유용한 도구들을 제공합니다.