Position de la souris dans D3

Je voulais juste obtenir la position de la souris en utilisant D3 en utilisant le code suivant:

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

Mais ce que j'ai toujours x = 0 !. En utilisant console.log() , je peux voir que la valeur x est changée juste à l'intérieur de la function() mais hors de elle x obtenu sa valeur initiale = 0.

Comment puis-je enregistrer la valeur x et l'utiliser plus tard dans ma demande?

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

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

Vous pouvez comprendre le clic et la fonction de glisser à travers cet exemple très bien. Entendre, cela aidera …

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

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

Je soupçonne que vous pourriez essayer certains comme:

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

À moins que vous ayez des mains superbes, cela écrira toujours "0" sur la console car tout le script s'exécute lorsque vous atteignez la souris. Essayez de mettre votre extrait directement dans la console, déplacez la souris autour, puis tapez "x" dans la console. Vous devriez voir la dernière valeur x.

J'espère que ça aide, mais j'ai mal compris la question.

Vous pouvez ajouter l' mousemove événements mousemove lorsque vous créez votre élément svg:

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