SVG elements overlapping issue

Question

I am currently working on a visualization using d3.js. Please have a look here. (It's a dropbox link you might have to allow it to load.)

I have created a function where every overlapping element increases in size on hovering over a dot on the map.

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.

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.

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.

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.

Answer 1

The solution ultimately was to append the SVG elements on mouseover. This stacks the element at the very top of the SVG canvas and remove them on mouseout. There are currently no z-index alternatives to SVG elements.

Answer 2

You can do it by grabbing the DOM node directly and placing it to the top:

this.parentNode.appendChild(this);

Here is an example: http://bl.ocks.org/1197731