I need to use straight connections and the label needs to be on the middle (with small offset).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cytoscape Double Connection Example</title>
<!-- Import jQuery -->
<script src=".6.0.min.js"></script>
<!-- Import Cytoscape -->
<script src=".23.0/cytoscape.min.js"></script>
<style>
#cy {
width: 800px;
height: 600px;
border: 1px solid #ccc;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="cy"></div>
<script>
$(function () {
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// Nodes
{ data: { id: 'A', label: 'A' }, position: { x: 200, y: 300 } },
{ data: { id: 'B', label: 'B' }, position: { x: 600, y: 300 } },
// Edges with labels
{ data: { id: 'AB', source: 'A', target: 'B', label: 'A to B' } },
{ data: { id: 'BA', source: 'B', target: 'A', label: 'B to A' } },
],
style: [
{
selector: 'node',
style: {
label: 'data(label)',
'background-color': '#0074D9',
'text-valign': 'center',
color: '#fff',
'text-outline-width': 2,
'text-outline-color': '#0074D9',
},
},
{
selector: 'edge',
style: {
'curve-style': 'straight',
'target-arrow-shape': 'triangle',
width: 2,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'label': 'data(label)',
'font-size': 10,
},
},
],
layout: {
name: 'preset',
},
});
});
</script>
</body>
</html>
I tried to use source-text-offset with source-label but I am not able to position the label near the center of the edge with it for some reason. And that is critical.
At first it looks exactly like what I needed, but then if the length of an edge changes - it doesn't stay on it's position.
Another thing is that in the actual case there are a lot of connection, so applying a selector individually is not an option.