2

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.

shilpanb
  • 155
  • 3
  • 10

2 Answers2

2

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.

shilpanb
  • 155
  • 3
  • 10
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

Biovisualize
  • 2,455
  • 21
  • 20
  • If using this method with data generated and updated elements you may need to use the second argument of the data function to bind DOM elements to particular pieces of data otherwise you can get unexpected behaviour when you next change your data. docs : https://github.com/mbostock/d3/wiki/Selections#data – Tom P Jan 09 '15 at 11:33
  • There is a problem with this approach. If there are any listeners for `click` or `double click` events of that SVG node than WebKit browsers currently stop firing these events while FireFox browser continues. https://stackoverflow.com/questions/37921993/chrome-doesnt-fire-click-event-for-svg-element-firefox-does – Konard May 10 '19 at 18:29