Cytoscape.js layout edge length - cytoscape.js

Question

Hi I'm trying to build a web-crawler visualization tool for a school project. I decided to use Cytoscape.js and it's been really nice to use. The problem i'm having is the edge lengths for some of the layouts (circle, breadth first, concentric) seem too large and the graph looks odd.
When I first start the application, I manually make and load a graph(it's a tree) with 100 nodes and that looks good in Circle layout:
However after I perform a web-crawl the new graph( this one has 44 nodes) doesn't fit in the view for circle:
Is there a way to get this to work so that the edges are not so long and the nodes look larger?
Edit:
Here's the code I use to change the layout:
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

The length of an edge is a function of the positions of the nodes. The layout sets the positions, so you have to set the layout options to make the nodes closer together.
For force-directed (physics simulation) layouts, you adjust the forces. In other layouts, you can adjust spacing values or enforce a bounding box to affect how spread out the nodes are.