js.cytoscape generating graph left to right

Question

I am using js.cytoscape, and need to generate a graph from left to right.

when I use the layouts, it generate the chart from top to the bottom

code.js file is as follows

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

  boxSelectionEnabled: false,
  autounselectify: true,

  layout: {
    name: 'dagre'
  },

  style: [
    {
      selector: 'node',
      style: {
        'content': 'data(id)',
        'text-opacity': 0.5,
        'text-valign': 'center',
        'text-halign': 'right',
        'background-color': '#11479e'
      }
    },

    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'width': 4,
        'target-arrow-shape': 'triangle',
        'line-color': '#9dbaea',
        'target-arrow-color': '#9dbaea'
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: 'n0' } , position: { x: 0, y: 0 }  },
      { data: { id: 'n1' } , position: { x: 100, y: 0 } },
      { data: { id: 'n2' } , position: { x: 200, y: 0 } }

    ],
    edges: [
      { data: { source: 'n0', target: 'n1' } },
      { data: { source: 'n1', target: 'n2' } },

    ]
  },
});

When you set the layout to 'preset' the chat is generated from left to right with the given positions. But it is not possible to position all the nodes when it supposed to generate chart dynamically using user given data.

Please suggest a solution. Thank you

Answer 1

As of cytoscape.js-dagre documentation, there's a layout option that can change the direction of your graph. Simply add to layout:

layout: {
    name: 'dagre'
    rankDir: 'LR', // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
},