如何将图像放在mouseover d3.js上

Question

所以我有代码在鼠标悬停时显示图像，如下所示。但是此刻，图像出现在文本下方，并且干扰了页面上的其他元素。我想使图像对角线显示在文本的右侧和上方。 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;
}