Question

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

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

但是，在我执行网页抓取后，新图形（此图形有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

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

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

Cytoscape.js布局边长

1 个答案: