Accepted answer

Is this what you're looking for?

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

Source for the sample images:

Snapshot of your data:

    "str_lab": "A",
    "num": 100,
    "image": ''

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'pattern image')

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

Related Query

More Query from same tag