[javascript] Cytoscape.js에서 그래프의 노드 이미지를 추가하여 다양한 노드 유형을 표현하는 방법은 무엇인가요?

24 Nov 2023

javascript

이미지 파일 준비하기: 먼저, 각 노드 유형에 대한 이미지 파일을 준비해야 합니다. 이미지 파일은 일반적으로 PNG 또는 JPG 형식을 사용합니다. 이 이미지 파일은 애플리케이션 디렉토리에 저장되어야 합니다.
Cytoscape.js 라이브러리 가져오기: Cytoscape.js를 사용하기 위해 해당 라이브러리를 웹 페이지에 추가합니다. 아래의 코드 스니펫을 사용할 수 있습니다.
```
<script src="https://unpkg.com/cytoscape@3.15.2/dist/cytoscape.min.js"></script>
```
Cytoscape.js 그래프 생성하기: 다음으로 Cytoscape.js를 사용하여 그래프를 생성합니다. 필요한 노드와 엣지를 정의하고, 노드 이미지 속성을 추가할 수 있습니다. 예를 들어, 아래 코드는 “circle” 유형의 노드에 “circle.png” 이미지를 사용하는 방법을 보여줍니다.
```
var cy = cytoscape({
  container: document.getElementById("cy"),

  elements: [
    { data: { id: "node1" } },
    { data: { id: "node2" } }
  ],

  style: [
    {
      selector: "node",
      style: {
        "background-image": "url(circle.png)",
        "background-fit": "cover",
        "width": "50px",
        "height": "50px"
      }
    }
  ],

  layout: {
    name: "grid"
  }
});
```
위 코드에서 “circle.png”은 노드 이미지 파일의 경로입니다. “background-image” 스타일 속성을 사용하여 이미지를 설정하고, “width”와 “height” 속성을 사용하여 이미지의 크기를 조정합니다.

다른 노드 유형에 대한 이미지 추가하기: 다른 노드 유형에 대해서도 동일한 방식으로 이미지를 추가할 수 있습니다. 각 노드 유형에 다른 이미지 파일을 사용하고, 스타일 시트에서 해당 노드 유형에 대한 스타일을 정의합니다.

style: [
    {
      selector: "node[type='circle']",
      style: {
        "background-image": "url(circle.png)",
        "background-fit": "cover",
        "width": "50px",
        "height": "50px"
      }
    },
    {
      selector: "node[type='square']",
      style: {
        "background-image": "url(square.png)",
        "background-fit": "cover",
        "width": "50px",
        "height": "50px"
      }
    }
  ],

위의 코드에서 “type” 속성 값을 사용하여 노드 유형을 구분하고, 해당하는 이미지 파일을 설정합니다.

이제 Cytoscape.js에서 그래프의 노드 이미지를 추가하여 다양한 노드 유형을 표현할 수 있습니다. 이를 통해 시각적으로 다양한 유형의 노드를 구별하고, 더 직관적인 인터페이스를 제공할 수 있습니다.

참고 문서:

Cytoscape.js 공식 문서: https://js.cytoscape.org/
Cytoscape.js GitHub 저장소: https://github.com/cytoscape/cytoscape.js