javascript - 数据图悬停弹出

Question

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

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

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

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

（我试图添加一个代码片段，但由于某种原因它出现了错误。）

Answer 1

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

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

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

以 datamaps 使用的jsbin为例。

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

Answer 2

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

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