[javascript] Cytoscape.js에서 그래프의 엣지에 레이블을 추가하여 관계의 이름이나 설명을 표현하는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js는 JavaScript 기반의 그래프 시각화 라이브러리입니다. 그래프의 엣지에 레이블을 추가하여 관계의 이름이나 설명을 표현하는 방법은 간단합니다. 엣지 레이블을 추가하는 방법에 대해 알아보겠습니다.

먼저, Cytoscape.js를 사용하기 위해 필요한 파일들을 다운로드하고 HTML 문서에 추가합니다. 다음은 Cytoscape.js의 최신 버전을 다운로드하고 HTML 문서에 추가하는 예제입니다.

<!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>
    // 그래프 생성 및 엣지 레이블 추가 코드 작성
  </script>
</body>
</html>

그래프를 생성하고 엣지에 레이블을 추가하는 코드를 작성해보겠습니다.

var cy = cytoscape({
  container: document.getElementById('cy'),

  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b', label: 'Relationship' } }
  ],

  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle',
        'curve-style': 'bezier',
        'label': 'data(label)'
      }
    }
  ],

  layout: {
    name: 'grid',
    rows: 1
  }
});

이 코드에서 중요한 부분은 엣지 객체를 생성할 때 label 속성을 추가하는 것입니다. 엣지의 label 속성에 표현하고자 하는 레이블을 지정하면 해당 엣지에 레이블이 표시됩니다.

스타일 규칙에서 엣지 스타일을 정의하는 부분에서 'label': 'data(label)' 속성을 추가하면 엣지에 지정된 레이블이 표시됩니다. 이렇게 함으로써 그래프의 엣지에 레이블을 추가하여 관계의 이름이나 설명을 표현할 수 있게 됩니다.

Cytoscape.js를 사용하면 그래프의 엣지에 레이블을 추가하여 관계의 이름이나 설명을 표현할 수 있습니다. 자세한 내용은 Cytoscape.js 공식 문서를 참조하시기 바랍니다.

참고 링크:

Cytoscape.js 공식 문서