title: Zooming in on a map with elements in d3
body: <p>I have a zoomable map of the world with a single point on it (in reality there are multiple points from a separate resource but I have simplified it). <a href="http://bl.ocks.org/whatsthebeef/6518269" rel="nofollow">The block is here.</a></p>
  
  <p>When I try and zoom in it jumps to a certain scale and then usually doesn't allow any more zooming movements. I have experimented with various different values for the <code>transition</code>, <code>scale</code> and <code>scaleExtent</code> taken from <a href="http://bl.ocks.org/mbostock/2206340" rel="nofollow">this example</a> and <a href="http://wahrendorf.de/circlemapping/world_question.html" rel="nofollow">this one</a> (with the latter being very close to what I want overall) but nothing has worked. It seems to get quite close to the actual size at <code>height/6</code> for minimum zoom but still behaves badly. </p>
  
  <p>I suspect the main problem is with <code>scaleExtent</code>. I actually want the minimum zoom to be the size of the map and so it isn't possible to pan around unless zoomed in.</p>
  
  <p>The other problem is, as you can see in the bl.ock that the circle disappears when you zoom. I want the circle to maintain position and size (so it <strong>doesn't</strong> get bigger when I zoom).  </p>
  
  <p>Can any one help with</p>
  
  <ul>
  <li>The zoom problem on the map, so the map minimum zoom is the actual size map and I can zoom in to about 6x that</li>
  <li>Preventing the map from panning unless zoomed in</li>
  <li>Maintaining the size and position of the circle on the map </li>
  </ul>