[英]Mouse position in D3
I just wanted to get the mouse position using D3 by using the following code:我只想通过使用以下代码使用 D3 获取鼠标位置:
var x = 0;
svg.on('mousemove', function () {
x = d3.mouse(this)[0];
});
but x
is always equal to 0
.但x
总是等于0
。 By using console.log()
, I can see that x
value is getting changed just inside the function()
but out of it x
got its initial value of 0
.通过使用console.log()
,我可以看到x
值在function()
内部发生了变化,但是x
的初始值是0
。
How can I save the x
value and use it later in my application?如何保存x
值并稍后在我的应用程序中使用它?
You have to use an array.你必须使用一个数组。 That will store x
and y
like:这将存储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
V3: 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 and V5: 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
});
You can understand the click and drag function through this example very well.Hope it will helps..你可以通过这个例子很好地理解点击和拖动功能。希望它会有所帮助。
var point = d3.mouse(this)
, p = {x: point[0], y: point[1] };
http://jsfiddle.net/mdml/da37B/ http://jsfiddle.net/mdml/da37B/
As commented above by chkaiser and The Composer the approach is different in version 6;正如上面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
});
Further details @ D3 v6 migration guide更多细节@ D3 v6 迁移指南
I suspect you might be trying some like:我怀疑您可能正在尝试以下操作:
var x = 0;
svg.on('mousemove', function () {
x = d3.mouse(this)[0];
});
console.log(x);
Unless you have super fast hands, this will always write "0" to the console because the whole script executes while you are reaching for the mouse.除非您有超快的手,否则这将始终向控制台写入“0”,因为在您伸手去拿鼠标时整个脚本都会执行。 Try putting your snippet directly into the console, move the mouse around and then type "x" into the console.尝试将您的代码片段直接放入控制台,移动鼠标,然后在控制台中键入“x”。 You should see the latest x value.您应该会看到最新的 x 值。
I hope this helps, but I may have misunderstood the question.我希望这会有所帮助,但我可能误解了这个问题。
I believe this is the V6 way to do the same:我相信这是 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
});
Note - this is only called out for clarity - it is already listed above in a comment.注意 - 这只是为了清楚起见 - 它已经在上面的评论中列出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.