D3 中的鼠标位置答案

【问题标题】：Mouse position in D3D3 中的鼠标位置
【发布时间】：2013-05-22 04:01:39
【问题描述】：

我只是想通过以下代码使用 D3 获取鼠标位置：

var x = 0;

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

但x 始终等于0。通过使用console.log()，我可以看到x 的值在function() 内部发生了变化，但其中x 的初始值是0。

如何保存x 值并稍后在我的应用程序中使用它？

【问题讨论】：

你能在 jsfiddle 中显示 sn-p 吗？
我不知道标记的答案如何解决这个问题。能否发个代码sn-p来说明一下？
他们正在做与上面相同的事情 (d3.mouse(this)[0])，但首先将其存储在一个名为 coordinates 的数组中。换句话说，coordinates = [x,y] = d3.mouse(this)。这有帮助吗？
这可能会产生什么影响？
问题与d3无关。这就是当您异步（在回调中）接收 x 的新值时 JS 的工作方式，您也必须在该回调中处理它。你可能会尝试在它之外处理它。

标签： javascript d3.js

【解决方案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

【讨论】：

在 d3 版本 6 中，您需要调用 d3.pointer 而不是 d3.mouse。
澄清一点你需要调用 d3.pointer(event) 而不是 d3.mouse(this)
具体来说，您需要d3.pointer(event)，其中event 是鼠标移动回调的第一个参数。

【解决方案2】：

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

【讨论】：

【解决方案3】：

通过这个例子你可以很好的理解点击和拖动的功能，希望对你有帮助..

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

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

【讨论】：

脚本中的语法错误。最新的firefox，小提琴甚至没有启动。

【解决方案4】：

正如 above chkaiser 和 The Composer 所评论的那样，版本 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 migration guide

【讨论】：

【解决方案5】：

我怀疑你可能会尝试一些类似的东西：

var x = 0;

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

console.log(x);

除非您的手超级快，否则这将始终将“0”写入控制台，因为整个脚本会在您伸手去拿鼠标时执行。尝试将您的 sn-p 直接放入控制台，移动鼠标，然后在控制台中键入“x”。您应该会看到最新的 x 值。

我希望这会有所帮助，但我可能误解了这个问题。

【讨论】：

【解决方案6】：

我相信这是 V6 的做法：

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

注意 - 这只是为了清楚起见 - 它已经在上面的评论中列出。

【讨论】：