pozycja Mouse w D3

Question

Chciałem tylko, aby uzyskać pozycji myszy za pomocą D3 za pomocą następującego kodu:

var x = 0; 

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

ale co ja zawsze x = 0 !. Używając console.log(), widzę, że wartość x zmienia się właśnie wewnątrz function(), ale poza nią x ma wartość początkową = 0.

Jak zapisać wartość x i użyć jej później w mojej aplikacji?

Answer 1

Musisz użyć tablicy. Że będzie przechowywać x i y jak:

var coordinates = [0, 0]; 
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 

Answer 2

Można zrozumieć kliknięcia i funkcji przeciągania przez ten przykład bardzo well.Hope to pomaga ..

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

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

Answer 3

podejrzewam cię może próbować coś takiego:

var x = 0; 

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

console.log(x); 

Jeśli nie masz superszybkich rąk, zawsze będzie to oznaczało "0" do konsoli, ponieważ cały skrypt wykonuje się, gdy sięgasz po mysz. Spróbuj wstawić swój fragment bezpośrednio do konsoli, porusz myszą i wpisz "x" do konsoli. Powinieneś zobaczyć ostatnią wartość x.

Mam nadzieję, że to pomoże, ale mogłem źle zrozumieć to pytanie.

Answer 4

V3:

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

V4:

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