如何让Cytoscape.js绘制的图形更均匀地占满画布空间？

Cytoscape.js 的 cose-bilkent 布局出现偶发横向集中排布、垂直空间利用率低的问题，可以通过调整布局参数直接解决，具体方案如下：

调整后的配置参数 #

name: "cose-bilkent",
animate: false,
idealEdgeLength: 50,
quality: "proof",
randomize: true,
nodeDimensionsIncludeLabels: false,
nodeRepulsion: 6000, // 适当降低节点斥力，避免节点过度向水平方向分散
edgeElasticity: 0.45,
nestingFactor: 0.1,
numIter: 100000,
gravity: 0.4, // 提升全局重力系数，收拢节点分布范围
tile: false, // 关闭默认的平铺切割逻辑，避免强制横向分区
aspectRatio: 0.6, // 强制布局宽高比，数值越小布局越偏向纵向，可根据你的容器实际宽高比调整为「容器高度/容器宽度」的值
fit: true, // 布局完成后自动适配容器尺寸，最大化节点可用空间
padding: 10 // 适配容器时的内边距，可根据展示需求调整

补充优化方案 #

如果调整参数后仍然偶发异常横向排布，可以关闭随机初始化，设置固定的seed值，保证每次布局效果一致，避免随机初始位置导致的排布偏差。布局渲染完成后也可手动调用cy.fit()方法，强制将所有节点适配到当前容器的可视范围内，进一步提升空间利用率。

内容的提问来源于stack exchange，提问作者tputkonen