javascript - 如何获取 d3.xhr 和异步队列中鼠标位置上的元素？

Question

有人可以建议我解决这个问题吗？我需要在 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 :

<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>

我们应该能够导航到表格中的单元格，当鼠标在单元格上输入时，js 通过异步队列中的 d3.xhr 发送请求。因此，如果鼠标仍然位于同一单元格上，我们必须在工具提示中显示响应。需要进行此验证，因为请求/响应需要一些时间，并且用户可能导航到另一个单元格，甚至超出表格边界。在这种情况下，我们应该隐藏工具提示。

我尝试在表格上添加“mouseenter”、“mouseleave”等事件，在页面上添加 html 和其他元素，但它对我来说不起作用。更容易验证鼠标所在的位置。请帮忙。

Answer 1

事实上，您正在尝试在没有 mouse-* 事件的情况下获取鼠标位置，它与此问题相关(并且不可能): How to get the mouse position without events (without moving the mouse)?

您的第一个跟踪每个单元的进入和离开的解决方案更加可行。通过此解决方案，您可以跟踪您是否位于某个单元格以及哪个单元格上。

然后在 xhr 回调中，检查您是否仍在同一位置，然后显示弹出窗口。

您也可以尝试这个:https://stackoverflow.com/a/4517215/2372765 。这里的技巧是添加一个全局事件监听器并全局跟踪鼠标，并在每次移动时保存其位置。 (可能会消耗更多的CPU)