Cytoscape.js布局边缘长度

Question

嗨，我正在为一个学校项目建立一个网络爬虫可视化工具。我决定使用Cytoscape.js，使用起来真的很好。我遇到的问题是，一些布局(圆圈、宽度优先、同心圆)的边长看起来太大了，图形看起来很奇怪。

当我第一次启动应用程序时，我手动创建并加载了一个包含100个节点的图表(它是一棵树)，这在循环布局中看起来很好：

​

但是，在我执行web爬行之后，新的图(这个图有44个节点)不适合用于圆形视图：

​

是否有办法使其工作，使边缘不是那么长，节点看起来更大？

编辑：

下面是我用来更改布局的代码：

changeLayout = function(layoutName, title,  root){
                var numOfNodes = cy.filter('node').length;
                //extent changes when I repeatedly change the layout to circle, (don't understand this behavior)
                var extent = cy.extent();
                var rect = document.getElementById("cy-container").getBoundingClientRect();

                var x1 = rect.left;
                var x2 = rect.right;
                var y1 = rect.top;
                var y2 = rect.bottom;

                var height = (y2 - y1);
                var width = (x2 - x1);

                var fact = (height < width) ? (height/numOfNodes) : (width/numOfNodes);
                fact *= 5;
                var myRadius = height < width ? (height-fact) : (width-fact);

                switch(layoutName){
                        case 'circle':
                                myLayout = cy.makeLayout(
                                {       name: layoutName,
                                        radius: myRadius,
                                        boundingBox: {x1: x1, x2: x2, y1: y1, y2: y2},
                                        fit: true,
                                        avoidOverlap: false
                                });
                                break;
                        case 'concentric':
                                myLayout = cy.makeLayout(
                                {       name: layoutName,
                                        height: height,
                                        width: width,
                                        fit: false,
                                        avoidOverlap: true
                                });
                                break;
                        case 'breadthfirst':
                                myLayout = cy.makeLayout(
                                {       name: layoutName,
                                        boundingBox: {x1: x1, x2: x2, y1: y1, y2: y2},
                                        fit: true,
                                        roots: root,
                                        avoidOverlap: false
                                });
                                break;
                        default :
                                myLayout = cy.makeLayout(
                                {
                                        name: layoutName
                                });
                }

                myLayout.run();
                $('#graphTitle').text(title + " Layout");
        };

Answer 1

边的长度是节点位置的函数。布局设置位置，因此必须设置布局选项，以使节点更紧密地连接在一起。

对于以力为导向的(物理模拟)布局，你可以调整力.在其他布局中，您可以调整间距值或强制设置边界框，以影响节点的分布情况。