Layout that handles adding nodes dynamically (cytoscape.js)

Question

Here is an example of what I'm doing:

function showNeighbors(ele) {
  cy.add(this.cyData.getElementById(ele.id()).neighborhood());
  cy.elements().layout(layoutOpts);
}

This is the only why I can find to add the new nodes to the layout. I would like to add nodes similar to how D3 does by having a .enter() function or some way to add nodes to the current layout. Is this possible in Cytoscape.js?

Domain

Answer 1

If the layout supports smooth transitioning (like Cola), just stop the layout on the old elements and start a new layout on the entire graph (including the new element): layout.stop(); layout = cy.elements().makeLayout(...); layout.run();

http://js.cytoscape.org/#layouts/layout-manipulation

If the layout doesn't support smooth transitioning, then it will still work but the animation won't necessary be smooth (e.g. a node may initially jump).

Osculum

Thanks! Didn't realize Cola supported smooth transitioning. Is there a place where that kind of layout information is compiled as I don't see it on js.cytoscape.org ? – Domain

I can't get adding nodes while the layout is still running to work, even with cola and with stopping the previous layout. It heavily stutters, not smooth at all. Do you have a jsfiddle? – Deleterious