Javascript 影响d3.0鼠标点的父css变换

我使用的第三个库添加了“transform:translate3d（200,0,0）；”添加到父元素。因此svg中的元素倾向于向右移动。对于拖放事件，设置原点就足够了，但是我很难纠正d3.mouse（这个）

我创建了这个示例的一个JSFIDLE：

jsFiddle：

因此，当单击而不将变换应用于父对象时，一切正常，但当父对象进行变换时，d3.mouse返回错误的数字

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（此）无法获得正确的值 我的理解是d3.mouse应该获得基于容器this（svg）的坐标

我应该做些什么来修复将父对象保留在新转换中的行为

谢谢

更新：

不适用于ubuntu的Firefox46

---

正如您所发现的，这是一个已知的FireFox bug，在chrome和opera中运行良好。即使你修复了FireFox，它也需要一些时间来传播，而且它永远不会被反向修复。所以你仍然需要一个解决办法

只要SVG的左上角始终位于其包含div的0,0坐标处（就像您的JSFIDLE一样），您可以做的一件事就是将对

d3.mouse（this）

的调用替换为：

d3.mouse(this.parentNode)

这将从SVG的父级（这是一个普通div）获取鼠标坐标，因此显然它不受此bug的影响，并将在所有平台上获得所需的值

---

这并不能解决根本问题（例如，

getClientBoundingRect

仍然会返回错误的值），但它可以解决您的特定问题。

我使用Opera，一切看起来都正常。没有错误。也许是你的浏览器？很有意思，让我试试，我会更新这个问题。只需添加更多信息：这在Chrome（v50.0）中对我来说是正确的，但正如你所描述的，在Firefox（v46.0）中会中断。@Klaujesi是的，你说得对，我在firefox 46.0.1 for ubuntu中肯定遇到了问题。你可以下载源代码并修复它，如果我们不在svg元素上应用任何转换，它肯定会解决问题。您认为是否还有其他解决方案允许我们转换到svg元素？如果将来不受这种条件的约束，那就太好了。@rahpuser您可以应用svg转换（通过属性）而不是csstransforms@RobertLongsoncss转换由第三个库应用，可能我们要去掉这个库，这样就可以完成这项工作了。谢谢