如何修改布局的origin(0,0)原点或自定义设置布局中心点？

原生参数配置方法 #

Euler、CISE布局均原生支持中心点自定义，无需寻找隐藏选项，直接调整对应布局参数即可：

• Euler布局：修改origin参数，传入目标区域的中心点坐标数组即可，示例配置：

  cy.layout({
    name: 'euler',
    origin: [600, 600], // 替换为你需要的目标中心点坐标
    fit: false, // 必须关闭fit避免布局自动适配视口覆盖原点设置
    // 其余原有参数保持不变
  }).run();
  

• CISE布局：通过独立的centerX、centerY参数设置中心点：

  cy.layout({
    name: 'cise',
    centerX: 600,
    centerY: 600,
    fit: false,
    // 其余原有参数保持不变
  }).run();
  

如果你使用的是Cytoscape桌面版，直接在布局设置面板找到对应参数输入框，填入目标坐标后运行布局即可。

兼容版临时位移方案 #

如果你使用的布局版本过低不支持上述参数，可以用批量位移的方式实现相同效果：

1. 正常运行布局，选中的节点会先排布在(0,0)附近
2. 计算整组节点的当前中心与目标中心的偏移量，批量平移所有选中节点到目标区域，代码示例：

const targetCenter = [600, 600]; // 目标中心点坐标
const selectedNodes = cy.nodes(':selected');
const bbox = selectedNodes.boundingBox();
const currentCenter = [bbox.x1 + bbox.w/2, bbox.y1 + bbox.h/2];
const offset = [targetCenter[0] - currentCenter[0], targetCenter[1] - currentCenter[1]];

selectedNodes.positions(node => ({
  x: node.position('x') + offset[0],
  y: node.position('y') + offset[1]
}));

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