Scale Transform on Body Tag breaking all D3.mouse coordinates

[LeeGDavis]

I working on an app that has a scale (webkit-transform) set on the body tag and it is throwing all the coordinates off provided by d3.mouse(container). I don't know if this is actually a problem with D3 or the with the browsers representation of clientX/Y or PageX/Y when using transform scale. In short I can't get accurate coordinates for dragging while this scaling is involved.

This is largely a repost of the issue I originally created at D3 google group. While this was resolved by using offset and doing the matrix transforms manually, I would like to use the mouse points to more easily manage boundaries within various viewports.

I have also created another test to showcase this behaviour. The larger you set the container holding the svg the more obvious the discrepancy.
http://jsbin.com/kuhiy/6/ or edit

Chrome: 33.0.1750.154 m
OS: Win 7X64
D3: 3.4.3

[mbostock]

It is my understanding that offsetX and offsetY are not consistently implemented across browsers, so I strongly suspect changing d3.mouse to use those would introduce more problems than would be fixed.

What’s really needed here is a standard method to convert points between coordinate systems. SVG supports this via getScreenCTM, but HTML does not, outside of WebKit’s methods:

• webkitConvertPointFromPageToNode
• webkitConvertPointFromNodeToPage

See https://www.w3.org/Bugs/Public/show_bug.cgi?id=20832 for more.

There is a JavaScript implementation of convertPointFromPageToNode here:

https://gist.github.com/Yaffle/1145197

However, you can see it’s quite involved. If this method is supported in additional browsers then I would be happy to use it within d3.mouse.

[LeeGDavis]

Thanks @mbostock ! Yeah that JS implementation is jumping though a lot of hoops. I have to agree with you, browser vendors need to implement a native solution. I'll pour over this one and see what other vendors have to say. I'll provide links to the other discussions as I open them up.

Thanks again for your insight on this one.

[Vladimirb87]

Found one hackish workaround for that. Example: http://jsfiddle.net/vladimirb87/dyhkbnLg/2/

[mbostock]

Merging into d3/d3-selection#67.