[javascript] Cytoscape.js에서 엣지의 방향성과 가중치를 설정하는 방법은 무엇인가요?

엣지의 방향성을 설정하려면, Cytoscape.js에서 제공하는 “arrows” 속성을 사용해야 합니다. 이 속성을 통해 엣지의 방향을 식별하는 화살표를 추가할 수 있습니다. 예를 들어, 다음과 같이 엣지에 방향성을 추가할 수 있습니다:

cy.add([
  { data: { id: 'a' } },
  { data: { id: 'b' } },
  { data: { id: 'ab', source: 'a', target: 'b' }, style: { 'arrow-direction': 'target' } }
]);

위의 예제에서 ‘a’와 ‘b’라는 두 개의 노드를 생성하고, ‘ab’라는 ID의 엣지를 생성하여 ‘a’에서 ‘b’로 향하도록 설정했습니다. ‘arrow-direction’ 스타일 속성을 ‘target’으로 설정하여 엣지의 끝에 화살표를 추가합니다.

엣지에 가중치를 추가하려면, 엣지의 ‘data’ 속성 중 ‘weight’ 속성을 사용할 수 있습니다. 가중치는 엣지의 중요도를 나타내는데 사용될 수 있습니다. 예를 들어, 다음과 같이 엣지에 가중치를 추가할 수 있습니다:

cy.add([
  { data: { id: 'a' } },
  { data: { id: 'b' } },
  { data: { id: 'ab', source: 'a', target: 'b', weight: 5 } }
]);

위의 예제에서는 ‘ab’라는 ID의 엣지에 ‘weight’ 속성을 추가하여 가중치를 5로 설정했습니다.

Cytoscape.js를 사용할 때 엣지의 방향성과 가중치를 설정하여 그래프를 더 풍부하게 표현하고 정보를 전달할 수 있습니다. 더 많은 정보와 예제는 Cytoscape.js 공식 문서를 참고하시기 바랍니다.