i'm using third library adding 'transform: translate3d(200,0,0);' parent element. elements within svg tend move right. drag&drop events, setting origin enough, i'm having troubles corrected d3.mouse(this).
i have created jsfiddle of example: http://bl.ocks.org/hlucasfranca/f133da4493553963e710
jsfiddle: https://jsfiddle.net/rahpuser/5jp6123u/
so, when clicking without applying transform parent, ok, when parent has transform, d3.mouse returns wrong number
var coords = d3.mouse(this); coords[0] === 100; //true without transform.. coords[0] === 300; // true when transform parent applied. // values not precise can verify behavior in jsfiddle - why d3.mouse(this) not able correct value ?
my understanding d3.mouse should coords based on container ( svg ).
- what should fix behavior keeping parent new transform?
thanks.
update:
not working in firefox 46 ubuntu
working in chrome , opera
as you've discovered, known firefox bug. if did fix firefox, it's going take time propagate, , it'll never backwards-fixed. still need workaround.
one thing can — long svg's top-left @ 0,0 coordinate of containing div (as case jsfiddle) — replace call d3.mouse(this) with:
d3.mouse(this.parentnode) that'll mouse coordinate parent of svg, normal div, apparently it's not affected bug , value want on platforms.
this not address root problem (for example getclientboundingrect still return wrong values), works around specific problem.
