How to put a mouseover interaction on hold when a click function is triggered

43 views
Skip to first unread message

louis daumard

unread,
Sep 1, 2017, 4:10:23 AM9/1/17
to d3-js
I'm trying to get this graph fully working (see the jsfiddle link below).

https://jsfiddle.net/u72o6670/1/

As you can see, the graph is working just fine as long as you are hovering over the legend but gets messy as soon as you click on a brand name.

The problem: the mouseover/mouseout interactions are overlapping the click interactions.

I don't know how to put on hold (to freeze) specific mouseover/mouseout interactions when, and as long as, a click function is triggered.

For example, in this graph:

- A polygonal shape is displayed when it's corresponding name is hovered over in the legend. I'd like to undo this behavior as long as a button in the legend is selected (clicked).

- All the percentages are displayed as well on mouseover. I'd like to undo this behavior as long as a button in the legend is selected (clicked).

- All the polygonal shapes appear on mouseout. I'd like to undo this behavior as long as a button in the legend is selected (clicked).


Also, (regarding the toggle function):

- The grid disappears as soon as a button is unclicked. I'd like to have the grid displayed as long as one of the button at least in the legend is selected (clicked).

It's been two weeks i'm on this graph now, i'm literally begging for help. If anyone has an idea how to fix these interactions...

sandeep edara

unread,
Sep 1, 2017, 6:58:41 AM9/1/17
to d3-js
Hi Louis,

From what I understand the thing which you need is 
if the legend is active you dont want the mouseover / mouseout events to work.


Please check this fiddle and let me know if my understanding is correct.

Regards,
Sandeep.
Message has been deleted

louis daumard

unread,
Sep 1, 2017, 11:21:30 AM9/1/17
to d3-js
Hi Sandeep,

This is exactly what I was looking for... I don't know how to thank you ! This is great.

Could you please explain me what's the logic behind your code ? Especially this line: 

if(!d3.selectAll(".active").empty()) {return;} 


Thanks to your suggestion, I've finally managed to keep the gridCircle displayed as long as a button is selected in the legend. (Even though i still don't fully grasp the logic behind this line of code)

d3.selectAll(".gridCircle")
    .transition()
    .ease(d3.easePoly)
    .delay(function (d,i) {return i * 60})
    .duration(600)
    .attr("r", function(d,i) {if (!d3.selectAll(".active").empty()) {return innerRadius + (radius /cfg.levels * d)} else {return 0}});


Many thanks to you, Sir. I'm really grateful for your help.

sandeep edara

unread,
Sep 1, 2017, 12:32:40 PM9/1/17
to d3-js
Hi Louis,

On click of legend I am toggling the class "active" based on variable active. Line no: 526.

if(!d3.selectAll(".active").empty()) {
                return;
                }

this snippet of code is checking if there is any "active" legend. i.e. if any legend is active we are returning the mouseover function.

Regards,
Sandeep.

louis daumard

unread,
Sep 1, 2017, 6:10:20 PM9/1/17
to d3-js
I see ! That's really neat.

Many thanks to you. It's a great relieve to finally see that graph completed and fully working.

Yours respectfully,

Louis
Reply all
Reply to author
Forward
0 new messages