Stop Zooming Of Bubbles In D3 World Map

I am currently working on a D3 world map in which I have brought in a zoom functionality up-to the boundary level of any country or county based on its click. I have Added Bubbles

Solution 1:

You are scaling the entire g element, this effectively zooms the map. Everything will increase in size; however, for the map lines you have adjusted the stroke to reflect the change in g scale factor:

 g.transition()
      .duration(750)
      .style("stroke-width", 1/ scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");

To keep the circles the same size, you have to do the same adjustment for your circles by modifying the r attribute for each circle according to the g scale factor:

   g.selectAll(".city-circle")
     .transition()
     .attr("r", 5 / scale )
     .duration(750);

Though, since you don't actually apply the class city-circle on your circles you'll need to do that too when you append them:

.attr("class","city-circle")

And, just as you reset the stroke width on reset, you need to reset the circles' r :

  g.selectAll(".city-circle")
     .transition()
     .attr("r", 5)
     .duration(750);

Together that gives us this.