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

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