d3.mouse return incorrect position when browser zoomed.

[frogcherry]

d3.mouse performs a little strange in mouse events. When the svg did not on the left of screen, if I use the zoom tool of browser, it can’t recognize the location of mouse correctly. It happens in IE9, chrome, safari, opera, only in firefox it works well.

I made a simple demo of that: http://walkpie.cnodejs.net/
You can review the demo and download the code in the demo page.

The core part of the demo:

<table>
<tr>
<td width="35%" style="background-color: steelblue;">This is Left.</td>
<td><div id="container"></div></td>
</tr>
</table>

var vis = d3.select("#container")
    .append("svg")
    .attr("width",600)
    .attr("height",400);

vis.append("rect")
    .attr("width",600)
    .attr("height", 400)
    .attr("style", "fill:none;stroke:red;");

var cl = vis.append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 5);

vis.on("mousemove", function(){
    var cp = d3.mouse(this);
    cl.attr("cx", cp[0])
      .attr("cy", cp[1]);
});

[mbostock]

Last time I looked, the bug is in browsers' implementation of getScreenCTM, and I'm not sure this is fixable in JavaScript.

[frogcherry]

Thanks a lot for your reply so fast! I've tried many times, but failed. I'm such a freshman in JavaScript. ><~
Btw, it works well in Firefox.

[vogievetsky]

See #766

[lyuata]

Is the issue supposed to be fixed in d3.v3 ? I am still experiencing the same problem under Chrome.

[mbostock]

No, this is a browser bug, and there is no explicit workaround in D3.

[mbostock]

As far as I can tell, this has been fixed in current browsers. However, it is related to d3/d3-selection#67.