cytoscape vs dagre-d3

same edges as http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

by Rishi Kumar

HTML

<script src="https://cdn.rawgit.com/cpettitt/dagre/master/dist/dagre.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.0.0/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/master/cytoscape-dagre.js"></script>
<div id="cy"></div>

CSS

body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#info {
  color: #c88;
  font-size: 1em;
  position: absolute;
  z-index: -1;
  left: 1em;
  top: 1em;
}

JavaScript

$(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'
        }
      }, {
   ...