数据地图悬停弹出

Question

我正在使用datamaps来显示世界各国，但图表居中。当我将鼠标悬停在某个国家/地区时，弹出窗口一直显示在左侧，如果我没有居中，则会准确显示该国家的位置。我相信问题是css：

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

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

有没有办法改变弹出窗口的位置？提前谢谢！

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

Answer 1

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

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

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

以数据地图使用的jsbin为例here。

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

Answer 2

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

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