[javascript] Cytoscape.js를 사용하여 그래프를 생성하는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js 라이브러리를 프로젝트에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.18.2/cytoscape.min.js"></script>

그래프를 표현할 HTML 요소를 생성합니다.

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

JavaScript 코드에서 Cytoscape 인스턴스를 생성하고 그래프를 정의합니다.

var cy = cytoscape({
  container: document.getElementById('graph'),
  elements: [
    { data: { id: 'node1' } },
    { data: { id: 'node2' } },
    { data: { id: 'edge1', source: 'node1', target: 'node2' } }
  ],
  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#ff0000',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#0000ff'
      }
    }
  ],
  layout: {
    name: 'grid'
  }
});

위의 코드에서는 Cytoscape 인스턴스를 생성하고, container 속성으로 그래프가 표시될 HTML 요소의 ID를 지정합니다. elements 속성으로 그래프의 노드와 엣지를 정의하고, style 속성으로 노드와 엣지의 스타일을 지정합니다. layout 속성으로 그래프의 배치 방식을 설정할 수 있습니다.

그래프를 화면에 표시합니다.

cy.mount(document.getElementById('graph'));

위의 코드에서 cy.mount() 메서드를 사용하여 그래프를 지정한 HTML 요소에 표시합니다.

이제 Cytoscape.js를 사용하여 그래프를 생성하고 조작할 수 있습니다.

더 자세한 내용은 Cytoscape.js 공식 문서를 참조하세요.