Question

在iPhone上，D3的平移/缩放行为效果不佳。要查看问题，请在iPhone上访问此页面：http://bl.ocks.org/mbostock/3892919

当您平移时，整个浏览器窗口都会被拖动。当你缩放时，iPhone本身通常会放大页面，而不是D3元素捕捉捏事件。

我正在使用D3 v3.5.17。这种情况发生在移动版Safari和iPhone上的Chrome上（但我们都知道它仍然只是Safari）。

在进一步调查中，似乎某些SVG元素（例如<rect>和<circle>）将正确捕获触摸事件，将其引导至D3，并阻止移动浏览器对其进行响应。其他SVG元素（例如<svg>和<g>）将忽略触摸事件，它们将冒泡到浏览器。

我尝试将touchmove处理程序附加到SVG元素，并使用event.preventDefault()尝试阻止浏览器接管事件。这不起作用。

我尝试从容器SVG以外的不同元素调用d3.behavior.zoom()...返回的函数。这也行不通。

如何让整个SVG在iOS浏览器上正确响应触摸事件（拖拽和捏合）？

Answer 1

解决方案结果是hacky，但很简单：除了<g>元素附加到父<svg>并由D3缩放事件转换后，我追加<rect> element并确保它收到与scale(...)元素相同的<g>转换值。这样做的结果是我的SVG后面有一个隐形矩形，可以毫无困难地捕获移动Safari触摸事件。

最终结果如下：

<svg>
  <rect fill="transparent" x="0" y="0" width="3000" height="1000" transform="scale(0.8)"></rect>
  <g transform="translate(900,38) scale(0.8)">
    <!-- My SVG drawing/chart/whatever -->
  </g>
</svg>

编辑：更好的解决方案是将点击处理程序附加到传统的HTML元素，如<div>。我将它附加到包含整个SVG的<div>并且它完美无缺 - 不需要任何不可见的<rect>。

D3平移/缩放行为不适用于移动版Safari

1 个答案: