[javascript] Cytoscape.js에서 그래프에 색상을 적용하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Cytoscape.js를 사용하기 위해 HTML 문서에 해당 라이브러리를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cytoscape.js Example</title>
    <script src="https://unpkg.com/cytoscape@3.18.2/dist/cytoscape.min.js"></script>
</head>
<body>
    <div id="cy"></div>
    <script src="script.js"></script>
</body>
</html>

다음으로, 스크립트 파일(script.js)에 Cytoscape.js를 초기화하고 그래프를 생성합니다. 여기서는 간단한 노드와 엣지를 추가한 예시 그래프를 생성하겠습니다.

// Cytoscape.js 초기화
var cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    // 노드 추가
    { data: { id: 'node1' } },
    { data: { id: 'node2' } },
    { data: { id: 'node3' } },
    
    // 엣지 추가
    { data: { id: 'edge1', source: 'node1', target: 'node2' } },
    { data: { id: 'edge2', source: 'node2', target: 'node3' } }
  ],
  
  style: [
    // 노드의 색상 지정
    {
      selector: 'node',
      style: {
        'background-color': 'red',
        'label': 'data(id)'
      }
    },
    
    // 엣지의 색상 지정
    {
      selector: 'edge',
      style: {
        'line-color': 'blue',
        'target-arrow-color': 'blue',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  
  layout: {
    name: 'grid',
    rows: 1
  }
});

위의 코드에서는 먼저 cytoscape() 메서드를 사용하여 Cytoscape.js 객체를 초기화하고, container 속성에는 그래프가 그려질 HTML 요소의 ID를 지정합니다 (<div id="cy"></div>).

elements 속성에는 그래프를 구성하는 노드와 엣지의 정보를 배열 형태로 지정합니다. data 객체에는 각 요소의 식별자와 연결 정보를 지정할 수 있습니다.

style 속성에는 노드와 엣지의 스타일을 정의하는 규칙을 배열로 작성합니다. selector 속성에는 스타일을 적용할 요소의 선택자를 지정하고, style 속성에는 해당 요소의 스타일을 지정합니다.

위의 예시에서는 background-color 속성을 사용하여 노드의 배경색을 지정하고, line-color 속성을 사용하여 엣지의 선 색상을 지정하였습니다.

마지막으로, layout 속성을 통해 그래프의 레이아웃을 지정할 수 있습니다. 위의 예시에서는 grid 레이아웃을 사용하고, 한 줄에 요소를 배치하기 위해 rows 속성을 1로 설정하였습니다.

이와 같이 Cytoscape.js를 사용하여 그래프에 색상을 적용할 수 있습니다. 다양한 속성과 스타일 옵션을 활용하여 그래프를 더욱 다채롭게 표현할 수 있습니다. 자세한 내용은 Cytoscape.js 공식 문서를 참고하시기 바랍니다.