弹出Datamaps悬停

Question

我使用数据表显示世界各国，但以图形为中心。当我在一个国家上空盘旋时，弹出会一直出现在左边，准确到如果我不把它放在中心的话这个国家会在哪里。我相信问题是css：

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

但我不知道怎么用另一种方式来集中注意力。

有办法改变弹出的位置吗？提前感谢！

​

​

(我试图添加一个代码片段，但由于某种原因导致了错误。)

Answer 1

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

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

Answer 2

悬停弹出通过datamaps-hoverover类附加到dom。默认情况下，d3设置这个位置:绝对值，并根据鼠标所在位置动态设置顶部和左侧属性。因为这个位置是绝对的，所以你把地图放在中心不重要。

例如，我添加了css (同时重命名id以匹配示例)：

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

作为一个示例，这里到数据as使用的jsbin。

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