title: SVG elements overlapping issue
body: <p>I am currently working on a visualization using d3.js. Please have a look <a href="https://dl.dropbox.com/u/11916346/map/europe.html" rel="nofollow">here</a>. (It's a dropbox link you might have to allow it to load.)</p>
  
  <p>I have created a function where every overlapping element increases in size on hovering over a dot on the map.</p>
  
  <p>Please try the following use-case:
  1. Click on U.S to zoom into the country.
  2. Drag and Pan to New York and hover the mouse pointer over the dot.</p>
  
  <p>If everything goes well you should see a huge circle with multiple concentric circles embedded inside it. They are all overlapping elements at that particular co-ordinate.</p>
  
  <p>The issue that I am facing is that when the SVG elements increase in size, there are dots of other cities overlapping on top of the concentric circles. </p>
  
  <p>My question is: how do I make the circles, I am hovering my mouse over, come on top of the SVG canvas so that no such dots are visible.</p>