D3のパン/ズーム動作がモバイルSafariで機能しない

Question

iPhoneでは、D3のパン/ズーム動作がうまく機能しません。この問題を確認するには、iPhoneでこのページにアクセスしてください：http://bl.ocks.org/mbostock/3892919

パンすると、ブラウザウィンドウ全体がドラッグされる傾向があります。ズームすると、D3要素がピンチイベントを捕捉するのではなく、iPhone自体がページ上をズームすることがよくあります。

私はD3 v3.5.17を使用しています。これはiPhoneのChromeと同様、モバイルSafariでも発生します（ただし、Safariのままです）。

さらに調査すると、<rect>および<circle>などの特定のSVG要素は、適切にタッチイベントをキャッチし、D3を介してそれらを指示し、モバイルブラウザがそれらに応答しないように見えます。他のSVG要素（<svg>や<g>など）は、タッチイベントを無視してブラウザに表示されます。

私はtouchmoveハンドラをSVG要素に貼り付け、そしてevent.preventDefault()を使用して、ブラウザのイベント引き継ぎを試みました。それは動作しません。

d3.behavior.zoom()...が返す関数をコンテナSVGとは異なる要素から呼び出すことを試みました。それも機能しません。

iOSブラウザのタッチイベント（ドラッグ＆ピンチ）に対して、SVG全体が適切に反応するようにするにはどうすればよいですか？

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> 

EDIT：さらに良い解決策が<div>のような伝統的なHTML要素にクリックハンドラを添付することです

最終結果はこのようなものです。 SVG全体を含む<div>に貼り付けられていて、それは完全に機能します - ハッキーな目に見えない<rect>が必要です。