cytoscape是否支持单个节点的多个端口？

Question

Cytoscape为单个源/目标端点提供了配置，但是它可以支持N个端点吗？（我在文档或google中找不到任何来源，这意味着答案可能是否定的，但我想确定一下之后再决定采用其他解决方案）

插图：

Answer 1

是的，有可能！为此，您需要使用贝塞尔曲线边缘（https://js.cytoscape.org/#style/bezier-edges）。这里有两个有用的选项：“控制点步长”和“控制点距离”（选择其中之一）

然后，只需定义您的边缘，它们就不会重叠

 var cy = window.cy = cytoscape({
          container: document.getElementById('cy'),
  
            
          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':20
              }
            },
			
          ],
			elements: 
			[
				{ data: { 'id': 'node1' }, classes: '' }, 
				{ data: { 'id': 'node2' }, classes: '' },
				{ data: { 'id': 'node3' }, classes: '' },

				{"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>

cytoscape是否支持单个节点的多个端口？

问题描述投票：0回答：1

1个回答

最新问题

cytoscape是否支持单个节点的多个端口？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1