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:
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.
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.
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 .
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With