노드 스타일 변경

노드의 스타일을 변경하기 위해서는 해당 노드의 선택자와 스타일 속성을 설정해야 합니다. 아래의 예제 코드에서는 선택자 node를 사용하고, background-color 속성을 변경하여 노드의 배경색을 설정합니다.

cy.nodes().forEach(function(node) {
  node.style('background-color', 'red');
});

위 코드는 모든 노드의 배경색을 빨간색으로 설정하는 예입니다. 애플리케이션에 맞게 선택자와 스타일 속성을 변경하여 원하는 스타일을 적용할 수 있습니다.

엣지 스타일 변경

엣지의 스타일을 변경하는 방법도 비슷합니다. 아래의 예제 코드에서는 선택자 edge와 line-color 속성을 사용하여 모든 엣지의 선 색상을 변경합니다.

cy.edges().forEach(function(edge) {
  edge.style('line-color', 'blue');
});

위 코드는 모든 엣지의 선 색상을 파란색으로 설정하는 예입니다. 마찬가지로 선택자와 스타일 속성을 조정하여 엣지의 스타일을 변경할 수 있습니다.

기타 스타일 속성

Cytoscape.js에서는 노드와 엣지에 적용할 수 있는 다양한 스타일 속성이 있습니다. 일부 주요한 스타일 속성의 예는 다음과 같습니다.

• background-color: 노드의 배경색
• border-color: 노드의 테두리 색상
• border-width: 노드의 테두리 두께
• line-color: 엣지의 선 색상
• line-style: 엣지의 선 스타일 (dotted, dashed 등)
• width, height: 노드의 크기

이 외에도 다양한 스타일 속성을 사용하여 Cytoscape.js 그래프의 노드와 엣지를 스타일링할 수 있습니다. 자세한 내용은 Cytoscape.js 공식 문서를 참조하시면 도움이 될 것입니다.

참고 자료:

• Cytoscape.js 공식 문서