Question

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

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('');
       });
});

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

d3.js带有mouseout和mouseover

1 个答案: