3

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:

downward directed graph edges

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 :)

xxx
  • 1,153
  • 1
  • 11
  • 23
Louis93
  • 3,843
  • 8
  • 48
  • 94

1 Answers1

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

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Yes, but dagre doesn't allow you to set edge lengths? And I'm looking for something like dagre that gives you a solid street structure. – Louis93 Jan 19 '16 at 03:43
  • It does. Use the edge weight. – maxkfranz Jan 19 '16 at 14:56
  • See here: http://codepen.io/anon/pen/pgdLVd Doesn't visually alter the edges in any fashion. – Louis93 Jan 19 '16 at 15:09
  • Looks like you've noticed a bug in `dagre` then. Maybe try filing a bug with the Dagre library? You could also try different versions of Dagre; maybe it's a recent bug. – maxkfranz Jan 22 '16 at 16:09
  • Haha yeah unfortunately, I noticed you created an issue on the library... But yes I'll try to use an older version and hope it works! – Louis93 Jan 22 '16 at 16:55
  • It might help if you post a testcase for the Dagre library itself on https://github.com/cpettitt/dagre . Since the error is in `dagre` (not `cytoscape-dagre`), there's not much I can do. I've got lots of things in my queue right now, so I can't prioritise debugging other libraries. – maxkfranz Jan 25 '16 at 13:24