D3.js v7 可滚动图表实现Y轴标签始终固定在可视区域的方案问询

• 拆分SVG元素分组
  将SVG内部元素拆分为两类独立分组：
  • 可滚动分组：存放折线、X轴、网格线等需要跟随滚动移动的元素
  • 固定分组：存放两个Y轴<g>元素、对应文本标签，固定分组层级需高于可滚动分组，避免被遮挡
• 监听滚动事件动态更新Y轴位置
  根据你实现横向滚动的方式选择对应逻辑：
  • 若采用外层容器overflow: auto实现滚动：
    监听外层容器的scroll事件，获取横向滚动距离，动态设置Y轴分组的平移偏移量：

  // 外层滚动容器选择器可根据你的实际代码调整
  const scrollContainer = d3.select('.chart-wrapper')
  const yAxisGroups = d3.selectAll('.y-axis-blue, .y-axis-green')
  // 你代码中定义的左边距，根据实际值调整
  const marginLeft = 30
  
  scrollContainer.on('scroll', function() {
    const currentScrollLeft = this.scrollLeft
    yAxisGroups.attr('transform', `translate(${currentScrollLeft + marginLeft}, 0)`)
  })
  

  • 若采用D3 zoom实现平移滚动：
    监听zoom事件，Y轴分组不跟随整体平移，始终固定在左侧边距位置：

  const zoomBehavior = d3.zoom()
    .scaleExtent([1, 1]) // 禁止缩放仅保留平移能力
    .on('zoom', (e) => {
      // 可滚动分组整体应用平移变换
      d3.select('.scrollable-group').attr('transform', e.transform)
      // Y轴分组固定在左侧，不跟随平移
      yAxisGroups.attr('transform', `translate(${marginLeft}, 0)`)
    })
  

• 优化显示遮挡问题
  在Y轴分组最内层插入白色背景矩形，避免滚动的折线、X轴内容覆盖Y轴文本：

yAxisGroups.each(function() {
  d3.select(this)
    .insert('rect', ':first-child')
    .attr('width', 45) // 宽度匹配Y轴实际占用宽度
    .attr('height', 400) // 高度匹配图表高度
    .attr('fill', '#fff')
    .attr('x', -10) // 微调位置覆盖Y轴左侧空白
})

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