D3平移/縮放行爲在移動Safari上不起作用

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

的解決方案竟然是哈克，但簡單：被添加到母體<svg>和由D3變焦事件改變了<g>元素旁邊，我追加一個<rect>元素，並確保它接收相同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> 

編輯：一個更好的解決方法是單擊處理程序連接到像<div>傳統的HTML元素。我將它附加到包含整個SVG的<div>，並且它完美地工作 - 不需要hacky隱形<rect>。