如何在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> 
    <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和其他元素，但是它對我來說不起作用。更容易驗證鼠標在哪裏。 請幫忙。

Answer 1

你可以用elementFromPoint來解決你的問題。首先，創建了鼠標的事件處理程序，然後使用x和y位置，以確定在鼠標是什麼元素：

d3.select("body").on("mouseover", function() { 
    var x = d3.event.pageX, y = d3.event.pageY, 
    elementMouseIsOver = document.elementFromPoint(x, y); 

    console.log(elementMouseIsOver); 
}); 

在這個小提琴，你可以看到的元素在控制檯中，當你將鼠標懸停在他們：http://jsfiddle.net/y9yj8kxq/。我希望這是你想要的。

如果您在我的示例中編寫了console.log(elementMouseIsOver.id)，它將記錄鼠標移到的HTML元素的ID。我相信你可以在調用之前比較這個ID和ID，檢查鼠標是否仍然在同一個元素上。看到這個小提琴：http://jsfiddle.net/43c1h3a0/。將鼠標懸停在元素上時，您可以在控制檯中看到該ID。

這裏是API：https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint

Answer 2

事實上，你試圖讓鼠標的位置沒有鼠標器*事件，它關係到這個問題（並且是不可能的）： How to get the mouse position without events (without moving the mouse)?

你的第一個跟蹤進入和離開每個細胞的解決方案更加可行。 有了這個解決方案，你可以跟蹤你是否在一個單元格上，以及哪一個。

然後在xhr回調中，檢查是否仍然在相同的位置，然後顯示彈出窗口。

你也可以試試這個：https://stackoverflow.com/a/4517215/2372765。 這裏的訣竅是添加一個全局事件偵聽器並全局跟蹤鼠標，並在每次移動時保存它的位置。 （可能會消耗更多的CPU）

Answer 3

謝謝大家的回覆。 我解決了這個問題。

方法如下。我添加了像'global'這樣的變量，名稱爲'isMouseOutOfTable'，它表示鼠標是否在tbody內或外面。此外，我添加的事件上

tbody.on('mouseleave', function(){tooltip.mouseOutOfTable(); tooltip.hideTooltip();}) 
cell.on('mouseenter', function(){tooltip.showTooltip(); tooltip.mouseWithinTable();}) 

所以，當鼠標離開TBODY的我們設置標誌作爲true和隱藏工具提示（並設置false如果鼠標電池）。 如果我們的請求隊列/響應，那麼我們檢查剛剛標誌

define([ 
    "d3", 
    "lodash", 
    "async", 

], function (d3, _, async) { 

var isMouseOutOfTable = true; 

async.queue(function (cell, callback) { 
    d3.xhr("/myurl", function (error, data) { 

    var data = _.merge(JSON.parse(data.response), cellDetails); 
    //processing data 
    tooltip.setData(data); 

    if(isMouseOutOfTable == false){ 
      toolTip.style("visibility", "visible"); 
    } else { 
      toolTip.style("visibility", "hidden"); 
    } 
    } 
} 

這塊代碼解決問題的時候鼠標離開桌子時的反應仍在處理的，你必須決定是否顯示工具提示與否，根據鼠標位置。