javascript - d3 click coordinates are relative to page not svg - how to translate them (Chrome error) -


when event in play, d3.event.x gives position of x coordinate of mouse click, relative entire html doc. tried using jquery's $('svg').position() actual position of svg return blatantly fallacious values.

is there easy way find position of svg relative page overlooking? using chrome, way, in case jquery problem obscure browser error.

edit: checked in firefox , $('svg').position() returns correct coordinates. ?!?

instead of using d3.event, browser's native event, use d3.mouse coordinates relative container. example:

var svg = d3.select("body").append("svg")     .attr("width", 960)     .attr("height", 500);  var rect = svg.append("rect")     .attr("width", "100%")     .attr("height", "100%")     .on("mousemove", mousemove);  function mousemove(d, i) {   console.log(d3.mouse(this)); } 

Comments