I was looking at the NYTimes interactive on state subsidies this morning and noticed that even when a state is obscured by a dot it is brought forward on hover.

For example the dot covering Massachusetts also partially covers New Hampshire, yet when you when you mouse into the covered part of New Hampshire, New Hampshire is brought forward.

How do you suppose they achieve this? The dots are in front of the state outlines based on their order in the DOM. I thought there might be a second set of state outlines on top of everything, listening for mouseovers that would trigger the underlying shape, but that doesn't seem to be the case.

I need to implement similar functionality in an application I'm working on and am curious about an elegant way with SVG elements.

Thanks.

I was looking at the NYTimes interactive on state subsidies this morning and noticed that even when a state is obscured by a dot it is brought forward on hover.

For example the dot covering Massachusetts also partially covers New Hampshire, yet when you when you mouse into the covered part of New Hampshire, New Hampshire is brought forward.

How do you suppose they achieve this? The dots are in front of the state outlines based on their order in the DOM. I thought there might be a second set of state outlines on top of everything, listening for mouseovers that would trigger the underlying shape, but that doesn't seem to be the case.

I need to implement similar functionality in an application I'm working on and am curious about an elegant way with SVG elements.

Thanks.

• javascript
• svg
• d3.js

Share Follow edited Dec 5, 2012 at 14:19 seliopou 2,9162222 silver badges1919 bronze badges asked Dec 4, 2012 at 15:07 Al R.Al R. 2,48044 gold badges3030 silver badges4040 bronze badges 3

• 3 This isn't as plicated as it may seem, just give your dots a css property of pointer-events: none;. This will stop the mouse knowing they exist, so you can hover over what is behind them – Andy Commented Dec 4, 2012 at 15:10
• Yes. Only thing is that IE doesn't support this css prop. Even IE9. stackoverflow./questions/5855135/… – meetamit Commented Dec 4, 2012 at 18:40
• @meetamit: pointer-events: none is supported on SVG elements in IE9. – methodofaction Commented Dec 4, 2012 at 21:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

As noted by Andy the circles in that NYT graphic have a CSS pointer-events property of none:

circle {
    pointer-events: none;
}

the bring to front behavior can be achieved in a the mouseover function using this method:

stateShape.on("mouseover",function(){this.parentNode.appendChild(this);})

Now you can just use the raise() method:

Example in a function:

highlightSite(site) {
        let selectedSite = d3.selectAll(`[siteName=${site}]`)
        selectedSite.raise()
        selectedSite
            .attr('stroke', 'black')
            .style('opacity', 1)
    }

Another technique is to ensure the element being hovered over is always the last element in the SVG therefore it will be to the front.

function onMouseEnter(e) {
  e.currentTarget.remove();
  document.querySelector('svg.map').appendChild(e.currentTarget);
}

with

svg.map path:hover {
  stroke: var(--dark);
  stroke-width: 2px;
  cursor: pointer;
}