D3.js中resize事件监听器未触发SVG重绘问题求助

问题根源 #

• 事件绑定错误：window.addEventListener("resize", renderingResize())里的renderingResize()是立即执行函数，把返回的SVG选择集当成了事件回调，而非传递函数本身。这导致只有页面加载时会执行一次，窗口resize时根本不会触发函数。
• 尺寸值未实时更新：bodyClient是页面初始化时获取的固定值，窗口大小变化后，这个变量不会自动刷新，就算resize事件触发，也只会用旧尺寸去设置SVG。
• 图形未重新渲染：就算SVG尺寸更新了，你没有重新调用halfCircle函数，旧图形不会适配新的SVG尺寸。

解决步骤 #

1. 修正事件绑定：把renderingResize()改成renderingResize，传递函数引用，这样resize事件触发时才会调用这个函数。
2. 实时获取尺寸：在renderingResize内部实时获取当前body的宽高，而非依赖初始化的固定值。
3. 重新渲染图形：在resize处理函数里重新调用halfCircle，确保图形适配新的SVG尺寸。

修改后的完整代码 #

const container = d3.select("body");

function resizeSVG(container, width, height) {
  let svg = container.selectAll("svg").data([null]);
  svg = svg
    .enter()
    .append("svg")
    .merge(svg)
    .attr("width", `${width}`)
    .attr("height", `${height}`);
  return svg;
}

function renderingResize() {
  // 实时获取当前body的尺寸
  const currentWidth = document.body.clientWidth;
  const currentHeight = document.body.clientHeight;
  const svg = resizeSVG(container, currentWidth, currentHeight);
  // 重新调用halfCircle更新图形
  halfCircle(svg, schoolarTimeStamp, 250, 10, 180, 0, true);
  return svg;
}

// 初始化渲染
const svg = renderingResize();

// 绑定resize事件，传递函数引用而非执行结果
window.addEventListener("resize", renderingResize);

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