График вылетает за пределы экрана, когда число дочерних элементов на узел больше 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();.

Дополнительная проблема и решение для этого:

Высказал, что ваш график выглядит плохо, когда у вас есть только один узел, поэтому, чтобы обойти это, вы можете установить для свойства padding '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>