[javascript] Cytoscape.js를 사용하여 그래프를 애니메이션화하는 방법은 무엇인가요?

24 Nov 2023

javascript

다음은 Cytoscape.js를 사용하여 그래프를 애니메이션화하는 기본적인 방법입니다.

Cytoscape.js 라이브러리를 웹 페이지에 추가합니다. 다음과 같이 <script> 태그를 사용하여 라이브러리를 가져옵니다.

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

그래프 컨테이너를 HTML에 추가합니다. 다음과 같이 <div> 태그를 사용하여 그래프를 그릴 영역을 만듭니다.

<div id="graph-container"></div>

JavaScript 코드를 작성하여 그래프를 생성하고 애니메이션화합니다. 다음과 같이 코드를 작성합니다.

// 그래프 데이터 정의
var graphData = {
    nodes: [
        { data: { id: 'A' } },
        { data: { id: 'B' } },
        { data: { id: 'C' } }
    ],
    edges: [
        { data: { source: 'A', target: 'B' } },
        { data: { source: 'B', target: 'C' } },
        { data: { source: 'C', target: 'A' } }
    ]
};

// Cytoscape.js 인스턴스 생성 후 그래프 생성
var cy = cytoscape({
    container: document.getElementById('graph-container'), // 그래프를 그릴 컨테이너 지정
    elements: graphData, // 그래프 데이터 지정
    style: [ // 그래프 스타일 지정
        {
            selector: 'node',
            style: {
                'background-color': 'blue',
                'label': 'data(id)'
            }
        },
        {
            selector: 'edge',
            style: {
                'line-color': 'gray',
                'target-arrow-color': 'gray',
                'target-arrow-shape': 'triangle'
            }
        }
    ],
    layout: { // 그래프 레이아웃 지정
        name: 'grid'
    }
});

// 애니메이션 코드 작성
cy.animate({
    fit: {
        eles: cy.elements(),
        padding: 50
    },
    duration: 1000
});

위의 코드는 간단한 세 개의 노드와 세 개의 엣지를 가지는 그래프를 생성한 뒤, 그래프를 그리고 1초 동안 애니메이션으로 확대합니다.

이렇게 Cytoscape.js를 사용하여 그래프를 애니메이션화할 수 있습니다. Cytoscape.js에는 다양한 애니메이션 옵션과 API가 제공되므로, 이를 활용하여 원하는 애니메이션 효과를 구현할 수 있습니다. 더 자세한 내용은 Cytoscape.js 문서를 참고하시기 바랍니다.