web-dev-qa-db-fra.com

Position de la souris en 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 je reçois toujours x = 0! . En utilisant console.log(), je peux voir que la valeur x est modifiée juste à l'intérieur de la function() mais que x a sa valeur initiale = 0.

Comment puis-je enregistrer la valeur x et l'utiliser ultérieurement dans mon application?

javascriptd3.js
42
I3i0

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

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
71
Sudarshan

Vous pouvez très bien comprendre la fonction cliquer-glisser à travers cet exemple.Espoir que cela vous aidera ..

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

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

14
user3603902

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

Je suppose que vous essayez peut-être des choses comme:

var x = 0;

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

console.log(x);

Sauf si vous avez les mains très rapides, cela écrit toujours "0" sur la console car tout le script s’exécute pendant que vous attrapez la souris. Essayez de placer votre extrait directement dans la console, déplacez la souris puis 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.

0
Eric