javascript - 如何在 Cytoscape cola 中根据权重对节点进行分组

Question

我在使用 cytoscape 和可乐时遇到问题。
我想要一个网络，其中节点具有“重”边缘连接它们倾向于彼此靠得更近。
到目前为止，我的 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; }});

正如您所看到的，我尝试将 EdgeLength 参数更改为与边缘的“权重”属性成比例地相反，但它似乎没有任何区别。

Answer 1

您必须使用返回合理边缘长度的公式。您的公式返回所有边缘的长度都小于一像素。这是一个不可能的限制，特别是考虑到 Cola supports options like avoidOverlap and nodeSpacing .

更合适的公式类似于 edge => k/edge.data('weight')，其中 k 大约是 的数量级>10000——您选择了k = 10。例如，k = 10000 为 e4 提供了 100 的长度，为 e3 提供了 500 的长度。

为了有效地使用布局，仔细检查所有布局选项并确保根据您想要的结果进行适当的设置非常重要。