Cytoscape.js: cose layout with animation

Question

I am trying to animate the change between layouts of a Cytoscape.js graph.

When switching from cose to grid, the change is animated. When switching from grid to cose, only the end position is shown without any animation.

I use a simple test scenario starting with a small graph in grid layout and this code to switch layouts:

...
function changeLayout(type){
  var options = {
    name: type,
    animate: true
  };
  cy.layout(options);
}
...
<div onclick="changeLayout('cose')">to cose</div>
<div onclick="changeLayout('grid')">to grid</div>

I also tried the other options listed here: http://js.cytoscape.org/#layouts/cose but I am not able to animate from grid to cose.

What am I doing wrong?

maxkfranz maxkfranz · Accepted Answer · 2016-05-27T15:54:39

A continuous layout like CoSE animates live. That is, it animates during the iterations of the calculations it does. If the layout runs very quickly -- as CoSE often does -- then you won't get much if any animation.

There is a proposal being discussed to have an option to animate continuous layouts like discrete ones (i.e. tweening between the start and end positions).

If you want this behaviour for now, you'll have to run the layout while batching. Now that you have saved the start and end positions for each node, you can just end batching and animate.

Cytoscape.js: cose layout with animation

2 Answers