CODEWITHSUNDEEP
javascriptd3.jspopup
Otto
Otto

Reputation: 49

d3.js PopUp window with mouseout and mouseover

I have created a Popup functionality in a GeoMap by using d3.js. The following part of codes shows the specific node as a circle when I move mouse over the circle, it will be shown a Popup window.

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

As you can see, the mouseover function is working. But when I zoom in or drag the map, it will exist some bugs like this:

failure

You can see the Popup window always locates in the same position(I believe the reason is that the location is specific, not dynamically change when I drag the map).

Now, I am wondering, how can I create a mouseout functionality, in order to remove the Popup window when I put the mouse outside the circle(node)?

Or is there some way to fix the bugs in the mouseover functionality?

Thanks for your help.

Upvotes: 0

Views: 1983

Answers (1)

Emma Lewis
Emma Lewis

Reputation: 402

To handle the mouseout you can just add this to your chain:

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

As for keeping the popup displayed in the correct position when you're zooming or dragging it's difficult to know the best way to handle this without seeing your code, but could you place the popup div inside the selection that is zoomed/dragged so that it automatically updates? Alternatively you'd need to reposition your popup on drag/zoom - you'd probably have to save the marker position in your mouseover function and then use that to recalculate the coordinates in the zoom and drag functions as necessary.

Upvotes: 1

Related Questions