0

So I have the code to show an image on mouseover, as seen below. But at the moment, the image is appearing below the text and interfering with other elements on the page. I want to make the image appear diagonally to the right and above of the text. Is there a way to do this in 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)
    })

Here is an image of what it shows now: enter image description here It doesn't even have to move position. But just not be covered by the line chart. I just want it to cover it, or move position away from the line chart.

Thanks in advance, and let me know if you need more info about my code.

MOA
  • 349
  • 1
  • 16
  • I think you should be able to gain it just with CSS styles. Try "position: absolute" for the image, with "top: 0", "right: 0" and "z-index: 100". And define "position: relative" for the parent element. – Serhiy Jun 22 '19 at 12:58
  • The problem is the image is not defined in the html at all, it is just called with the mouseover function. – MOA Jun 22 '19 at 13:02
  • Got it. But you still should be able to add a class to it just after you called it. So, after you write ".attr(''height", 200), add ".attr("class", "class-name")" and define needed styles in this class. In the end, img will have needed styles just when you created it. – Serhiy Jun 22 '19 at 13:06

1 Answers1

1

Try something like that:

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");
});

And CSS:

.#uv {
  postion: relative;
}
.my-class {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}
Felipe Augusto
  • 7,733
  • 10
  • 39
  • 73
Serhiy
  • 359
  • 1
  • 7
  • That is a good idea! But unfortunately it didn't work. I've added an image of what it shows now so it's clearer. – MOA Jun 22 '19 at 13:14
  • yes, saw it. hard to tell without all code, but I think that you may fix it with right ordering. Read some comments here: https://stackoverflow.com/a/17385599/9958469 . Hope it will be helpful. – Serhiy Jun 22 '19 at 13:26
  • Actually, I figured it out, i just added `.style('margin-left', '80px') .style('margin-top', '-200px');` and it changes the position. Thanks though!! – MOA Jun 22 '19 at 13:46