[javascript] Cytoscape.js에서 그래프의 엣지에 두 개의 노드 사이의 거리를 설정하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, 엣지의 세부정보와 속성을 담은 data 객체를 생성합니다. 이 객체에 거리 속성을 추가할 것입니다.

var edgeData = {
  id: 'edge1',
  source: 'node1',
  target: 'node2',
  distance: 100 // 거리를 나타내는 속성
};

그래프의 엣지 집합을 관리하는 cy 객체를 사용하여 엣지를 생성하고 그에 대한 데이터를 추가합니다.

cy.add({
  group: 'edges',
  data: edgeData
});

layout 옵션을 사용하여 그래프를 레이아웃합니다. 레이아웃은 엣지 간의 거리를 설정하는 데 사용됩니다.

var layout = cy.layout({
  name: 'cose', // 레이아웃 알고리즘 선택
  idealEdgeLength: function(edge) {
    return edge.data('distance'); // 엣지의 거리 속성을 사용하여 거리 설정
  }
});
layout.run(); // 레이아웃 실행

이제 Cytoscape.js 그래프의 엣지에 두 노드 사이의 거리를 설정할 수 있습니다. 위의 예제를 참고하여 원하는 거리 값을 사용해보세요.

자세한 사항은 Cytoscape.js 공식 문서를 참조할 수 있습니다.