D3.js zoom在Safari瀏覽器中無法使用鼠標滾輪

Question

我使用D3 v4來實現縮放功能，並且所有功能都可以在FireFox，Chrome瀏覽器上完美顯示。

與Safari瀏覽器（我的版本是Version 10.0.1 (12602.2.14.0.7)）有很大的不同行爲。 Wheel zoom適用於g元素，不適用於svg元素。注意：dbClick縮放適用於svg元素。

我創建了簡單的fiddle example試圖重現問題。 如果您嘗試使用輪廓縮放red rect - 它將在rect之外生效 - 不起作用，但適用於其他瀏覽器。

我一直在尋找像https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f這裏一切正常，我找不到我的例子有問題官員的例子...

這裏是一個區域，其中變焦作品（瘋狂的是，在SVG左側和頂部區域有工作變焦）：

Answer 1

我得到的答案從mbostock：

問題：如圖

https://jsfiddle.net/vbabenko/5shshq97/7/，這是Safari bug（或者如果你喜歡，對規範的另一種解釋）。當指針下沒有SVG內容時，Safari不會將輪子事件發送到SVG;事件被髮送到SVG元素下面的任何東西（本例中爲body）。相比之下，其他瀏覽器會將輪子事件派發到邊界矩形內的任何位置的SVG元素。

SOLUTION：

如果你想在SVG接收所有的瀏覽器的情況下，你必須把在SVG部分內容以捕捉輪事件。這裏是一個固定的測試用例：https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d

ORIGINAL討論：

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