Vertically scrolling graph with fixed size nodes with Cytoscape.js?

Question

I'm using Cytoscape to generate a simple flow/state diagram and I'm able to generate the graph, but as the graph grows, it just keeps zooming out so the nodes become really small. Is there a way to have Cytoscape to just keep growing in height instead of shrinking the graph and having to zoom in? I would rather have the nodes stay a known size (i.e. 100px X 100px) and as the graph grows and have it grow vertically so the user just has to scroll down the page to see the rest of the graph. Right now, the viewport is restricted to the height of the page when the page is first rendered. Let me know if there is a way to achieve a vertically scrolling graph with fixed size nodes. Thanks!

Answer 1

Based on the suggestions of maxkfranz and gcpdev, I came up with the following solution that seems to work pretty well.

Cytoscope Init:

cy = cytoscape({
    container: document.getElementById('cy'),
    style: cytoscape.stylesheet()
      .selector('node')
      .css({
          'shape': 'roundrectangle',
          'height': 80,
          'width': 150,
          'background-fit': 'cover',
          'background-color': '#F5F5F5',
          'border-color': '#F5F5F5',
          'border-width': 3,
          'border-opacity': 0.5,
          'text-valign': 'center',
          'content': 'data(name)',
       })
       .selector('edge')
       .css({
           'width': 6,
           'target-arrow-shape': 'triangle',
           'line-color': '#0088cc',
           'target-arrow-color': '#0088cc'
       }),
   elements: data,
   zoomingEnabled: false,
   layout: {
       name: 'breadthfirst',
       directed: true,
       padding: 10
   }
}); // cy init

After we have initialized the diagram, we have to set the size of our container div to be at least as high as the bounds of the graph. We also need to reset the size anytime someone resizes the window.

cy.on('ready', function () {
    updateBounds();
});
//if they resize the window, resize the diagram
$(window).resize(function () {
    updateBounds();
});

var updateBounds = function () {
    var bounds = cy.elements().boundingBox();
    $('#cyContainer').css('height', bounds.h + 300);
    cy.center();
    cy.resize();
    //fix the Edgehandles
    $('#cy').cytoscapeEdgehandles('resize');
};

I am also calling updateBounds() any time the user add a node to the graph. This gives me a graph that is full size and grows vertically. I can scroll down the page just fine as well!

Answer 2

(1) Layouts usually fit to the graph. Set layoutOptions.fit: false to override this default behaviour (at least for included layouts).

(2) The use of (1) means that running the layout will leave the graph viewport in the reset state (i.e. default zoom of 1 at origin position { x: 0, y: 0 }). If you want the viewport maintained at zoom: 1 but with an altered pan position, you can use cy.pan() with some simple calculations with cy.elements().boundingBox(). You may also find cy.center() useful -- though perhaps only horizontally in your case.

(3) The use of (2) means that your graph viewport (i.e. canvas) will be the same size, but the user will be able to pan down to see the remainder of the graph. If you prefer scrolling over panning, you will need to implement your own mechanism for this. You can make clever combination of cy.elements().boundingBox() and jQuery('#cy-div').css(), for example, to adjust the cy div to the size of the graph. You may want to turn off user panning and zooming (and autolock nodes etc.), if the graph is not interactive.

Answer 3

Well, I think you could set the zoom amount to fixed and disable zoom in/out, and use some strategy to dynamically change your div/page's height.

This answer or this one should help you.