Mousedown events in the plot area

plotly.js
1

I need to listen to mousedown events (not a full click) on the y-axis and perhaps the main plot area, but my events only trigger on the margins. How can I do this without killing the default Plotly interactions? In particular, can I detect mousedown on the y-axis but still keep the possibility of zooming by dragging the y-axis?

I should point to this related post, but it just confused me even more. (It made me think that mouseup needed to be put on document, but it works on the plot margins for me.)

I prepared a Codepen to play with.

2

Here’s a hacky way around the problem: https://codepen.io/etpinard/pen/eGbdqL?editors=0010

3

Oooo, that is very close to a solution for me! It works for the main plot area, but for some reason it doesn’t work for the y-axis (which is where I need it). It’s strange because they seem to be nearly identical sibling elements of the drag layer, so I can’t see why one would work but not the other. Maybe another event on the y-axis is stopping event propagation? Or is there another reason?

4

Here’s the complete list of drag nodes we currently use:

image

So to detect mouse down on the y-axis, you can use something like:

Plotly.d3.select('.nsdrag').on('mousedown', () =>)
5

What? I don’t get it … Your suggestion works, but I don’t understand why. Or rather, I don’t understand why your previous suggestion which put the listener on the .drag class didn’t also work on the y-axis. The y-axis also has class .drag (just like all nodes listed in that figure), so why do you need to write a more specific selector that targets .nsdrag?

In any case, thank you very much!

6 
Plotly.d3.selectAll('.drag').on('mousedown', () => {})

would also work.

7

Oh so that’s it, d3.select() works like querySelector()! It looked so much like jquery-style chaining that I implicitly assumed that it matched all nodes and not just the first matching node. Thank you again for your help and patience!

8

Is d3 still exposed in the latest versions of Plotly? It seems that direct access has been removed.