Cytoscape中cy.fit()与cy.center()无法正常工作的问题

我之前在使用Cytoscape时也碰到过一模一样的问题——明明配置好了节点和边，但调用cy.fit()和cy.center()就是没效果，图形要么超出容器要么歪在一边。结合你的代码来看，问题大概率出在布局还没完成就执行了适配和居中操作。

核心原因 #

Cytoscape的布局算法（不管是默认的还是第三方插件比如dagre）都是异步执行的。你在初始化后直接调用cy.fit()，此时节点还没被布局算法计算出最终位置，fit方法拿不到正确的元素边界数据，自然无法正确适配容器。

另外你引入了dagre布局插件，但代码里没有配置使用它，Cytoscape会默认用preset布局（如果节点没有预设位置，就自动降级为random布局），这也可能导致布局过程的异步性被忽略。

解决方案 #

我们需要等到布局完全完成后，再调用cy.fit()和cy.center()，同时确保正确配置布局（比如用你引入的dagre）。这里有两种可靠的实现方式：

方式1：监听布局的stop事件

如果明确使用某款布局插件（比如dagre），可以在布局配置里指定stop回调：

var cy = cytoscape({
  container: document.getElementById('cy'),
  style: cytoscape.stylesheet()
    // 你的样式配置...
  elements: elements,
  // 配置dagre布局
  layout: {
    name: 'dagre',
    rankDir: 'TB', // 可选，设置布局方向
    stop: function() {
      // 布局完成后执行适配和居中
      cy.fit();
      cy.center();
      cy.autolock(true); // 锁定布局要在fit之后
    }
  }
});

方式2：监听Cytoscape全局的layoutstop事件

如果不确定布局类型，或者用的是默认布局，可以给cy实例绑定layoutstop事件：

var cy = cytoscape({
  // 你的初始化配置...
});

// 监听布局完成事件
cy.on('layoutstop', function() {
  cy.fit();
  cy.center();
  cy.autolock(true);
});

额外注意事项 #

• 确保容器#cy在初始化Cytoscape之前已经被DOM渲染完成，建议把script标签放在<div id="cy"></div>之后，或者用DOMContentLoaded包裹代码：

  document.addEventListener('DOMContentLoaded', function() {
    // 你的Cytoscape初始化代码...
  });
  

• 调用cy.autolock(true)要放在cy.fit()之后，否则锁定状态可能会影响fit方法调整节点位置。

修改后的完整代码示例 #

<style>
#cy {
  height: 500px;
  width: 900px;
  position: absolute;
  top: 0;
  border: 2px solid #6FB1FC;
  background: #fff;
}
</style>
<div id="cy"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.6/cytoscape.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var elements = {
    nodes: [
      { data: { id: 'a', name: 'a' } },
      { data: { id: 'b', name: 'b' } },
      { data: { id: 'c', name: 'c' } },
      { data: { id: 'd', name: 'd' } },
      { data: { id: 'e', name: 'e' } },
      { data: { id: 'f', name: 'f' } },
      { data: { id: 'j', name: 'j' } },
      { data: { id: 'k', name: 'k' } }
    ],
    edges: [
      { data: { source: 'a', target: 'b' } },
      { data: { source: 'b', target: 'c' } },
      { data: { source: 'c', target: 'd' } },
      { data: { source: 'c', target: 'e' } },
      { data: { source: 'c', target: 'f' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } }
    ]
  };

  var cy = cytoscape({
    container: document.getElementById('cy'),
    style: cytoscape.stylesheet()
      .selector('node')
      .css({
        'shape': 'rectangle',
        'content': 'data(name)',
        'width': 400,
        'height': 34,
        'text-valign': 'center',
        'background-color': '#6FB1FC',
        'color': '#fff',
      })
      .selector(':selected')
      .css({
        'border-width': 2,
        'border-color': '#333',
        'background-color': '#0073bb'
      })
      .selector('edge')
      .css({
        'curve-style': 'bezier',
        'opacity': 0.65,
        'width': 2,
        'target-arrow-shape': 'triangle',
        'line-color': '#000000',
        'source-arrow-color': '#000000',
        'target-arrow-color': '#000000'
      })
      .selector('.faded')
      .css({
        'opacity': 0.5,
        'text-opacity': 1
      }),
    elements: elements,
    layout: {
      name: 'dagre',
      rankDir: 'TB'
    }
  });

  cy.on('layoutstop', function() {
    cy.fit();
    cy.center();
    cy.autolock(true);
  });
});
</script>

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