我正在使用第三个库,它添加了“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
- 为什么 d3.mouse(this) 不能得到正确的值?
我的理解是 d3.mouse 应该根据容器 this ( svg ) 获取坐标。
- 我应该怎么做才能修复让父级保持新转换的行为?
谢谢。
更新:
不适用于 Firefox 46 for ubuntu
在 chrome 和 opera 中工作良好
最佳答案
如您所见,这是一个已知的 FireFox 错误。即使您确实修复了 FireFox,传播也需要一些时间,而且永远不会向后修复。所以您仍然需要解决方法。
你可以做的一件事——只要 SVG 的左上角始终位于其包含的 div 的 0,0 坐标(就像你的 jsFiddle 的情况一样)——替换对 d3.mouse 的调用(这个)
与:
d3.mouse(this.parentNode)
这将从 SVG 的父级获取鼠标坐标,这是一个普通的 div,因此显然它不受此错误的影响,并且会在所有平台上为您提供所需的值。
这不能解决根本问题(例如 getClientBoundingRect
仍会返回错误的值),但它可以解决您的特定问题。
关于javascript - 影响 d3.mouse 点的父 css 变换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37666242/