I have a scatter plot graph of document filings over time.
I have a tooltip box that pops up on mouseover of the data points, that provides text data. I would like to include an image in each tooltip box.
The data is drawn from a .csv file that includes a number of fields such as DocName, FilingDate, DocNumber, etc.
The images are each saved in an "Images" folder as DocNumber.jpg.
I was trying to cobble together a piece of code that would pick up the DocNumber from the csv file and create the correct html tag to make the image show up....
So far all I've managed to get is a "placeholder" .
Can someone tell me what I've done wrong?
The code for the mouseover is below:
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.CCode + " " +d.DocNumber + "<br>"
+d.DocName + "<br>"
+ "Filing Date =" + formatTime(d.FilingDate) + "<br>"
+ "Status=" + d.Status + "<br>"
+ '"<img src=/Images/"'+d.DocNumber+'".jpeg>"')
.style("left", (d3.event.pageX +10) + "px")
.style("top", (d3.event.pageY -28) + "px");
})
Description
Remove the single quotes around image tag and also before and after d.DocNumber. Following is the modified code snippet you my apply this.
Code
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(d.CCode + " " + d.DocNumber + "<br>"
+ d.DocName + "<br>"
+ "Filing Date =" + formatTime(d.FilingDate) + "<br>"
+ "Status=" + d.Status + "<br>"
+ "<img src=/Images/" + d.DocNumber + ".jpeg>")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 28) + "px");
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments