d3.js 带有鼠标悬停和鼠标悬停的弹出窗口

Question

我使用 d3.js 在 GeoMap 中创建了弹出功能。以下部分代码将特定节点显示为一个圆圈，当我将鼠标移到圆圈上时，它将显示一个弹出窗口。

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

如您所见，鼠标悬停功能正在发挥作用。但是当我放大或拖动地图时，它会存在一些这样的错误：

你可以看到弹出窗口总是在同一个位置（我相信原因是位置是特定的，当我拖动地图时不会动态改变）。

现在，我想知道，如何创建 mouseout 功能，以便在我将鼠标放在圆圈（节点）外时删除弹出窗口？

或者有什么方法可以修复鼠标悬停功能中的错误？

感谢您的帮助。

Answer 1

要处理mouseout，您只需将其添加到您的链中：

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

至于在缩放或拖动时保持弹出窗口显示在正确位置，如果不查看代码，很难知道处理此问题的最佳方法，但您能否将弹出窗口 div 放置在缩放/拖动的选择中让它自动更新？或者，您需要在拖动/缩放时重新定位弹出窗口 - 您可能必须将标记位置保存在 mouseover 函数中，然后根据需要使用它重新计算缩放和拖动函数中的坐标。