父 css 变换影响 d3.mouse 点

Question

我正在使用将 'transform: translate3d(200,0,0);' 添加到父元素的第三个库。所以 svg 中的元素倾向于向右移动。对于拖放事件，设置原点就足够了，但我无法更正 d3.mouse(this).

我已经创建了这个例子的 jsfiddle：http://bl.ocks.org/hlucasfranca/f133da4493553963e710

jsFiddle: https://jsfiddle.net/rahpuser/5jp6123u/

因此，在不对父级应用变换的情况下单击时，一切正常，但是当父级具有变换时，d3.mouse returns 一个错误的数字

var coords = d3.mouse(this);
coords[0] === 100; //true without transform..
coords[0] === 300; // true when the transform to the parent is applied.
// the values are not precise but you can verify the behavior in the jsfiddle

为什么 d3.mouse(this) 不能得到正确的值？

我的理解是 d3.mouse 应该根据容器 this ( svg ) 获取坐标。

我应该怎么做才能修复让父级保持新转换的行为？

谢谢。

更新：

在 ubuntu

的 Firefox 46 中不工作

在chrome和歌剧

中表现出色

Answer 1

如您所见，这是一个已知的 FireFox 错误。即使您确实修复了 FireFox，传播也需要一些时间，而且永远不会向后修复。所以你仍然需要一个解决方法。

您可以做的一件事——只要 SVG 的左上角始终位于其包含 div 的 0,0 坐标（就像您的 jsFiddle 一样）——替换对d3.mouse(this) 与：

d3.mouse(this.parentNode)

这将从 SVG 的父级获取鼠标坐标，这是正常的 div，因此显然它不受此错误的影响，并且会在所有平台上为您提供所需的值。

这不能解决根本问题（例如 getClientBoundingRect 仍然会 return 错误的值），但它可以解决您的特定问题。

父 css 变换影响 d3.mouse 点

Parent css transform affecting d3.mouse points

javascript

svg

transform

mouseevent

d3.js