同じデータセットについては、以下の cytoscape.js と dagre-d3.js を参照してください。
cytoscape.js のエッジを dagre と同じにするにはどうすればよいですか?
どんな助けでも大歓迎です!!!
cytoscape-dagre は dagre からポイントを選択すべきではありませんか? 例https://jsfiddle.net/bababalcksheep/55cmk117/3/dagre.layout(g);を参照してください。dagre
の後にエッジ データにポイントがあり、サイトスケープ セグメント エッジによって消費される可能性があります。
$(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