如何让Graph实例铺满屏幕及父容器？

因为Graph的width和height必须是数字类型，不能用百分比，所以得通过获取容器的实际像素尺寸来动态设置，同时还要处理尺寸变化的情况，具体操作如下：

• 初始化时获取父容器尺寸：通过容器元素的clientWidth和clientHeight拿到实际宽高（这两个属性返回数字类型的像素值），直接传入Graph的配置项。
• 监听尺寸变化并更新Graph：窗口resize或者父容器布局变化时，重新获取尺寸并调用Graph的resize方法更新宽高（主流图形库都提供这类方法）。

具体代码实现（React场景） #

import { useEffect, useRef } from 'react';
import Graph from '你的Graph库';

function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  const graphRef = useRef<Graph | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 封装获取容器尺寸的函数
    const getContainerSize = () => {
      const { clientWidth, clientHeight } = containerRef.current!;
      return { width: clientWidth, height: clientHeight };
    };

    // 初始化Graph实例
    const { width, height } = getContainerSize();
    graphRef.current = new Graph({
      container: containerRef.current,
      width,
      height,
      background: {
        color: "#F2F7FA"
      }
    });

    // 尺寸变化时更新Graph
    const handleResize = () => {
      const { width, height } = getContainerSize();
      graphRef.current?.resize(width, height);
    };

    // 监听窗口resize
    window.addEventListener('resize', handleResize);
    // 监听父容器自身尺寸变化（比如父容器因内部布局调整改变大小）
    const resizeObserver = new ResizeObserver(handleResize);
    resizeObserver.observe(containerRef.current);

    // 组件卸载时清理资源
    return () => {
      window.removeEventListener('resize', handleResize);
      resizeObserver.disconnect();
      graphRef.current?.destroy(); // 若Graph提供销毁方法，记得调用
    };
  }, []);

  return (
    <div 
      ref={containerRef} 
      style={{ 
        width: '100vw', 
        height: '100vh', 
        margin: 0, 
        padding: 0,
        overflow: 'hidden'
      }}
    />
  );
}

export default App;

关键细节说明 #

• clientWidth/clientHeight：获取元素的可视区域宽高，不包含边框、滚动条和外边距，刚好满足填充父容器的需求。
• ResizeObserver：比单纯监听window.resize更精准，能捕捉到父容器因内部组件渲染/隐藏等布局变化导致的尺寸改变。
• 资源清理：组件卸载时必须移除监听并销毁Graph实例，避免内存泄漏。

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