Does cytoscape support multiple ports for a single node?

user_187610 0
Viewed 552

Cytoscape provides a configuration for a single source/target endpoint, but can it support N endpoints? (I couldn't find any source for that in the documentation or in google, meaning that the answer might be negative, but I want to make sure before I decide to go for a different solution)

illustration:

enter image description here

cytoscape.js javascript
1 Answers

It's possible, but in a limited way. To do that, you need to use bezier edges (https://js.cytoscape.org/#style/bezier-edges). The two useful options here are: "control-point-step-size" and "control-point-distance" (choose one of them)

Then, just define your edges and they won't overlap

 var cy = window.cy = cytoscape({
          container: document.getElementById('cy'),

         layout: {
            name: 'preset',
         },
            
          style: [
            {
              selector: 'node',
              css: {
                'shape': 'rectangle',
                'width' : '280',
                'height': '35',
                'border-style' : 'solid',
                'border-width' : '1',
                'background-color': 'white' ,
                'border-color':'black',
                'color': 'white'
              }
            },
            {
              selector: 'edge',
              css: {
                'width': 1,
                'target-arrow-color': 'black',
                        'line-color': 'black',
                'curve-style': 'bezier',
                'control-point-distance':50
              }
            },
            
          ],
            elements: 
            [
                { data: { 'id': 'node1' }, classes: '', position: { x: 25, y: 120 }  }, 
                { data: { 'id': 'node2' }, classes: '', position: { x: 10, y: 500 }  },
                { data: { 'id': 'node3' }, classes: '', position: { x: 200, y: 350 }  },

                {"data":{"source":"node1","target":"node2"}, "group":"edges", "classes":""},
                {"data":{"source":"node2","target":"node3"}, "group":"edges", "classes":""},
                {"data":{"source":"node1","target":"node2"}, "group":"edges", "classes":""},
                {"data":{"source":"node1","target":"node3"}, "group":"edges", "classes":""},
                {"data":{"source":"node1","target":"node2"}, "group":"edges", "classes":""},
                {"data":{"source":"node3","target":"node2"}, "group":"edges", "classes":""},
  
            ]
        });
#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.12/cytoscape.min.js"></script>

<!DOCTYPE html>
<html>
  <head>
    
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link href="css/style.css" rel="stylesheet" />

    
</head>
<body>
    <div id="cy"></div>
  </body>
</html>

user_81928410
Related