Wie bekomme ich ein Element an der Mausposition innerhalb der d3.xhr und der asynchronen Warteschlange?

Question

Kann mir jemand mit dem Problem beraten. Ich muss HTML-Element, auf dem Mauszeiger befindet sich am Ende der d3.xhr Anfrage Verarbeitung erhalten. Und diese d3.xhr sollten Anrufe innerhalb Warteschlange: 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 
    } 
} 

Der Fehler, die

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 

in der Konsole erscheint allgemeine Aufgabe ist es verbirgt Tooltip richtig, denn jetzt ist es nicht jedes Mal verschwinden. In mehr Details. Wir haben eine Tabelle:

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

Wir sollten auf die Zelle in der Tabelle navigieren können, wenn MouseEnter- auf Zelle dann js Anfrage über d3.xhr innerhalb Asynchron-Warteschlange sendet. Als Ergebnis müssen wir die Antwort im Tooltip anzeigen, wenn sich die Maus immer noch in derselben Zelle befindet. Diese Überprüfung ist erforderlich, da die Anforderung/Antwort einige Zeit in Anspruch nimmt und der Benutzer zu einer anderen Zelle navigieren oder sogar die Tabellengrenzen verlassen kann. In diesem Fall sollten wir den Tooltip ausblenden.

Ich habe versucht, Ereignis wie 'mouseenter', 'mouseleave' auf dem Tisch, HTML und andere Elemente auf der Seite hinzuzufügen, aber es funktioniert nicht ok für mich. Einfacher zu überprüfen, wo sich die Maus befindet. Bitte helfen.

Answer 1

Sie können Ihr Problem mit elementFromPoint lösen. Zunächst wird ein Event-Handler für die Maus erstellen und dann x und y-Position verwenden, um zu bestimmen, über welches Element der Maus:

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

    console.log(elementMouseIsOver); 
}); 

In dieser Geige, können Sie die Elemente in der Konsole sehen, wenn Sie über sie schweben : http://jsfiddle.net/y9yj8kxq/. Ich hoffe, dass du das willst.

Wenn Sie in meinem Beispiel console.log(elementMouseIsOver.id) schreiben, wird die ID des HTML-Elements protokolliert, über dem die Maus steht. Ich glaube, dass Sie diese ID mit der ID vor dem Anruf vergleichen können, um zu überprüfen, ob sich die Maus immer noch über dem gleichen Element befindet. Siehe diese Geige: http://jsfiddle.net/43c1h3a0/. Sie können die ID in der Konsole sehen, wenn Sie den Mauszeiger über die Elemente bewegen. Hier

ist die API: https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint

Answer 2

In der Tat, Sie versuchen, Mausposition zu erhalten, ohne eine Maus- * Veranstaltung ist es auf diese Frage im Zusammenhang (und ist nicht möglich): How to get the mouse position without events (without moving the mouse)?

Ihre erste Lösung für die Verfolgung von Ein- und Ausreisen in jede Zelle ist praktikabler. Mit dieser Lösung können Sie verfolgen, ob Sie sich in einer Zelle befinden und welche.

Dann in der Xhr Callback, überprüfen Sie, ob Sie immer noch auf dem gleichen sind und dann Popup anzeigen.

Sie könnten dies auch versuchen: https://stackoverflow.com/a/4517215/2372765. Der Trick besteht darin, einen globalen Ereignis-Listener hinzuzufügen und die Maus global zu verfolgen und ihre Position bei jeder Bewegung zu speichern. (vielleicht mehr CPU verbrauchen)

Answer 3

Vielen Dank für die Antwort. Ich habe das Problem gelöst.

Der Weg folgt. Ich fügte Flag wie "globale" Variable hinzu, benannte 'isMouseOutOfTable', die anzeigt, ob Maus innerhalb tbody oder out ist.Ich habe auch Event auf

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

Also, wenn die Maus aus tbody ist setzen wir Flagge als true und verstecken Tooltip (und setzen false wenn die Maus auf Zelle). Wenn wir eine Warteschlange der Anfrage haben/Antwort dann überprüfen wir gerade Flagge

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"); 
    } 
    } 
} 

Dieses Stück Code lösen Problem, wenn die Maus aus Tabelle ist, wenn Antworten noch verarbeitet und Sie müssen entscheiden, ob Tooltip zeigen oder nicht, entsprechend der Mausposition.