Question

请参阅以下cytoscape.js与dagre-d3.js相同的数据集。

cytoscape：https://jsfiddle.net/bababalcksheep/m40m5mmx/6/
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

cytoscape.js dagre布局段边缘

1 个答案: