Position de la souris dans D3

Question

Je voulais juste obtenir la position de la souris à l'aide D3 en utilisant le code suivant:

var x = 0; 

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

mais ce que je reçois toujours x = 0 !. En utilisant console.log(), je peux voir que la valeur x est changée juste à l'intérieur du function() mais en dehors de cela x a sa valeur d'initialisation = 0. Comment enregistrer la valeur x et l'utiliser plus tard dans mon application?

Answer 1

Vous devez utiliser un tableau. Cela x stocker et y comme:

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

Vous pouvez comprendre le clic et la fonction de glisser à travers cet exemple très well.Hope il aide ..

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

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

Answer 3

Je vous soupçonne peut-être essayer certains comme:

var x = 0; 

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

console.log(x); 

A moins que vous ayez des mains super rapides, cela écrira toujours "0" sur la console car tout le script s'exécute pendant que vous tirez la souris. Essayez de placer votre extrait directement dans la console, déplacez la souris et tapez "x" dans la console. Vous devriez voir la dernière valeur x.

J'espère que cela aide, mais j'ai peut-être mal compris la question.

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