SafariのD3.jsズームがマウスホイールと連携していません

Question

ズーム機能を実現するためにD3 v4を使用しています.FireFoxのChromeブラウザではすべて機能します。

Safariブラウザとはまったく異なる動作（私のバージョンはVersion 10.0.1 (12602.2.14.0.7)です）。ホイールズームはg要素で機能し、svg要素では機能しません。注：svg要素の場合、dbClickズームが機能します。

私は簡単な問題を再現しようとしましたfiddle exampleを作成しました。 red rectでホイールをズームしようとすると、rectの外で動作しますが、他のブラウザでも機能します。

私はすべての作品と私は私の例の問題を見つけることができませんでした https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0fのような公式の例を探していた

...ここ

はズーム作品ゾーンである（狂気はSVGでその左と上のゾーンです作業しているズーム）：

Answer 1

私はmbostockから答えを得た：

は

問題：

に示すように、 https://jsfiddle.net/vbabenko/5shshq97/7/、これはSafari bugです（ご希望の場合は、仕様の代替解釈）。 Safariは、ポインタの下にSVGコンテンツがない場合、SVGにホイールイベントをディスパッチしません。イベントはSVG要素（この場合はボディ）の下にあるものに送信されます。対照的に、他のブラウザは、その境界矩形内のどこにでもSVG要素にホイールイベントを送出します。

SOLUTION：あなたはSVGはすべてのブラウザでイベントを受信したい場合は

、あなたがホイールイベントをキャプチャするSVGにいくつかのコンテンツを置く必要があります。ここで、固定テストケースである：https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d

ORIGINAL考察：

https://github.com/d3/d3/issues/3035