Поддерживает ли Cytoscape несколько портов для одного узла? - PullRequest
Новая
       4

Поддерживает ли Cytoscape несколько портов для одного узла?

0 голосов
/ 26 февраля 2020

Cytoscape предоставляет конфигурацию для единственной исходной / целевой конечной точки, но может ли он поддерживать N конечных точек? (Я не смог найти источник для этого в документации или в Google, что означает, что ответ может быть отрицательным, но я хочу убедиться, прежде чем я решу go для другого решения)

иллюстрация :

enter image description here

1 Ответ

1 голос
/ 26 февраля 2020

Да, это возможно! Чтобы сделать это, вам нужно использовать края Безье (https://js.cytoscape.org/#style / края Безье ). Здесь есть две полезные опции: «control-point-step-size» и «control-point-distance» (выберите один из них)

Затем просто определите свои ребра, и они не будут перекрываться 

 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>
...