d3.mouse return incorrect position when browser zoomed. #668

frogcherry opened this Issue Jun 6, 2012 · 6 comments


None yet

4 participants


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:

<td width="35%" style="background-color: steelblue;">This is Left.</td>
<td><div id="container"></div></td>
var vis = d3.select("#container")

    .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]);
D3 member

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


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.


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

D3 member

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

D3 member

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

@mbostock mbostock closed this Apr 26, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment