cytoscape.js dagre布局段邊緣

Question

對於同一組數據，請參見下面的cytoscape.js與dagre-d3.js。

1. cytoscape： https ：//jsfiddle.net/bababalcksheep/m40m5mmx/6/

2. dagre-d3： http ：//cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

我怎么能像dagre一樣制作cytoscape.js邊緣？

任何幫助都感激不盡 ！！！

不應該來自dagre的cytoscape-dagre選點嗎？ 從示例中看到https://jsfiddle.net/bababalcksheep/55cmk117/3/在dagre.layout(g); dagre在邊緣數據中具有可被cytoscape段邊緣消耗的點。

$(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

Answer 1

分段在2.6中添加。 Dagre擴展需要更新，但這僅在2.7之后才有用。 此功能已在路線圖中。 請參閱https://github.com/cytoscape/cytoscape.js-dagre/issues/5