D3中的鼠标位置

Question

我只想使用以下代码使用D3获取鼠标位置:

var x = 0;

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

但我总是得到x = 0!通过使用x,我可以看到0值正在内部改变,console.log()但是x它的启动值= 0.

如何保存该function()值并在以后的应用程序中使用它？

Answer 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

Answer 2

你可以通过这个例子很好地理解点击和拖动功能.希望它会有所帮助..

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

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

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

Answer 4

如评论以上由chkaiser和作曲家的方法是在版本6不同;

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

var svg = d3.select('body').append('svg')
    .attr('width', 600)
    .attr('height', 600)
    .on('mousemove', (event) => {
      var coords = d3.pointer( event );
      console.log( coords[0], coords[1] ) // log the mouse x,y position
    });

更多细节@ D3 v6 迁移指南