[javascript] Cytoscape.js에서 그래프의 노드 및 엣지에 레이블을 추가하는 방법은 무엇인가요?

24 Nov 2023

javascript

노드에 레이블 추가하기

Cytoscape.js에서 노드에 레이블을 추가하려면 label 속성을 사용하면 됩니다. 아래 예제는 그래프에 노드를 추가하고, 각 노드에 레이블을 설정하는 예시입니다.

var cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    { data: { id: 'a', label: 'Node A' } },
    { data: { id: 'b', label: 'Node B' } },
    { data: { id: 'c', label: 'Node C' } }
  ],
  
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(label)'
      }
    }
  ]
});

위의 예제에서 data 객체의 label 속성을 사용하여 각 노드의 레이블을 설정하고, 스타일 규칙에서 label 속성을 사용하여 레이블을 표시하도록 지정합니다.

엣지에 레이블 추가하기

Cytoscape.js에서 엣지에 레이블을 추가하려면 label 속성을 사용하면 됩니다. 아래 예제는 그래프에 엣지를 추가하고, 각 엣지에 레이블을 설정하는 예시입니다.

var cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'edge1', source: 'a', target: 'b', label: 'Edge 1' } },
    { data: { id: 'edge2', source: 'b', target: 'a', label: 'Edge 2' } }
  ],
  
  style: [
    {
      selector: 'edge',
      style: {
        'label': 'data(label)'
      }
    }
  ]
});

위의 예제에서 data 객체의 label 속성을 사용하여 각 엣지의 레이블을 설정하고, 스타일 규칙에서 label 속성을 사용하여 레이블을 표시하도록 지정합니다.

위의 예제 코드를 사용하여 Cytoscape.js를 통해 그래프의 노드 및 엣지에 레이블을 손쉽게 추가할 수 있습니다. 자세한 내용은 Cytoscape.js의 공식 문서를 참조하시기 바랍니다.