CODEWITHSUNDEEP
javascriptcytoscape.js
Lela
Lela

Reputation: 41

How to give the row and col positions of a node in Cytoscap JS

I have some nodes that I want to place in specific location within a grid.

In Cytoscape Js I defined the data as follows: 

 nodes: [
      { data: { id: '1', name: 'Cytoscape1', row: '1', col:'1' } },
      { data: { id: '2', name: 'Cytoscape2', row: '2', col:'3' } },
      { data: { id: '3', name: 'Cytoscape3', row: '1', col:'3' } },
      { data: { id: '4', name: 'Cytoscape4', row: '1', col:'4' } }
    ]

I want to use the col and row data for setting the node position. Now I've added in the following grid layout options for the graph: 

layout: {
    name: 'grid',
    padding: 10,
    rows: 4, 
    columns: 4, 
    position: function( node ){ return {node.row, node.col}; } 
  }

My problem concerns the function for returning the row and col position of a node. For some reason that piece of the code doesn't work and I couldn't find any examples that used this option.

When testing it in a live example it gives a syntax error. Now I've tried many different means to return the row and col that matches the syntax, but I'm only getting more confused and nothing still worked.

What I've tried so far with no success for example are:

position: function ( node ) { return node.row, node.col }
position: function ( node ) { return node.data.row, node.data.col }
position: function ( node ) { return data:row, data:col }
position: function ( node ) { return {data:row, data:col}; }
position: function ( node ) { return node:row, node:col }
position: function ( node ) { return {node:row, node:col}; }

and so on.

UPDATE: after some more searching to get access to the row and col value, I now know it has to be node.data('row') and node.data('col'). However I stil have the problem of how to return the row and col arguments. I tried:

position: function ( node ) { return [node.data('row'), node.data('col')]; }

However still no luck :/

Upvotes: 2

Views: 923

Answers (2)

Lela
Lela

Reputation: 41

Ah thanks Mrintunjay! Just what I need to piece it together. The answer is:

position: function( node ){ return {row:node.data('row'), col:node.data('col')}; }

Upvotes: 1

Mritunjay
Mritunjay

Reputation: 25882

I don't know about Cytoscap JS

But this like will give error in simple js

position: function( node ){ return {node.row, node.col}; }

You are not giving keys of the object to be returned it should be atleast.

position: function( node ){ return {row:node.row, col:node.col}; }

Or this 

position: function( node ){ return {row:node.data.row, col:node.data.col}; }

I'm not sure what is coming as node in parameter.

Upvotes: 0

Related Questions