如何通过具有同理能力的布局来控制断开连接的节点的位置

Question

我正在使用复合图库cytoscape.js，并使用cose-bilkent进行布局。我知道选项tile表示是否要平铺断开连接的节点。 但是布局cose-bilkent如何平铺断开连接的节点？

看看我的屏幕截图：

断开连接的节点位于画布的右上角，并且远离连接的节点，看起来不太好。

我希望可以更合理地控制断开节点的位置。例如，是否可以在连接节点的底部布置断开连接的节点？我需要的是以下屏幕截图：

演示

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

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

					layout: {
						name: 'cose-bilkent'
					},

					style: [
						{
							selector: 'node',
							style: {
								'background-color': '#ad1a66',
								'label':'data(n)'
							}
						},

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

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

						{
							selector: 'edge',
							style: {
								'width': 1,
								'line-color': '#ad1a66',
								'curve-style' : 'bezier',//haystack
						'line-color': 'rgb(168, 168, 168)',
						'target-arrow-color': 'rgb(168, 168, 168)',
				        'target-arrow-shape': 'triangle'
							}
						},

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

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

					elements: {"nodes":[{"data":{"id":"n_0","n":"n0"}},{"data":{"id":"n_1","n":"n1"}},{"data":{"id":"n_2","n":"n2"}},{"data":{"id":"n_3","n":"n3"}},{"data":{"id":"n_4","n":"n4"}},{"data":{"id":"n_5","n":"n5"}},{"data":{"id":"n_6","n":"n6"}},{"data":{"id":"n_7","n":"n7"}},{"data":{"id":"n_8","n":"n8"}},{"data":{"id":"n_0","n":"External Network"},"grabbable":false},{"data":{"id":"n_10","n":"n10"}},{"data":{"id":"n_11","n":"n11"}},{"data":{"id":"n_12","n":"n12"}},{"data":{"id":"n_13","n":"n13"}},{"data":{"id":"n_14","n":"n14"}},{"data":{"id":"n_15","n":"n15"}},{"data":{"id":"n_16","n":"n16"}},{"data":{"id":"n_17","n":"n17"}},{"data":{"id":"n_18","n":"n18"}},{"data":{"id":"n_19","n":"n19"}},{"data":{"id":"n_20","n":"n20"}},{"data":{"id":"n_21","n":"n21"}},{"data":{"id":"n_22","n":"n22"}},{"data":{"id":"n_23","n":"n23"}},{"data":{"id":"n_24","n":"n24"}},{"data":{"id":"n_25","n":"n25"}},{"data":{"id":"n_26","n":"n26"}},{"data":{"id":"n_27","n":"n27"}},{"data":{"id":"n_28","n":"n28"}},{"data":{"id":"n_29","n":"n29"}}],"edges":[{"data":{"source":"n_0","target":"n_1"}},{"data":{"source":"n_0","target":"n_7"}},{"data":{"source":"n_1","target":"n_7"}},{"data":{"source":"n_7","target":"n_0"}}]}
				});
			});

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

			#cy {
				z-index: 999;
				width: 85%;
				height: 85%;
				float: left;
			}

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

<script src="https://unpkg.com/cytoscape@3.1.0/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-cose-bilkent@4.0.0/cytoscape-cose-bilkent.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="cy"></div>

Answer 1

这是个老问题，但我使用这个扩展程序，它有一些实用程序，比如打包组件，这可能是你正在寻找的（如果仍然需要）

https://github.com/iVis-at-Bilkent/cytoscape.js-layout-utilities