title: cytoscape.js dagre layout segment edges
body: <p>see below cytoscape.js vs dagre-d3.js for same set of data.</p>
  
  <ol>
  <li><p>cytoscape : <a href="https://jsfiddle.net/bababalcksheep/m40m5mmx/6/" rel="nofollow">https://jsfiddle.net/bababalcksheep/m40m5mmx/6/</a></p></li>
  <li><p>dagre-d3: <a href="http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html" rel="nofollow">http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html</a></p></li>
  </ol>
  
  <p>How can I make cytoscape.js edges same like dagre ?</p>
  
  <p>Any help will be much appreciated !!!</p>
  
  <p>should not cytoscape-dagre pick points from dagre ?
  see from example <a href="https://jsfiddle.net/bababalcksheep/55cmk117/3/" rel="nofollow">https://jsfiddle.net/bababalcksheep/55cmk117/3/</a>
  where after <code>dagre.layout(g);</code> dagre has points in edges data which could be consumed by cytoscape segment edges.</p>
  
  <pre><code>$(function () { // on dom ready
  
    var cy = cytoscape({
      container: $('#cy')[0],
  
      boxSelectionEnabled: false,
      autounselectify: true,
      layout: {
        name: 'dagre'
      },
  
      style: cytoscape.stylesheet()
        .selector('node')
        .css({
          'content': 'data(name)',
          'text-valign': 'center',
          'padding-left': '10px',
          'padding-right': '10px',
          'padding-top': '10px',
          'padding-bottom': '10px',
          'shape': 'roundrectangle',
          'width': 'label',
          'background-color': ' #fff',
          'color': 'black',
          'border-width': '1px',
          'border-color': '#333',
          'font-size': 14,
          'font': ' 300 14px "Helvetica Neue", Helvetica'
  
        })
        .selector('edge')
        .css({
          'label': 'data(label)',
          'target-arrow-shape': 'triangle',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black',
          'edge-text-rotation': 'autorotate',
          'line-color': '#333',
          'width': 1.5,
          'curve-style': 'segments'
        })
        .selector(':selected')
        .css({
          'background-color': 'black',
          'line-color': 'black',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black',
          'text-outline-color': 'black'
        }),
  
      elements: {
        'nodes': [{
          'data': {
            'id': 'CLOSED',
            'name': 'CLOSED'
          }
        }, {
          'data': {
            'id': 'LISTEN',
            'name': 'LISTEN'
          }
        }, {
          'data': {
            'id': 'SYN RCVD',
            'name': 'SYN RCVD'
          }
        }, {
          'data': {
            'id': 'SYN SENT',
            'name': 'SYN SENT'
          }
        }, {
          'data': {
            'id': 'ESTAB',
            'name': 'ESTAB'
          }
        }, {
          'data': {
            'id': 'FINWAIT-1',
            'name': 'FINWAIT-1'
          }
        }, {
          'data': {
            'id': 'CLOSE WAIT',
            'name': 'CLOSE WAIT'
          }
        }, {
          'data': {
            'id': 'FINWAIT-2',
            'name': 'FINWAIT-2'
          }
        }, {
          'data': {
            'id': 'CLOSING',
            'name': 'CLOSING'
          }
        }, {
          'data': {
            'id': 'LAST-ACK',
            'name': 'LAST-ACK'
          }
        }, {
          'data': {
            'id': 'TIME WAIT',
            'name': 'TIME WAIT'
          }
        }],
        'edges': [{
          'data': {
            'source': 'CLOSED',
            'target': 'LISTEN',
            'label': 'open'
          }
        }, {
          'data': {
            'source': 'LISTEN',
            'target': 'SYN RCVD',
            'label': 'rcv SYN'
          }
        }, {
          'data': {
            'source': 'LISTEN',
            'target': 'SYN SENT',
            'label': 'send'
          }
        }, {
          'data': {
            'source': 'LISTEN',
            'target': 'CLOSED',
            'label': 'close'
          }
        }, {
          'data': {
            'source': 'SYN RCVD',
            'target': 'FINWAIT-1',
            'label': 'close'
          }
        }, {
          'data': {
            'source': 'SYN RCVD',
            'target': 'ESTAB',
            'label': 'rcv ACK of SYN'
          }
        }, {
          'data': {
            'source': 'SYN SENT',
            'target': 'SYN RCVD',
            'label': 'rcv SYN'
          }
        }, {
          'data': {
            'source': 'SYN SENT',
            'target': 'ESTAB',
            'label': 'rcv SYN, ACK'
          }
        }, {
          'data': {
            'source': 'SYN SENT',
            'target': 'CLOSED',
            'label': 'close'
          }
        }, {
          'data': {
            'source': 'ESTAB',
            'target': 'FINWAIT-1',
            'label': 'close'
          }
        }, {
          'data': {
            'source': 'ESTAB',
            'target': 'CLOSE WAIT',
            'label': 'rcv FIN'
          }
        }, {
          'data': {
            'source': 'FINWAIT-1',
            'target': 'FINWAIT-2',
            'label': 'rcv ACK of FIN'
          }
        }, {
          'data': {
            'source': 'FINWAIT-1',
            'target': 'CLOSING',
            'label': 'rcv FIN'
          }
        }, {
          'data': {
            'source': 'CLOSE WAIT',
            'target': 'LAST-ACK',
            'label': 'close'
          }
        }, {
          'data': {
            'source': 'FINWAIT-2',
            'target': 'TIME WAIT',
            'label': 'rcv FIN'
          }
        }, {
          'data': {
            'source': 'CLOSING',
            'target': 'TIME WAIT',
            'label': 'rcv ACK of FIN'
          }
        }, {
          'data': {
            'source': 'LAST-ACK',
            'target': 'CLOSED',
            'label': 'rcv ACK of FIN'
          }
        }, {
          'data': {
            'source': 'TIME WAIT',
            'target': 'CLOSED',
            'label': 'timeout=2MSL'
          }
        }]
      }
    });
  
    cy.on('tap', 'node', function () {
      try { // your browser may block popups
        window.open(this.data('href'));
      } catch (e) { // fall back on url change
        window.location.href = this.data('href');
      }
    });
  
  }); // on dom ready
  </code></pre>