javascript - 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