0

我在使用 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 参数更改为与边缘的“权重”属性成比例反比，但这似乎没有任何区别。

4

1 回答 1

1

您必须使用一个公式来返回合理的边长度。您的公式返回的所有边的长度都小于一个像素。这是一个不可能的限制，尤其是考虑到Cola 支持 和 之类avoidOverlap的nodeSpacing选项。

一个更合适的公式是类似于edge => k / edge.data('weight')where kis something around the order of 10000- 你选择的k = 10。 k = 10000例如，给 e4 的长度为 100，给 e3 的长度为 500。

为了有效地使用布局，仔细检查所有布局选项并确保为您想要的结果正确设置它们非常重要。

于 2017-12-19T18:42:34.110 回答