Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add nodes at specified positions in Cytoscape.js?

I want to add nodes at specified positions. I started off by trying to add two nodes at the same position (x=0, y=0) like so:

$(document).ready(function() {

var cy = cytoscape({
  container: document.getElementById('cy'),
});

cy.add([
  { group: "nodes", data: { id: "n0" }, position: { x: 0, y: 0 } },
  { group: "nodes", data: { id: "n1" }, position: { x: 0, y: 0 } },
]);

});

And I expected it to show me two nodes at the same position, one over the other. But the result was quite unexpected. Here is what I got:

enter image description here

In fact, the position of the nodes remains the same no matter what values of x and y I specify. I also tried renderedPosition instead of position but to no avail.

I am searching the Cytoscape documentation for how to achieve what I want but I haven't been able to come up with a solution yet.

like image 607
Akshay Damle Avatar asked Feb 07 '15 14:02

Akshay Damle


People also ask

How do you align nodes in Cytoscape?

11.3. The simplest method to manually organize a network is to click on a node and drag it. All of the selected nodes are moved together. 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.

What are nodes and edges in Cytoscape?

Since Cytoscape treats edge data as directional, the second and third edge data values refer to two different edges (source and target are reversed, though the nodes involved are the same). Each data column is stored in a separate file. Node and edge data files use the same format, and have the suffix .


1 Answers

Got it. I was forgetting to specify that the preset layout must be used. Added the following:

layout: {
  name: 'preset'
},

to the cy object and it works.

like image 74
Akshay Damle Avatar answered Sep 30 '22 09:09

Akshay Damle