[Solved]-display images on mouseover for each slice-d3.js

Is this what you're looking for?

Code Plunkr with mouseover resolving images (with href) as a pattern

Source for the sample images: https://developers.google.com/speed/webp/gallery

Snapshot of your data:

{
    "str_lab": "A",
    "num": 100,
    "image": 'https://www.gstatic.com/webp/gallery3/2.png'
},

I had to rearrange a lot of svg elements ( especially the defs and the center circle). Do remember that it's always recommended to append defs with filters and patterns to the SVG and not the <g> element within it AND if you do, make sure the corresponding elements are transformed accordingly.

Here are some relevant changes in your code:

var pattern = defs.append('pattern')
 .attr('id', 'image')
 .attr('patternUnits', 'userSpaceOnUse')
 .attr('width', 300)
 .attr('height', 300);

var image = pattern.append('image').attr('x', 0).attr('y', 0).attr('width', 124)
.attr('height', 124);

Center circle on mouseover calls the pattern image set by d.data.image:

    d3.select('pattern image')
        .attr('xlink:href', d.data.image);
    svg.select('circle.image')
        .attr('fill','url(#image)')

Hope this helps and let me know if you have any questions. :)