如何让Cytoscape生成的关系图在其画布容器中居中对齐？

方式1：在布局配置中直接开启自动居中 #

在你现有的layout配置项中新增fit: true参数即可，布局运行完成后会自动将整张图适配并居中到容器内，你的布局部分修改后如下：

layout: {
    name: 'cose',
    fit: true, // 新增这一行，开启布局后自动适配居中
    idealEdgeLength: 100,
    nodeOverlap: 20,
    refresh: 20,
    padding: 30, // 这个参数控制图和容器边缘的边距，可根据需要调整
    randomize: false,
    componentSpacing: 100,
    nodeRepulsion: 400000,
    edgeElasticity: 100,
    nestingFactor: 5,
    gravity: 80,
    numIter: 1000,
    initialTemp: 200,
    coolingFactor: 0.95,
    minTemp: 1.0
},

方式2：手动调用API实现居中 #

如果需要在布局完成后、或者数据动态更新后调整居中，可调用Cytoscape内置的核心API，两种常用API区别如下：

• cy.fit(可选边距值)：自动调整缩放比例+居中，让所有元素刚好完整显示在容器可视范围内，示例代码：

// cytoscape实例初始化完成后调用即可
cy.fit(30); // 30是边距，可和你配置的padding值保持一致

• cy.center()：仅将图的整体中心对齐到容器中心，不会修改当前的缩放比例，适合已经调好缩放值只需要调整位置的场景。

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