有人可以告诉我这个问题。我需要获取鼠标指针位于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)

09-25 18:08