Javascript 影响d3.0鼠标点的父css变换
我使用的第三个库添加了“transform:translate3d(200,0,0);”添加到父元素。因此svg中的元素倾向于向右移动。对于拖放事件,设置原点就足够了,但是我很难纠正d3.mouse(这个) 我创建了这个示例的一个JSFIDLE: jsFiddle: 因此,当单击而不将变换应用于父对象时,一切正常,但当父对象进行变换时,d3.mouse返回错误的数字Javascript 影响d3.0鼠标点的父css变换,javascript,d3.js,svg,mouseevent,transform,Javascript,D3.js,Svg,Mouseevent,Transform,我使用的第三个库添加了“transform:translate3d(200,0,0);”添加到父元素。因此svg中的元素倾向于向右移动。对于拖放事件,设置原点就足够了,但是我很难纠正d3.mouse(这个) 我创建了这个示例的一个JSFIDLE: jsFiddle: 因此,当单击而不将变换应用于父对象时,一切正常,但当父对象进行变换时,d3.mouse返回错误的数字 var coords = d3.mouse(this); coords[0] === 100; //true without tr
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
正如您所发现的,这是一个已知的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转换由第三个库应用,可能我们要去掉这个库,这样就可以完成这项工作了。谢谢