How can I set the start position of nodes in cytoscape.js with cy.load?

Question

I am trying to set the start position of my nodes manually but loading them from a JSON structure. If I put the position within the 'nodes' structure it works, however I am trying to add a seperate structure called 'positions:'which I thought should work? See below for an example of the structure.

var graphdata = { nodes: [ { data: { id: 'j', name: 'Jerry', width: 20, height: 20 ,     shape: 'rectangle' }},
                       { data: { id: 't', name: 'Tom', width: 20 , height: 20, shape: 'circle' } },
                       { data: { id: 'm', name: 'Mary', width: 20 , height: 20, shape: 'circle' } } ,
                       { data: { id: 'b', name: 'Bob', width: 20 , height: 20, shape: 'circle' } } ],

              edges: [
                      { data: { source: 'j', target: 't', faveColor: '#6FB1FC', strength: 90 } },
                      { data: { source: 't', target: 'm', faveColor: '#6FB1FC', strength: 90 } },
                      { data: { source: 'm', target: 'b', faveColor: '#6FB1FC', strength: 90 } } ],

             positions: [ { j: { x:100,y:100 } }, 
                          { t: { x:100,y:200 } } ]

Later on I call cy.load(graphdata).

The nodes and edges display fine but the position doesn't seem to be affected at all.

I have also loaded the preset layout.

Thanks.

score 5 · Accepted Answer · answered Oct 15 '13 at 18:06

5

Is this Cytoscape Web or Cytoscape.js?

In Cytoscape.js,

just specify the positions on init in each element (http://cytoscape.github.io/cytoscape.js/#core/initialisation), or
specify the positions in the preset layout options and use that layout at init (http://cytoscape.github.io/cytoscape.js/#core/initialisation).

answered Oct 15 '13 at 18:06

maxkfranz

11,896
1
27
36

1

its Cytoscape.js. I can get specifying the position in each element working, but I can't do what I want in my example above. – user1768233 Oct 19 '13 at 09:35
2

You have to specify the position in each element or use a preset layout. – maxkfranz Nov 06 '13 at 17:42
1

I had to set the layout property to have property name be 'preset': layout: { name: 'preset' }, – Brian Jun 20 '15 at 21:40
Change the layout name to "preset", then the initial positions value will be considered. But if add some new nodes and edges to graph dynamically, then run a layout like `cose-bilkent` , all nodes will be reposition if run on all nodes , and if run on new nodes the overlapping maybe occur. How to resolve this issue? – Does Apr 08 '19 at 11:26

score 4 · Answer 2 · answered Dec 16 '16 at 09:57

4

Change the layout name to "preset", then the positions value will be considered. Ref - http://js.cytoscape.org/#layouts/preset

answered Dec 16 '16 at 09:57

vijay

679
2
7
15

How can I set the start position of nodes in cytoscape.js with cy.load?

2 Answers2