0
см. Ниже cytoscape.js vs dagre-d3.js для одного и того же набора данных.cytoscape.js dagre layout segment edge
Как я могу сделать cytoscape.js кромками же как 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