在野生动物园

时间:2016-11-30 11:27:04

标签: javascript d3.js webkit

我使用D3 v4来实现缩放功能,一切都在FireFox,Chrome浏览器上完美运行。

使用Safari浏览器的行为完全不同(我的版本为Version 10.0.1 (12602.2.14.0.7))。轮缩放适用于g元素,不适用于svg元素。注意:dbClick缩放适用于svg元素。

我创建了简单的fiddle example,试图重现这个问题。 如果您尝试使用red rect进行滚轮缩放 - 它将在rect之外工作 - 不起作用,但适用于其他浏览器。

我一直在寻找像https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f这样的官方例子,其中一切正常,我找不到我的例子的问题......

以下是缩放工作区域(疯狂是左侧,svg中的顶部区域具有工作缩放):wheel_zoom_working_zones

1 个答案:

答案 0 :(得分:0)

我从mbostock得到答案:

<强>问题:

https://jsfiddle.net/vbabenko/5shshq97/7/所示,这是Safari bug(或者,如果您愿意,可以是对规范的替代解释)。当指针下没有SVG内容时,Safari不会将轮事件分派给SVG;事件被发送到SVG元素下面的任何内容(本例中为正文)。相比之下,其他浏览器将轮事件分派到其边界矩形内的任何位置的SVG元素。

<强> SOLUTION:

如果您希望SVG在所有浏览器上接收事件,您必须在SVG中放置一些内容以捕获滚轮事件。这是一个固定的测试用例:https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d

原始讨论:

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