Cytoscape.js 布局边长

Question

您好，我正在尝试为一个学校项目构建一个网络爬虫可视化工具。我决定使用 Cytoscape.js，它真的很好用。我遇到的问题是某些布局（圆形、宽度优先、同心）的边长似乎太大，而且图表看起来很奇怪。

当我第一次启动应用程序时，我手动制作并加载了一个包含 100 个节点的图（它是一棵树），并且在圆形布局中看起来不错：

但是，在我执行网络爬网之后，新图（这个有 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

边的长度是节点位置的函数。布局设置位置，因此您必须设置布局选项以使节点更靠近。

对于力导向（物理模拟）布局，您可以调整力。在其他布局中，您可以调整间距值或强制使用边界框来影响节点的分布程度。