CODEWITHSUNDEEP
javascriptdictionarycytoscape.js
ForgottenKahz
ForgottenKahz

Reputation: 276

Cytoscape.js Preset Layout Documentation

I have a cytoscape.js graph that renders. I'm interested in leveraging the preset layout to place the nodes. The cytoscape.js documentation shows the following for the preset layout:

var options = {
  name: 'preset',
  positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; }
  zoom: undefined, // the zoom level to set (prob want fit = false if set)
  pan: undefined, // the pan level to set (prob want fit = false if set)
  fit: true, // whether to fit to viewport
  padding: 30, // padding on fit
  animate: false, // whether to transition the node positions
  animationDuration: 500, // duration of animation in ms if enabled
  animationEasing: undefined, // easing of animation if enabled
  ready: undefined, // callback on layoutready
  stop: undefined // callback on layoutstop
};

Can some one help me understand or give an example of what the documentation means when it says the following

// map of (node id) => (position obj); or function(node){ return somPos; }

I store all the nodes in a MySQL database table with the following columns

id, origin, destination, x position, y position

Does the cytoscape.js positions take a dictionary that looks like this:

{'id': 1, {'x':10, 'y':45}}, {'id': 2, {'x':21, 'y':32}} etc?

Upvotes: 1

Views: 2748

Answers (1)

MFigueredo
MFigueredo

Reputation: 153

This means when the positions is set as undefined you need to create a function to get the positions of each node.

For example:

 cy.nodes().forEach(function(n){
    var x = n.data("x");
    var y = n.data("y");
 });

This should return your node position.

EDIT

You can set the node position when you are creating it. For example:

  var elements;
  elements: [{"data":{"id":"yourID","name":"name"},"position"{"x":"0.0","y":"0.0"}}];

For more, see this Demo on Cytoscape js site. Here they set the position manually.

Upvotes: 2

Related Questions