D3线性比例尺渲染等距垂直线失效，数据绑定及窗口resize问题排查

我帮你梳理了代码里的几个核心问题，咱们一步步来修正：

问题分析 #

1. 重复创建容器导致线条堆积：每次窗口 resize 时，你都在SVG里新追加一个<g>元素，旧的网格容器和线条不会被清除，导致窗口变化时红色线条越堆越多。
2. 刻度坐标计算错误：xScale.ticks(ticksNumber)返回的是定义域[0,1]内的刻度值（比如[0, 0.25, 0.5, 0.75, 1]），不需要手动乘以width——比例尺xScale本身就是用来完成定义域到值域的映射的，直接调用xScale(d)就能得到对应窗口宽度的坐标。
3. 数据绑定未覆盖完整生命周期：你只处理了enter()阶段添加新线条，但没有更新已有线条的位置，也没有移除不再需要的元素，导致窗口变化时无法正确同步网格线的位置和数量。

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  <style>
    body { margin: 0; }
    svg { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
<svg id="svg"></svg>
<script>
const ticksNumber = 5
// 初始化SVG和网格容器，只执行一次
const svg = d3.select('#svg')
const grid = svg.append('g')

// 封装resize处理逻辑
function handleResize() {
  const width = window.innerWidth
  const height = window.innerHeight

  // 更新线性比例尺
  const xScale = d3.scaleLinear()
    .domain([0, 1])
    .range([0, width])

  // 获取正确的刻度值：用比例尺转换定义域刻度到窗口坐标
  const ticksValues = xScale.ticks(ticksNumber).map(d => xScale(d))

  // 完整的数据绑定生命周期：enter + update + exit
  const lineSelection = grid.selectAll('line')
    .data(ticksValues, d => d) // 用刻度值作为唯一标识，避免索引绑定的问题

  // 移除不再需要的线条
  lineSelection.exit().remove()

  // 添加新线条（如果有新刻度）
  lineSelection.enter()
    .append('line')
    .attr('stroke', 'red')
    .merge(lineSelection) // 合并enter和update，统一设置属性
    .attr('x1', d => d)
    .attr('x2', d => d)
    .attr('y1', 0)
    .attr('y2', height)
}

// 初始执行一次，再监听resize
handleResize()
window.addEventListener('resize', handleResize)
</script>
</body>
</html>

关键优化点说明 #

• 容器初始化前置：把SVG和网格<g>的创建放到resize事件外面，确保只创建一次，避免重复堆积。
• 正确使用比例尺：通过xScale(d)直接获取映射后的窗口坐标，替代手动乘法，保证计算准确。
• 完整的数据绑定：
  • 用刻度值本身作为数据绑定的标识（data(ticksValues, d => d)），比索引绑定更可靠，避免刻度数量变化时的匹配错误。
  • 处理exit()阶段移除多余线条，merge()合并新元素和已有元素，统一更新位置属性，保证窗口变化时网格线能正确更新。

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