Cytoscape.js布局边缘长度

您好，我正在尝试构建一个学校项目的网络爬虫可视化工具。我决定使用Cytoscape.js，它的使用非常好。我遇到的问题是某些布局（圆形，宽度第一，同心）的边缘长度似乎太大，图形看起来很奇怪。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"); 
     };

来源

2016-11-19 Boo

这可能是各种各样的事情。它可能与布局功能相关联。你可以发布你所有的cytoscape代码，以便我们更好地理解这个问题吗？ –

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

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

来源

2016-11-22 19:55:31 maxkfranz

谢谢我注意到一些我不明白的东西，我尝试使用范围设置边界框，但是当我重复设置圆形或同心布局时，我注意到cy.extent（）保持不断变化并导致节点看起来越来越小。所以我在容器中使用了getBoundingClientRect（）方法。这似乎适用于圆圈和广度，但同心圆看起来。对于同心，如果我转而避免重叠，那么节点似乎真的想堆叠在彼此之上。 – Boo

如果不使用自动重叠避免，则必须将边界框设置得足够大，以便节点不会重叠。我们已经计划了一些功能来使这个用例在未来的版本中变得更加容易，但是它们比优先级列表更远一些。 [这一个]（https://github.com/cytoscape/cytoscape.js/issues/1266）就足够你的用例。如果你想为它做一个PR，那将会非常感激，而且这个功能将会在下一个功能发布中出现。 – maxkfranz

当然，我很乐意做出公关，我该如何提出要求？ – Boo

Cytoscape.js布局边缘长度

回答

相关问题