0

I have cytoscape.js graph with fixed node size and zoom. I want to fit entire graph (DAG, almost tree with few "non-tree" edges) into viewport with fixed width and unlimited height. I'm having troubles to implement it.

I use breadthfirst layout. This layout needs bounding box (explicit or taken from current viewport). I tried to push it into reasonably large bounding box, then compute the graph height from the node positions and then adjust the bounding box. This doesn't work, since the layout tries to use as much space ass possible and stretches the edges.

Is there a cytoscape.js layout, which can do something like BFS and specify max distance between levels? Or is there a better way how to solve my problem?

yaqwsx
  • 569
  • 1
  • 5
  • 14

1 Answers1

1

You shouldn't have to specify a bounding box if you use avoidOverlap: true. It should overflow the bounding box as necessary. You can specify spacingFactor to adjust the spacing between levels.

If you have a fixed zoom, you may want to call cy.center() afterwards.

You can't avoid overlap (i.e. have overflow) and also guarantee a fixed size. You could manually enforce a horizontal width by squishing node positions together after a layout -- but this might cause overlap.

See http://js.cytoscape.org/#layouts/breadthfirst

maxkfranz
  • 11,896
  • 1
  • 27
  • 36