Mouse position in D3

Question

I just wanted to get the mouse position using D3 by using the following code:

var x = 0;  svg.on('mousemove', function () {    x = d3.mouse(this)[0];          }); 

but x is always equal to 0. By using console.log(), I can see that x value is getting changed just inside the function() but out of it x got its initial value of 0.

How can I save the x value and use it later in my application?

Answer 1

You have to use an array. That will store x and y like:

var coordinates= d3.mouse(this); var x = coordinates[0]; var y = coordinates[1];  // D3 v4 var x = d3.event.pageX - document.getElementById(<id-of-your-svg>).getBoundingClientRect().x + 10 var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10