Accepted answer

Basically you need to take care of the translate when you click.

So I created a variable :

var translateVar = [0,0];

When you pan update this variable :

translateVar[0] = d3.event.translate[0];
translateVar[1] = d3.event.translate[1];

And add this to your coordinates of the circle :

.attr('cx', mouseCoords[0] - translateVar[0] )
.attr('cy', mouseCoords[1] - translateVar[1])

Updated fiddle :

You also need to take care of the scale so do a similar thing :

var scaleVar = 1;

Update variable on zoom :

scaleVar = d3.event.scale

New coordinates :

.attr('cx', (mouseCoords[0] - translateVar[0]) /scaleVar )
.attr('cy', (mouseCoords[1] - translateVar[1]) /scaleVar )

Final fiddle :

Related Query

More Query from same tag