带有d3-zoom的D3 SVG无法在移动设备上垂直滚动

Question

我有一个启用了SVG的d3图d3-zoom。简而言之，我已配置缩放以允许用户在x轴（仅x轴）上平移（并且仅平移）：

const zoom = d3.zoom()
  .scaleExtent([1, 1]) // scale 1x to 1x (no zooming)
  .translateExtent([[
      xExtent,
      0
  ], [
      // Bottom right extent: [center of last age, graph height]
     rightExtent,
      graphHeight
  ]])
  .on('zoom', this.zoom)
  .on('start', this.zoomStart)
  .on('end', this.zoomEnd)
  
svg.call(zoom)
  .on('wheel.zoom', null);

到目前为止，这种方法一直有效，并且允许用户在移动设备和台式设备上绕X轴平移。

问题是，在iOS和Android上，触摸图形以向下滚动页面时，页面将保留在原处-滚动事件被某种方式拦截d3-zoom。

我在d3-zoom文档中查看了所有内容，除了以下语句外，没有找到任何内容："If the user tries to zoom by wheeling when already at the corresponding limit of the scale extent, the wheel events will be ignored and not initiate a zoom gesture. This allows the user to scroll down past a zoomable area after zooming in, or to scroll up after zooming out."。我的问题是，在移动设备上滚动图表时仍然存在问题。

我还搜索了SO并发现了这个问题，但部分答案与我所需的答案不完全：D3滚动时禁用平移和缩放

如何在SVG上使用缩放功能，同时还可以在移动设备上滚动？如果需要，我愿意完全禁用SVG上的“垂直”平移（如果使用d3可以做到），我只需要能够滚动页面，同时在X轴上左右平移。

使用可复制示例进行更新：

我相信在d3-zoom和平移的任何情况下都会发生这种情况。这是一个带有可编辑代码的非常简单的示例：https : //observablehq.com/@d3/zoom

如果您在移动设备（例如iPhone Safari）上打开示例，则一旦看到该图，您将看到，除非您设法在d3无效的页面边缘滚动，否则无法通过触摸向下滚动页面。

让我知道是否可以提供更多说明。