d3.js PopUp-Fenster mit Mouseout und MouseOver

Question

Ich habe eine Popup-Funktion in einer GeoMap mit d3.js erstellt. Der folgende Teil der Codes zeigt den spezifischen Knoten als Kreis, wenn ich die Maus über den Kreis bewege, wird ein Popup-Fenster angezeigt.

g2.selectAll(".details") 
.data(d3.entries(json1)) 
.enter() 
.append("circle") 
.attr("r",0.5) 
.attr("transform",function(d) { return "translate("+ projection([ 
    d.value.lon, 
    d.value.lat 
]) + ')'; }) 
.attr("fill","white") 
.attr("stroke","steelblue") 
.on("mouseover", function(d) { 
    div.transition() 
     .duration(500) 
     .style("opacity", .9); 
    div .html(
     '<a href= "' + d.value.url + '">' + //with a link 
      d.value.name +"</a>" + "<br/>" + d.value.status) 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY - 30) + "px"); 
}) 

Wie Sie sehen arbeitet, die Mouseover Funktion. Aber wenn ich die Ansicht vergrößern oder die Karte ziehen, wird es einige Fehler wie diese existieren:

Sie können das Popup-Fenster immer sucht in der gleichen Position (ich glaube, der Grund dafür ist, dass die Lage ist spezifisch , nicht dynamisch ändern, wenn ich die Karte ziehe).

Nun frage ich mich, wie kann ich eine mouseout Funktionalität erstellen, um das Popup-Fenster zu entfernen, wenn ich die Maus außerhalb des Kreises (Knoten)?

Oder gibt es eine Möglichkeit, die Fehler in der mouseover Funktionalität zu beheben?

Danke für Ihre Hilfe.

Answer 1

So behandeln die mouseout Sie dies Ihre Kette nur hinzufügen:

.on("mouseout", function() { 
    div.transition() 
     .duration(500) 
     .style("opacity", 0) 
     .on('end', function() { 
      div.html(''); 
     }); 
}); 

Wie für das Popup in der richtigen Position angezeigt zu halten, wenn Sie ein- oder ziehen es schwierig ist, den besten Weg, zu wissen, zu handhaben das, ohne Ihren Code zu sehen, aber könnten Sie das Popup-div innerhalb der Auswahl setzen, die gezoomt/geschleppt wird, damit es automatisch aktualisiert? Alternativ müssten Sie Ihr Popup bei Ziehen/Zoomen neu positionieren - Sie müssten wahrscheinlich die Markerposition in Ihrer mouseover-Funktion speichern und dann die Koordinaten in den Zoom- und Ziehfunktionen nach Bedarf neu berechnen.