当每个节点的子节点数大于 5 时，图形飞出屏幕

Question

我学习了cytoscape.js 和相关的扩展，并尝试了它的许多惊人的功能。

我发现当孩子的数量大于5并展开一个节点时，整个图形飞出屏幕。

我构建了更复杂的数据，每个父节点拥有 3 个父节点和 5 个子节点。任意两个子节点之间存在连接。 所以有3个父节点，15个子节点和14+13+12..1个链接。

综上所述，当链接较多时，布局行为看起来异常。

请参阅下面的演示。

你可以修改我的函数getInitData()的参数看看效果。

document.addEventListener('DOMContentLoaded', function(){

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

					ready: function(){
						var api = this.expandCollapse({
							layoutBy: {
								name: "cose-bilkent",
								animate: 'end',
								randomize: false,
								fit: false,
								idealEdgeLength : 150
							},
							fisheye: false,
							animate: true,
							undoable: false
						});
						api.collapseAll();
					},

					style: [
						{
							selector: 'node',
							style: {
								'background-color': '#ad1a66'
							}
						},

						{
							selector: ':parent',
							style: {
								'background-opacity': 0.333
							}
						},

						{
							selector: "node.cy-expand-collapse-collapsed-node",
							style: {
								"background-color": "darkblue",
								"shape": "rectangle"
							}
						},

						{
							selector: 'edge',
							style: {
								'width': 3,
								'line-color': '#ad1a66'
							}
						},

						{
							selector: 'edge.meta',
							style: {
								'width': 2,
								'line-color': 'red'
							}
						},

						{
							selector: ':selected',
							style: {
							  "border-width": 3,
								"border-color": '#DAA520'
							}
						}
					],

					
					elements : getInitData(3, 5)
				});

				var api = cy.expandCollapse('get');
				var elements = null;

				

			});

			function getInitData(parentNum, childrenNum){
				var data = [], children = [], i, j, n;
				for(i = 0; i < parentNum; i++){
					n = "parent"+i;
					data.push({"group":'nodes',data:{"id":n}});
					for(j = 0; j < childrenNum; j++){
						children.push({"group":'nodes',data:{"id":n+"_child_"+j, parent:n}});
					}
				}
				
				var s,t;
				for(i = 0; i < children.length - 1; i++){
					s = children[i].data.id;
					for(j = i+1; j < children.length; j++){
						t = children[j].data.id;
						data.push({"group":'edges',data:{"id":s+"_"+t, source:s, target:t}});
					}
				}
				return data.concat(children);
			}

body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px;
}

#cy {
  z-index: 999;
  width: 100%;
  height: 100%;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape@3.1.0/dist/cytoscape.min.js"></script>

<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/cytoscape-cose-bilkent@4.0.0/cytoscape-cose-bilkent.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse@3.1.1/cytoscape-expand-collapse.js"></script>
<div id="cy"></div>

Answer 1

解决方案一：

您的图表没有任何合适的逻辑。您可以使用cy.center() 和cy.fit() 这两种方法自行实现，这两种方法将图形居中到当前视口，将图形缩放到正确的位置。每次更改图表时，您都必须调用这些方法，例如当您添加节点时，删除节点，或者像您的情况一样，展开和折叠。您可以通过绑定这些事件并在那里调用上述方法来做到这一点。 绑定，正如您从上一个问题中知道的那样：

cy.unbind('event');
cy.bind('event', 'target', function (event) {...});

解决方案二：

如果可能（并非所有布局都可以这样做），您也可以将方法设置为 fit: true,，这将在内部与 cy.fit(); 和 cy.center(); 匹配图表。

其他问题和解决方案：

您说过，当您只有一个节点时，您的图表看起来很糟糕，因此为了避免这种情况，您可以将'cose-bilkent' 的填充属性设置为更高的数字。您可以在选项中的初始化时执行此操作。

document.addEventListener('DOMContentLoaded', function() {
  var padding = 10;
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    layout: {
      name: 'cose-bilkent',
      animate: false,
      randomize: true
    },
    style: [{
        selector: 'node',
        style: {
          'background-color': '#ad1a66'
        }
      },
      {
        selector: 'edge',
        style: {
          'width': 3,
          'line-color': '#ad1a66'
        }
      }
    ],
    elements: [{
      "data": {
        "id": "glyph9"
      }
    }]
  });
  document.getElementById("add").addEventListener("click", function() {
    padding += 10;
    var layout = cy.layout({
      name: 'cose-bilkent',
      animate: false,
      padding: padding
    });
    layout.run();
  });
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 90%;
  width: 100%;
  position: absolute;
  float: left;
}

button {
  margin-right: 10px;
}

<!DOCTYPE>

<html>

<head>
  <title>cytoscape-cose-bilkent.js demo</title>

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

  <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="https://unpkg.com/cytoscape@3.1.0/dist/cytoscape.min.js"></script>

  <!-- for testing with local version of cytoscape.js -->
  <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
  <script src="https://unpkg.com/cytoscape-cose-bilkent@4.0.0/cytoscape-cose-bilkent.js"></script>
  <script src="https://unpkg.com/cytoscape-expand-collapse@3.1.1/cytoscape-expand-collapse.js"></script>

</head>

<body>

  <button id="add" type="button">Add padding</button>

  <div id="cy"></div>

</body>

</html>