刚好做过类似的需求，核心思路就是先让树布局渲染出它的真实大小，再反过来调整容器尺寸去适配布局，而不是让布局缩放到固定容器里。下面是具体的实现步骤：

1. 关闭布局的自动适配容器功能 #

首先初始化Cytoscape实例时，一定要把布局配置里的fit设为false，这样布局会按照树的节点数量、间距等参数渲染出真实大小，不会被强制缩放到固定容器尺寸里。另外可以给布局加一点padding，让树和容器边缘留些空隙：

const cy = cytoscape({
  container: document.getElementById('tree-container'),
  elements: yourTreeData, // 你的树节点/边数据
  layout: {
    name: 'tree',
    fit: false, // 关键：禁用布局适配容器
    padding: 15, // 可选：给布局周围留空隙
    nodeSpacing: 30, // 树节点之间的间距（按需调整）
    rankSpacing: 50 // 树层级之间的间距（按需调整）
  },
  // 其他Cytoscape配置（比如样式、交互等）
});

2. 布局完成后获取真实边界并调整容器 #

布局是异步执行的，所以要在布局完成的回调里处理尺寸调整。Cytoscape提供了boundingBox()方法，可以拿到整个树布局的左上角坐标、宽度和高度，用这些值直接设置容器的宽高即可：

// 先获取布局实例
const treeLayout = cy.layout({
  name: 'tree',
  fit: false,
  padding: 15
});

// 监听布局完成事件
treeLayout.on('layoutstop', () => {
  // 获取树布局的真实边界
  const layoutBounds = cy.boundingBox();
  // 获取容器元素
  const container = cy.container();
  
  // 设置容器的宽高为布局的真实尺寸
  container.style.width = `${layoutBounds.width}px`;
  container.style.height = `${layoutBounds.height}px`;
  
  // 触发Cytoscape重新适配容器尺寸（保险操作）
  cy.resize();
});

// 启动布局
treeLayout.run();

3. 批量处理多个树布局的情况 #

如果你有多个独立的canvas/容器，可以把上面的逻辑封装成一个函数，批量调用：

function adaptContainerToTree(cyInstance) {
  const layout = cyInstance.layout({
    name: 'tree',
    fit: false,
    padding: 15
  });

  layout.on('layoutstop', () => {
    const bounds = cyInstance.boundingBox();
    const container = cyInstance.container();
    
    container.style.width = `${bounds.width}px`;
    container.style.height = `${bounds.height}px`;
    cyInstance.resize();
  });

  layout.run();
}

// 示例：初始化多个树布局并调用适配函数
const cy1 = cytoscape({
  container: document.getElementById('container-1'),
  elements: treeData1
});
const cy2 = cytoscape({
  container: document.getElementById('container-2'),
  elements: treeData2
});

adaptContainerToTree(cy1);
adaptContainerToTree(cy2);

4. 额外注意事项 #

• 给容器加上box-sizing: border-box：如果你的容器有边框或内边距，这个CSS属性可以确保设置的宽高是容器的总尺寸，避免内边距额外撑开容器：

  .tree-container {
    box-sizing: border-box;
    /* 其他样式：比如border、background等 */
  }
  

• 处理动态节点尺寸：如果树节点包含动态内容（比如加载后才显示的文本），可以在cy.on('render', ...)事件里再触发一次尺寸调整，但要注意加个防抖避免无限循环。
• 只计算可见元素：如果布局里有隐藏元素，可以用cy.elements(':visible').boundingBox()来获取可见元素的边界，避免容器尺寸被隐藏元素影响。

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