javascript D3 中的鼠标位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16770763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mouse position in D3
提问by I3i0
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 xis always equal to 0. By using console.log(), I can see that xvalue is getting changed just inside the function()but out of it xgot its initial value of 0.
但x始终等于0。通过使用console.log()，我可以看到x值在 内部发生了变化，function()但在外部x得到了它的初始值0。
How can I save the xvalue and use it later in my application?
如何保存该x值并稍后在我的应用程序中使用它？
回答by Sudarshan
You have to use an array. That will store xand ylike:
你必须使用一个数组。这将存储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
回答by user3603902
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] };
回答by duhaime
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
});
回答by Eric
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. Try putting your snippet directly into the console, move the mouse around and then type "x" into the console. You should see the latest x value.
除非您有超快的手，否则这将始终向控制台写入“0”，因为在您伸手去拿鼠标时整个脚本都会执行。尝试将您的代码片段直接放入控制台，四处移动鼠标，然后在控制台中键入“x”。您应该会看到最新的 x 值。
I hope this helps, but I may have misunderstood the question.
我希望这会有所帮助，但我可能误解了这个问题。
