Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Layout that handles adding nodes dynamically (cytoscape.js)

Tags:

cytoscape.js

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?

like image 303
John Avatar asked Oct 15 '15 14:10

John


People also ask

How do I change the layout in Cytoscape?

Select a group of nodes in your network and again select Layout->Cytoscape Layouts->Grid. Notice that this now has a sub-menu with two options: All Nodes and Selected Nodes Only. Choose Selected Nodes Only. Note that only the nodes you selected are changed.

How do you move the nodes in Cytoscape?

In addition to the ability to click on a node and drag it to a new position, Cytoscape now has the ability to move nodes using the arrow keys on the keyboard. By selecting one or more nodes using the mouse and clicking one of the arrow keys (←, ↑, →, ↓) the selected nodes will move one pixel in the chosen direction.

What is Cytoscape Dagre?

Description. The Dagre layout for DAGs and trees for Cytoscape.js (demo) The dagre layout organises the graph using a DAG (directed acyclic graph) system, written by Chris Pettitt. It is especially suitable for DAGs and trees. For more information, please refer to Dagre's documentation.


1 Answers

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).

like image 154
maxkfranz Avatar answered Jan 10 '23 03:01

maxkfranz