Cytoscape.js에서 엣지에 가중치 또는 거리 정보를 적용하려면 엣지의 데이터에 해당 정보를 포함시켜야 합니다. 예를 들어, 엣지의 가중치를 표현하려면 엣지 객체에 ‘weight’라는 키와 해당 가중치 값을 할당할 수 있습니다.

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    { data: { id: 'ab', source: 'a', target: 'b', weight: 5 } }
  ]
});

위의 예제에서 ‘ab’라는 ID를 가진 엣지는 ‘a’와 ‘b’라는 노드 사이의 관계를 나타냅니다. ‘weight’ 속성을 사용하여 엣지의 가중치를 5로 설정했습니다.

엣지의 가중치를 시각적으로 표현하려면 스타일 시트를 사용할 수 있습니다. 다음은 엣지의 가중치에 따라 엣지의 두께를 조정하는 스타일 시트의 예입니다.

cy.style().selector('edge').style({
  'width': function(ele) {
    return ele.data('weight') * 2; // 가중치에 2를 곱하여 두께 설정
  }
}).update();

위의 코드는 ‘width’ 속성의 값을 엣지의 가중치 값에 따라 동적으로 조정합니다. 그 결과, 가중치가 높을수록 두께가 더 커지게 됩니다.

이외에도 Cytoscape.js는 엣지의 스타일을 커스터마이징하는 다양한 방법을 제공합니다. 노드의 크기, 색상, 투명도 등 다른 스타일 속성도 조정할 수 있습니다. 필요한 경우 Cytoscape.js의 공식 문서를 참조하여 자세한 내용을 확인할 수 있습니다.