Cytoscape colaで体重に基づいてノードをグループ化する方法

Question

コーラでサイトスコープを使用する際に問題があります。
私は、それらを接続する "重い"辺を持つノードが の方が互いに近づく傾向があるネットワークを希望します。
はこれまでのところ、私のjavascriptのコードは次のようになります。あなたが見ることができるように

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; }}); 

、私は、エッジの「重さ」プロパティに比例して逆であることを、エッジ長パラメータを変更しようとしましたが、それはしていません何か違いがあるようです。

Answer 1

エッジに適切な長さを返す式を使用する必要があります。数式は、すべてのエッジに対して1ピクセル未満の長さを返します。それは特に、Cola supports options like avoidOverlap and nodeSpacingを考えると、不可能な制限です。

より適切な式は、edge => k/edge.data('weight')のようになります。ここで、kは、10000の大きさのオーダーのものです - k = 10を選択しました。 k = 10000は、e4に100の長さを与え、e3に500の長さを与えます。

レイアウトを効果的に使用するには、すべてのレイアウトオプションを慎重に確認し、必要な結果に合わせて適切にレイアウトすることが重要です。