D3中的鼠标位置

时间:2013-05-27 10:04:01

标签: javascript d3.js

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

var x = 0;

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

x始终等于0。通过使用console.log(),我可以看到x内的function()值正在变更,但x 0的初始值为x。< / p>

如何保存{{1}}值并在我的应用程序中稍后使用?

6 个答案:

答案 0 :(得分:73)

您必须使用数组。这将存储xy,如:

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

答案 1 :(得分:14)

你可以很好地理解这个例子中的点击和拖动功能。希望它有帮助..

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

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

答案 2 :(得分:9)

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 :(得分:1)

我怀疑你可能会尝试一些:

var x = 0;

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

console.log(x);

除非你有超级快手,否则这总是会写出&#34; 0&#34;到达控制台,因为整个脚本在您到达鼠标时执行。尝试将您的代码段直接放入控制台,移动鼠标,然后键入&#34; x&#34;进入控制台。您应该看到最新的x值。

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

答案 4 :(得分:1)

abovechkaiserThe Composer评论说,该方法在版本6中有所不同;

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

更多详细信息@ D3 v6 migration guide

答案 5 :(得分:0)

我相信这是 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
    });

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