How do I configure graph to show downward pointing edges without hardcoding node positions?

Question

I am trying to achieve this effect using cytoscape.js and the cytoscope-cola.js extension.

I want to make the edges of my graph direct downwards like in this picture:

Instead of the unconstrained graph that shows up by default. I'm using the cola layout since I want to be able to input custom edge weights.

I've built a codepen to demonstrate what I'm seeing; but here is how I construct my graph:

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  layout: {
    name: 'cola',
    edgeLength: function( edge ){
      return edge._private.data.edge_weight;
    },
    flow: { axis: 'y', minSeparation: 50 },
    avoidOverlap: true,
    alignment: function( node ){
    },
    ready: function(){
      console.log('rendered graph')
      window.prev = undefined
    }
  },
  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(name)'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'J' } },
      { data: { id: 'e', name: 'E' } },
      { data: { id: 'k', name: 'K' } },
      { data: { id: 'l', name: 'L' } },
      { data: { id: 'g', name: 'G' } }
    ],
    edges: [
      { data: { source: 'j', edge_weight:80, target: 'e' } },
      { data: { source: 'j', edge_weight:80, target: 'l' } },
      { data: { source: 'e', edge_weight: 200, target: 'k' } },
      { data: { source: 'k', target: 'g' } }
    ]
  },
});
cy.minZoom(0.75);

Any input or direction as to how I could constrain the graph to behave like in the picture above this would be great :)

Answer 1

It looks like it's working in your demo.

In general, you can't expect a physics simulation layout to give you perfect tree-like results The example picture you posted is a particular graph that tends to work well.

If you're looking for a proper tree layout, you should look at dagre: https://github.com/cytoscape/cytoscape.js-dagre