关于javascript: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);
  };
}