posizione del mouse in D3

Question

Volevo solo per ottenere la posizione del mouse utilizzando D3 utilizzando il seguente codice:

var x = 0; 

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

ma quello che ho sempre x = 0 !. Utilizzando console.log(), è possibile notare che il valore x viene modificato solo all'interno dello function() ma da esso x ha ottenuto il valore di inizializzazione = 0.

Come posso salvare il valore x e utilizzarlo più tardi nella mia applicazione?

Answer 1

È necessario utilizzare un array. Che memorizzerà x e y come:

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

Si può capire il clic e funzione di trascinamento attraverso questo esempio molto well.Hope si aiuta ..

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

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

Answer 3

te ho il sospetto potrebbe provare alcuni:

var x = 0; 

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

console.log(x); 

A meno che tu non abbia mani super veloci, questo scriverà sempre "0" alla console perché l'intero script viene eseguito mentre stai raggiungendo il mouse. Prova a inserire lo snippet direttamente nella console, sposta il mouse e digita "x" nella console. Dovresti vedere l'ultimo valore x.

Spero che questo aiuti, ma potrei aver frainteso la domanda.

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 
    });