CODEWITHSUNDEEP
cytoscape.js
Mohesan Sreekuladevan
Mohesan Sreekuladevan

Reputation: 35

How do I make cose graph not snap into place?

I am creating a network graph using Cytoscape JS with the cose layout. The issue I am running into is that when i am animating my graph, it eases into its end position and then it snaps into a different position.

I have tried turning of the fit, defining boundingBox, increasing and decreasing the minTemp as well as increasing the coolingFactor.

The following is what layout variables are:

export default {
  name: 'cose',

  // Called on `layoutready`
  ready: function(){},

  // Called on `layoutstop`
  stop: function(){},

  // Whether to animate while running the layout
  // true : Animate continuously as the layout is running
  // false : Just show the end result
  // 'end' : Animate with the end result, from the initial positions to the end positions
  animate: 'end',

  // Easing of the animation for animate:'end'
  // Options: 'ease', 'linear'(default if undefined), ... potentially more options but need to find them
  animationEasing: 'ease',

  // The duration of the animation for animate:'end'
  animationDuration: 3000,

  // A function that determines whether the node should be animated
  // All nodes animated by default on animate enabled
  // Non-animated nodes are positioned immediately when the layout starts
  animateFilter: function ( node, i ){ return true; },


  // The layout animates only after this many milliseconds for animate:true
  // (prevents flashing on fast runs)
  animationThreshold: 1000,

  // Number of iterations between consecutive screen positions update
  refresh: 10,

  // Whether to fit the network view after when done
  fit: true,

  // Padding on fit
  padding: 20,

  // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  boundingBox: undefined,

  // Excludes the label when calculating node bounding boxes for the layout algorithm
  nodeDimensionsIncludeLabels: true,

  // Randomize the initial positions of the nodes (true) or use existing positions (false)
  randomize: true,

  // Extra spacing between components in non-compound graphs
  componentSpacing: 10,

  // Node repulsion (non overlapping) multiplier
  nodeRepulsion: function( node ){ return 1000000000; },

  // Node repulsion (overlapping) multiplier
  // NOTE: effects spacing of nodes
  nodeOverlap: 100000000,

  // Ideal edge (non nested) length
  idealEdgeLength: function( edge ){ return 50; },

  // Divisor to compute edge forces
  edgeElasticity: function( edge ){ return 1; },

  // Nesting factor (multiplier) to compute ideal edge length for nested edges
  nestingFactor: 0.1,

  // Gravity force (constant)
  gravity: -1000,

  // Maximum number of iterations to perform
  numIter: 20000,

  // Initial temperature (maximum node displacement)
  initialTemp: 100,

  // Cooling factor (how the temperature is reduced between consecutive iterations
  coolingFactor: 0.999,

  // Lower temperature threshold (below this point the layout will end)
  minTemp: 10.0,
};

Upvotes: 0

Views: 268

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

If you want a more sophisticated force-directed layout, you should use COSE Bilkent or fCOSE. The bundled COSE is fast and small in file size but it has less features.

Upvotes: 1

Related Questions