Положение мыши в D3

Я просто хотел получить положение мыши, используя D3, используя следующий код:

var x = 0;

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

но x всегда равен 0. Используя console.log(), я вижу, что значение x изменяется только внутри function() но из него x получает свое начальное значение 0.

Как я могу сохранить значение x и использовать его позже в моем приложении?

Ответы

Ответ 1

Вы должны использовать массив. Это будет хранить x и y как:

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

Ответ 2

Вы очень хорошо понимаете функцию щелчка и перетаскивания в этом примере. Надеюсь, это поможет.

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

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

Ответ 3

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

Ответ 4

Я подозреваю, что вы можете попробовать что-то вроде:

var x = 0;

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

console.log(x);

Если у вас нет супер быстрых рук, это всегда будет записывать "0" на консоль, потому что весь script выполняется, пока вы достигаете мыши. Попробуйте поместить свой фрагмент непосредственно в консоль, передвиньте мышь и введите "x" в консоль. Вы должны увидеть последнее значение x.

Надеюсь, это поможет, но я, возможно, неправильно понял этот вопрос.