I made a cytoscape graph where all the edges are straight, and the layout is "breadth-first" (I just chose the layout arbitrarily) and it gives a misleading chart. For instance, node RH4 is supposed to be connected to node E8. The connection goes right through another node (RH1) and so both E8 and RH4 look as if they are connected to RH1. In reality, they are not supposed to be. Here is the code that caused this:
var cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'background-color': 'mapData(activation, -1, 1, blue, red)',
'label': 'data(id)'
}
}, {
selector: 'edge',
style: {
'width': 3,
'line-color': function(ele) {
return ele.data('relation')
},
'target-arrow-color': function(ele) {
return ele.data('relation')
},
'target-arrow-shape': 'triangle'
}
}],
layout: {
name: 'breadthfirst'
},
elements: {
nodes: [{
group: 'nodes',
data: {
id: 'E1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E5',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E6',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E7',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E8',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH4',
activation: 0
}
}
],
edges: [{
group: 'edges',
data: {
id: 'edge0',
source: 'E4',
target: 'E5',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge1',
source: 'E6',
target: 'E7',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge2',
source: 'LH1',
target: 'E1',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge3',
source: 'LH1',
target: 'RH1',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge4',
source: 'LH2',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge5',
source: 'LH3',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge6',
source: 'LH4',
target: 'E6',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge7',
source: 'RH1',
target: 'E2',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge8',
source: 'RH1',
target: 'E3',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge9',
source: 'RH2',
target: 'E5',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge10',
source: 'RH3',
target: 'E7',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge11',
source: 'RH4',
target: 'E8',
relation: 'red'
}
}
]
}
});body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>Is the reason for this problem that 'breadthfirst' layout puts nodes in specific places, and the edges must be straight? Would there be a way to make curved edges that don't go through other nodes? Or is the answer somewhere else?
Thanks
You are using the breadthfirst layout, that is the problem:
As you can read here, the breadthfirst layout puts nodes in a hierarchy, based on a breadthfirst traversal of the graph. It is best suited to trees and forests in its default top-down mode, and it is best suited to DAGs in its circle mode.
You are using this layout in a not connected random set of elements, this would be better suited for something like the Dagre-Layout:
var cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'background-color': 'mapData(activation, -1, 1, blue, red)',
'label': 'data(id)'
}
}, {
selector: 'edge',
style: {
'width': 3,
'line-color': function(ele) {
return ele.data('relation')
},
'target-arrow-color': function(ele) {
return ele.data('relation')
},
'target-arrow-shape': 'triangle'
}
}],
layout: {
name: 'dagre'
},
elements: {
nodes: [{
group: 'nodes',
data: {
id: 'E1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E5',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E6',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E7',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E8',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH4',
activation: 0
}
}
],
edges: [{
group: 'edges',
data: {
id: 'edge0',
source: 'E4',
target: 'E5',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge1',
source: 'E6',
target: 'E7',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge2',
source: 'LH1',
target: 'E1',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge3',
source: 'LH1',
target: 'RH1',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge4',
source: 'LH2',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge5',
source: 'LH3',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge6',
source: 'LH4',
target: 'E6',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge7',
source: 'RH1',
target: 'E2',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge8',
source: 'RH1',
target: 'E3',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge9',
source: 'RH2',
target: 'E5',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge10',
source: 'RH3',
target: 'E7',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge11',
source: 'RH4',
target: 'E8',
relation: 'red'
}
}
]
}
});body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.1.0/cytoscape-dagre.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>Dagre organizes the graph using a DAG (directed acyclic graph) algorithm, which is more suited for not connected graphs like this.
PS: Please revisit your older question and add the requested answer (that you posted as a comment). Thanks