AntV G6 的坑之—— fitView 适配失败

AntV G6 是一款图可视化与分析开源引擎。《AntV G6 的坑之——XXX》系列文章持续更新中，总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中提问，求 GitHub Star ⭐️https://github.com/antvis/g6

原文链接：https://g6.antv.antgroup.com/...

为什么明明在图实例上配置了 fitView: true，但却不生效？

fitView 不生效的原因可能是：

1. minZoom 值不够小。如果你的图范围很大，要缩放到小于 minZoom 的值才能完成适配，这种情况下缩放就会失败。图默认的 minZoom 是 0.02。解决方案是在实例化图的时候将 minZoom 设置一个很小的值；
2. 如果使用的是 type: force 布局，布局过程是实时渲染计算结果的，所以会出现模拟力相互作用的动画效果。这种情况下如果每一次渲染都进行 fitView，那么图可能就忽大忽小的，因此若配置了 fitView 那么 G6 会在布局结束的时候，进行一次图的适配。即动画结束时进行大小适配。而 force 在迭代的尾声接近收敛，节点移动的幅度很小，有时候看起来好像动画已经结束了却还没有适配，需要等它完全稳定下来才意味着布局结束，从而进行大小适配；

P.S. force 不支持无动画的布局，近期新增的 force2 支持配置 animate 来控制是否一边计算布局一边渲染，设置为 false，且图实例配置了 fitView: true，那么将布局完成后直接绘制出适配容器大小的图。

3. 给到 graph 的 width 或 height 在图实例化时不准确，导致创建的画布大小不对。这很有可能出现在 React 初始化时，图的容器还没有渲染。如果需要图始终适配容器大小，可以监听容器的 width、height 变化，进行 graph.changeSize 和必要的 graph.fitView。例如在用户拖拽浏览器改变大小时，使用 graph.changeSize:

if (typeof window !== 'undefined') {
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };
}