Question

几天来，我学习了map.get和相关的扩展名，并尝试了其许多惊人的功能。

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

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

总而言之，当有更多链接时，布局行为看起来异常。

请参阅下面的演示。

您可以修改我的函数cytoscape.js的参数以查看效果。

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;
}

Answer 1

解决方案一：

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

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

解决方案二：

您也可以在可能的情况下（并非所有布局都可以这样做），将方法设置为fit: true,，使该图在内部适合cy.fit();和cy.center();。

其他问题和解决方案：

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

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>

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

1 个答案:

解决方案一：

解决方案二：

其他问题和解决方案：