Cytoscape 콜라에서 노드를 기준으로 노드를 그룹화하는 방법

Question

콜라와 함께 cytoscape를 사용하는 데 문제가 있습니다.
"무거운"가장자리가 연결된 노드가 에 가까워지기를 바랍니다.
지금까지, 내 ​​자바 스크립트 코드는 다음과 같습니다

var elems = [ 
    {data: {id: '1', name: 'Node 1', nodecolor: '#88cc88'}}, 
    {data: {id: '2', name: 'Node 2', nodecolor: '#888888'}}, 
    {data: {id: '3', name: 'Node 3', nodecolor: '#888888'}}, 
    {data: {id: '4', name: 'Node 4', nodecolor: '#888888'}}, 
    {data: {id: '5', name: 'Node 5', nodecolor: '#888888'}}, 
    {data: {id: 'e1', source: '1', target: '5', linkcolor: '#888888', "weight":50 } }, 
    {data: {id: 'e2', source: '3', target: '4', linkcolor: '#888888', "weight":30} }, 
    {data: {id: 'e3', source: '2', target: '1', linkcolor: '#888888', "weight":20} }, 
    {data: {id: 'e4', source: '1', target: '4', linkcolor: '#888888', "weight":100} }, 
    {data: {id: 'e5', source: '5', target: '2', linkcolor: '#888888', "weight":100} }, 
    {data: {id: 'e6', source: '1', target: '2', linkcolor: '#888888', "weight":40} } 
]; 
var cy = cytoscape({ 
    container: document.getElementById('cy'), 
    elements: elems, 
    style: cytoscape.stylesheet() 
      .selector('node').style({ 
       'background-color': 'data(nodecolor)', 
       label: 'data(name)', 
       width: 25, 
       height: 25 
      }) 
      .selector('edge').style({ 
       'line-color': 'data(linkcolor)', 
       width: 3 
      }) 
}); 
cy.layout({name: 'cola', 
      infinite: true, 
      fit: false, 
      padding: 10, 
      edgeLength: function(edge){var len = edge.data('weight'); return 10/len; }}); 

당신은 내가 가장자리의 "무게"속성에 비례 반대가되도록 edgeLength 매개 변수를 변경하려고 볼 수 있듯이,하지만하지 않습니다 어떤 차이를 만드는 것 같습니다.

Answer 1

가장자리에 적절한 길이를 반환하는 수식을 사용해야합니다. 수식은 모든 가장자리에 대해 한 픽셀보다 작은 길이를 반환합니다. 이는 특히 Cola supports options like avoidOverlap and nodeSpacing을 고려하면 불가능한 제한입니다.

더 적절한 수식을 k이 10000의 크기의 순서 주위에 뭔가 edge => k/edge.data('weight') 같은 것 - 당신은 k = 10를 선택했다. k = 10000은 e4에 길이 100을 지정하고 e3에는 길이 500을 지정합니다.

레이아웃을 효과적으로 사용하려면 모든 레이아웃 옵션을 신중하게 검토하고 원하는 결과에 맞게 설정해야합니다.