[javascript] Cytoscape.js에서 간단한 그래프 예제를 만들어 보는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저 HTML 파일을 생성하고 Cytoscape.js 라이브러리를 로드합니다. 필요한 경우, Cytoscape.js를 다운로드하고 해당 파일을 HTML에 추가하는 방법도 있습니다. 아래는 CDN을 이용하여 Cytoscape.js를 로드하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Cytoscape.js Simple Graph Example</title>
    <style>
        #cy {
            width: 600px;
            height: 400px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="cy"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.16.0/cytoscape.min.js"></script>
    <script>
        // 그래프 생성
        var cy = cytoscape({
            container: document.getElementById('cy'),
            elements: [
                { data: { id: 'node1' } },
                { data: { id: 'node2' } },
                { data: { id: 'edge1', source: 'node1', target: 'node2' } }
            ],
            style: [
                {
                    selector: 'node',
                    style: {
                      'background-color': '#007bff',
                      'label': 'data(id)'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                      'width': 2,
                      'line-color': '#ccc'
                    }
                }
            ],
            layout: {
                name: 'grid'
            }
        });
    </script>
</body>
</html>

이 예제는 빈 그래프를 생성하고 두 개의 노드와 한 개의 엣지를 추가하는 간단한 예제입니다. 노드 ID는 node1과 node2이며, 엣지의 ID는 edge1입니다. 스타일을 정의하여 노드의 배경색과 라벨, 엣지의 두께와 색상을 지정할 수 있습니다. 레이아웃으로는 그리드 레이아웃을 사용하였습니다.

해당 예제를 실행하면, 브라우저에 그래프가 표시됩니다. 노드와 엣지는 정의된 스타일에 따라 표시되며, 그리드 레이아웃을 통해 간격이 균일하게 배치됩니다.

Cytoscape.js는 더 복잡한 그래프를 생성하고 조작하는 다양한 기능을 제공합니다. 자세한 내용은 Cytoscape.js 공식 문서를 참조하시기 바랍니다.