60

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?

lambda
  • 3,295
  • 1
  • 26
  • 32
I3i0
  • 1,191
  • 2
  • 12
  • 25
  • 1
    Can you show the snippet in jsfiddle ? – Jashwant May 27 '13 at 10:05
  • 4
    I am at a loss as to how the marked answer resolves this issue. Could you please post a code snippet to elucidate? – musically_ut May 27 '13 at 14:21
  • 2
    They're doing the same thing as above (`d3.mouse(this)[0]`) but storing it in an array called `coordinates` first. In other words, `coordinates = [x,y] = d3.mouse(this)`. Does that help? – podcastfan88 May 14 '14 at 21:20
  • what difference could that possibly make? – anonymous Apr 05 '19 at 19:45
  • The question is not related to d3. That's how JS works when you receive the new value for x asynchronously (in a callback), you must handle it in that callback as well. You probably try handling it outside of it. – TPReal Apr 17 '19 at 13:01

6 Answers6

91

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
HankScorpio
  • 3,612
  • 15
  • 27
Sudarshan Tanwar
  • 3,537
  • 3
  • 24
  • 39
20

V3:

var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .on('mousemove', function() {
      console.log( d3.mouse(this) ) // log the mouse x,y position
    });

V4 and V5:

var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .on('mousemove', function() {
      console.log( d3.event.pageX, d3.event.pageY ) // log the mouse x,y position
    });
duhaime
  • 25,611
  • 17
  • 169
  • 224
16

You can understand the click and drag function through this example very well.Hope it will helps..

 var point = d3.mouse(this)
  , p = {x: point[0], y: point[1] };

http://jsfiddle.net/mdml/da37B/

user3603902
  • 193
  • 3
  • 11
15

As commented above by chkaiser and The Composer the approach is different in version 6;

var coordinates = d3.pointer(this);
var x = coordinates[0];
var y = coordinates[1];

var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .on('mousemove', (event) => {
      var coords = d3.pointer( event );
      console.log( coords[0], coords[1] ) // log the mouse x,y position
    });

Further details @ D3 v6 migration guide

feri
  • 161
  • 1
  • 3
1

I suspect you might be trying some like:

var x = 0;

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

console.log(x);

Unless you have super fast hands, this will always write "0" to the console because the whole script executes while you are reaching for the mouse. Try putting your snippet directly into the console, move the mouse around and then type "x" into the console. You should see the latest x value.

I hope this helps, but I may have misunderstood the question.

Eric
  • 31
  • 7
0

I believe this is the V6 way to do the same:

var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .on('mousemove', function(event) {
      let coords = d3.pointer(event);
      console.log( coords[0], coords[1] ) // log the mouse x,y position
    });

Note - this is only called out for clarity - it is already listed above in a comment.

devjc
  • 73
  • 8