Interactive images

<!DOCTYPE html>
<head>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <title>SVG image try!</title>
</head>

<body>    
<script>
// C. Igathi 
// Worked on 8/14/2019
// Loading and erasing images based on mouse actions    
    
var width = 1000,
height = 1000;

var fruitData = [ 
    { "x": 050, "y": 250, "r": "30", "color": "yellow", "fruit": "Banana", "image": "Banana.png", "id": "ban"},
    { "x": 200, "y": 250, "r": "30", "color": "purple", "fruit": "Grape", "image": "Grape.jpg", "id": "gra" },
    { "x": 350, "y": 250, "r": "30", "color": "red",    "fruit": "Apple", "image": "Apple.jpg", "id": "app" }
];

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

labels
    .attr("x",function(d) { return (d.x - 30); })
    .attr("y",function(d) { return (d.y + 60); })
    .text(function(d) { return d.fruit; })
    .attr("font-family","sans-serif")
    .attr("font-size",25)
    .style("fill", "blue");
    
// Mouse events
d3.selectAll("circle")
    .on("mouseover", function(d) {
    redraw(d.image); 
    });

d3.selectAll("circle")
    .on("mouseout", eraseRedraw); 
       
    
// ----------------------------------    
function redraw(cc) {
    svg.append("svg:image")
       .attr("xlink:href", cc)
       .attr("width", 350)
       .attr("height", 200);
}    
    
function eraseRedraw() { // a white rectange was drawn over the images
 svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 350+5)
    .attr("height", 200+5)
    .style("fill", "white");
//   .attr("stroke-width", 1)                        
//   .attr("stroke", "black")
}
// ----------------------------------    
       
</script>
</body>

https://d3js.org/d3.v4.min.js