CODEWITHSUNDEEP
javascriptd3.js
Jammer
Jammer

Reputation: 10208

Mouseover Hiding Stacked Elements From Mouse (HitTesting)

I'm having a little trouble working out if this is even possible with D3 let alone how to do it.

I have a rect elements that I have attached 3 event handlers to ("click", "Mouseover", "mouseout"). This is all working great the only trouble is that I also add a text element to the the same <g> that is placed on top of the rect element. like this:

<g>
    <rect x="204" y="204" width="204" height="204" style="fill: yellow; pointer-events: all; fill-opacity: 0.402592;" stroke="none" stroke-width="0" stroke-dasharray="15,15,15">
    <text class="word" x="306" y="306" text-anchor="middle" fill="black" style="fill-opacity: 1.00648;">Text Element</text>
</g>

The problem I'm seeing is that the mouseout event is fired when the mouse is still over the rect but the text element is immediately below the mouse and basically "inbetween" the mouse and the rect below the text.

Is there any way to make the text "invisible" to the mouse?

I guess if we were talking WinForms/WPF the analgulous feature I'm looking for in D3 is something along the lines of IsHitTestable=false.

Upvotes: 0

Views: 59

Answers (1)

Jammer
Jammer

Reputation: 10208

Typical isn't it ... just as I ask the question the solution presents itself.

In order to hide stacked elements from mouse events add this style declaration:

    .style("pointer-events", "none")

Upvotes: 0

Related Questions