javascript - 影响 d3.mouse 点的父 css 变换

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 返回一个错误的数字

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

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

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

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

谢谢。

更新:

不适用于 Firefox 46 for ubuntu

在 chrome 和 opera 中工作良好

Answer 1

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

你可以做的一件事——只要 SVG 的左上角始终位于其包含的 div 的 0,0 坐标(就像你的 jsFiddle 的情况一样)——替换对 d3.mouse 的调用(这个) 与:

d3.mouse(this.parentNode)

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

这不能解决根本问题(例如 getClientBoundingRect 仍会返回错误的值)，但它可以解决您的特定问题。