[javascript] Cytoscape.js에서 그래프의 엣지에 선 스타일을 적용하여 방향성 또는 관계의 종류를 시각적으로 나타내는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js에서 그래프의 엣지에 선 스타일을 적용하여 방향성 또는 관계의 종류를 시각적으로 나타내는 방법은 여러 가지가 있습니다.

첫 번째로는 엣지의 화살표를 사용하는 방법입니다. 엣지의 direction 속성을 설정하여 방향성을 지정하고, 화살표 형태를 설정할 수 있습니다. 아래는 예제 코드입니다.

cy.add([
  { group: 'nodes', data: { id: 'a' } },
  { group: 'nodes', data: { id: 'b' } },
  { group: 'edges', data: { id: 'ab', source: 'a', target: 'b', direction: '->' } }
]);

cy.style().selector('edge').css({
  'target-arrow-shape': 'triangle',
  'target-arrow-color': '#888'
}).update();

두 번째로는 엣지의 선 스타일을 변경하는 방법입니다. 엣지의 line-style 속성을 설정하여 선의 스타일을 변경할 수 있습니다. 아래는 예제 코드입니다.

cy.add([
  { group: 'nodes', data: { id: 'a' } },
  { group: 'nodes', data: { id: 'b' } },
  { group: 'edges', data: { id: 'ab', source: 'a', target: 'b', lineStyle: 'dashed' } }
]);

cy.style().selector('edge').css({
  'line-style': 'dashed'
}).update();

위의 예제 코드에서는 방향성을 표현하지 않았지만, direction 속성이나 line-style 속성을 통해 엣지의 형태를 변경하여 원하는 방향성 또는 관계의 종류를 시각적으로 나타낼 수 있습니다.

참고 자료:

Cytoscape.js Style Manual: https://js.cytoscape.org/#style/manual
Cytoscape.js Edge API: https://js.cytoscape.org/#edges