有人可以告诉我这个问题。我需要获取鼠标指针位于d3.xhr
请求处理末尾的html元素。这个d3.xhr
应该在队列中调用:async.queue
define([
"d3",
"lodash",
"async",
], function (d3, _, async) {
var html = d3.select("html");
async.queue(function (cell, callback) {
d3.xhr("/myurl", function (error, data) {
var data = _.merge(JSON.parse(data.response), cellDetails);
//processing data
console.log(d3.mouse(html)); //this line fails
}
}
控制台中出现的错误
Uncaught TypeError: Cannot read property 'sourceEvent' of null
k @ d3.v3.min.js:1
aa.mouse @ d3.v3.min.js:3
(anonymous function) @ myJSfile.js:77
(anonymous function) @ d3.v3.min.js:1
t @ d3.v3.min.js:1
u @ d3.v3.min.js:1
通常,任务是正确隐藏工具提示,因为现在它不会每次消失。在更多细节。
我们有一张桌子:
<table>
<tr>
<td class="fav">Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td class="fav">Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td class="fav">Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
<div class="tooltip" style="visibility:hidden"></div>
我们应该能够导航到表中的单元格,当mouseenter进入单元格,然后js在异步队列中通过d3.xhr发送请求。结果,如果鼠标仍在同一单元格上,我们必须在工具提示中显示响应。需要进行此验证是因为请求/响应会花费一些时间,并且用户可能会导航到另一个单元格甚至超出表格边界。在这种情况下,我们应该隐藏工具提示。
我试图在表上添加事件,例如'mouseenter','mouseleave',页面上的html和其他元素,但是对我来说这行不通。易于验证鼠标在何处。
请帮忙。
最佳答案
实际上,您试图在没有mouse- *事件的情况下获取鼠标位置,这与以下问题有关(并且不可能):
How to get the mouse position without events (without moving the mouse)?
您第一个跟踪进入和离开每个单元格的解决方案更可行。
使用此解决方案,您可以跟踪您是否在一个单元格上以及哪个单元格上。
然后在xhr回调中,检查您是否仍然位于同一位置,然后显示弹出窗口。
您也可以尝试以下方法:https://stackoverflow.com/a/4517215/2372765。
这里的技巧是添加一个全局事件侦听器并全局跟踪鼠标,并在每次移动时保存其位置。 (也许会消耗更多的CPU)