如何在Cytoscape可乐中基于重量对节点进行分组

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参数更改为与边的“weight”属性成比例地相反，但它似乎没有任何区别。

Answer 1

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

一个更合适的公式将是像edge => k / edge.data('weight')，其中k是10000的数量级左右 - 你选择k = 10。例如，k = 10000给e4的长度为100，e3的长度为500。

为了有效地使用布局，仔细检查所有布局选项并确保根据需要适当设置它们非常重要。