4.3.4版本fitView( )方法失效

[Youmyin]

在4.3.4版本中我遇到了和https://github.com/antvis/G6/issues/2901# 同样的问题，fitview无法适配，必须强制指定width和height

      const container = document.getElementById('container')
      const width = container!.clientWidth    // 没有任何内容渲染
      const height = container!.clientHeight

      const graph = new G6.Graph({
        container:ref.current,
        width:700,         // 直接指定
        height:400,
        linkCenter: true,
        ....
})

[Youmyin]

在直接设置width和height的情况下，必须移出fitView( )方法，否则页面没有内容

[chk4658]

怎么才能让canvas画布自适应浏览器大小呢

[Yanyan-Wang]

出fitView( )方法，否则页面没有内容

没能复现，请提供复现在线 demo

[Yanyan-Wang]

怎么才能让canvas画布自适应浏览器大小呢

一种方法是获取容器 clientWidth clientHeight ，在初始化图时给 graph 的 width height

另一种是不设置 width height 就会自动获取

如果你说的是改变浏览器大小时自适应，需要监听浏览器的 onsize，然后调用 graph.changeSize 来改变大小

[Yanyan-Wang]

首先确定一下你这里获得的 container!.clientWidth 和 container!.clientHeight 是否正确，比如 react 需要渲染完成后才能获取准确的值

[RothCheng]

在 "@antv/g6": "^4.5.0" 遇到了同样的问题：https://github.com/antvis/G6/issues/3030#issuecomment-903529125

视图	代码块

[Summer-Lin]

`

<div id="mountNode"></div>

<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.6.4/dist/g6.min.js"></script>

<script>
  const graph = new G6.Graph({
    container: 'mountNode',
      width: 1000,
      height: 600,
      fitView: true,
      fitViewPadding: [20, 40, 50, 20],
  });

  const main = async () => {
    const response = await fetch(
      'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
    );
    const remoteData = await response.json();
    graph.data(remoteData);
    graph.render();
  };
  main();
</script>

`

4.6.4 版本 fitView也没启作用

[gotounix]

<div id="mountNode"></div>

<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.6.4/dist/g6.min.js"></script>

<script>
  const graph = new G6.Graph({
    container: 'mountNode',
      width: 1000,
      height: 600,
      fitView: true,
      fitViewPadding: [20, 40, 50, 20],
  });

  const main = async () => {
    const response = await fetch(
      'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
    );
    const remoteData = await response.json();
    graph.data(remoteData);
    graph.render();
  };
  main();
</script>

4.6.4 版本 fitView也没启作用

@Summer-Lin 我测试了 4.6.x 全系列版本都没用，你解决了这个问题吗？是更新后使用方法变了吗？

[Yanyan-Wang]

出现 fitView 失败的几个原因：

• minZoom 值不够小。如果你的图范围很大，要缩放到小于 minZoom 的值才能完成适配，这种情况下缩放就会失败。图默认的 minZoom 是 0.02。解决方案是在实例化图的时候将 minZoom 设置一个很小的值；

• 如果使用的是 force 布局，布局过程是实时渲染计算结果的，所以会出现模拟力相互作用的动画效果。这种情况下如果每一次渲染都进行 fitView，那么图可能就忽大忽小的，因此若配置了 fitView 那么 G6 会在布局结束的时候，进行一次图的适配。即动画结束时进行大小适配。而 force 在迭代的尾声接近收敛，节点移动的幅度很小，有时候看起来好像动画已经结束了却还没有适配，需要等它完全稳定下来才意味着布局结束，从而进行大小适配；force 不支持无动画的布局，近期新增的 force2 支持配置 animate 来控制是否一边计算布局一边渲染，设置为 false，且图实例配置了 fitView: true，那么将布局完成后直接绘制出适配容器大小的图。

• 给到 graph 的 width height 在图实例化时不准确，导致创建的画布大小不对。如果需要图的 始终适配容器大小，需要监听容器的 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);
  };