数据图悬停弹出

Question

我正在使用 datamaps 来显示世界各国，但图表居中。当我将鼠标悬停在一个国家/地区上时，弹出窗口一直出现在左侧，准确到如果我不将其居中，则该国家/地区的位置。我认为问题是 css:

#map {
    margin: 0px auto;
    width: 700px;
}

但我不知道如何以不同的方式居中。

有什么方法可以改变弹出窗口出现的位置吗？提前致谢！

（我尝试添加代码片段，但由于某种原因出现错误。）

Answer 1

悬停弹出窗口通过 datamaps-hoverover class 附加到 dom。默认情况下，d3 设置此位置：绝对位置，顶部和左侧属性根据鼠标所在的位置动态设置。由于位置是绝对的，因此将地图居中并不重要。

例如，我添加了您的 css（同时重命名 id 以匹配示例）：

#container1 {
  margin: 0px auto;
  width: 700px;
}  

以datamaps为例的jsbin here.

如您所见，即使地图居中，弹出窗口仍位于正确位置。

Answer 2

将位置更改为相对有效。正如 Eric Hoose 的示例所示，<div> 是相对的，因此悬停仍然有效。

#map {
    margin: 0px auto;
    width: 700px;
    position: relative;
}