javascript - 如何在鼠标悬停时定位图像 d3.js

Question

所以我有在鼠标悬停时显示图像的代码，如下所示。但目前，图像出现在文本下方并干扰页面上的其他元素。我想让图像对 Angular 地显示在文本的右侧和上方。有没有办法在 d3.js 中做到这一点？

d3.select('#uv')
    .on('mouseover', function onClick(d) {
        d3.select(this)
            .append('img')
            .attr("id", "img")
            .attr('src', "UV_Index.jpg")
            .attr("width", 400)
            .attr("height", 200)
    })

这是现在显示的图像: 它甚至不需要移动位置。但只是没有被折线图覆盖。我只是想让它覆盖它，或者将位置移离折线图。

提前致谢，如果您需要有关我的代码的更多信息，请告诉我。

Answer 1

尝试类似的事情:

d3.select("#uv").on("mouseover", function onClick(d) {
  d3.select(this)
    .append("img")
    .attr("id", "img")
    .attr("src", "UV_Index.jpg")
    .attr("width", 400)
    .attr("height", 200)
    .attr("class", "my-class");
});

和CSS:

.#uv {
  postion: relative;
}
.my-class {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}