Updating React state prevents subsequent d3-drag touch events from firing on mobile

Help
#1

Hi there,
I’m making a simple app taking Curran’s Datavis 2020 - Episode 29 as starting point.

Here’s a minimal example on VizHub.

I’m using d3-drag abstraction on a globe world map to set the rotation of the map.
The rotation itself is saved as a React state (an array).

versorDrag.js contains the business logic that updates the rotation state. It uses versor dragging.
It works nicely on my desktop browsers, but not on mobiles.

After hooking up a console to my phone, I found that (this is my guess) the state update of the rotation prevents all touch events (except the first) from firing and also that the dragEnd function is not called at the end of a drag gesture.
If I comment out line 29 in versorDrag.js (the rotation state update), all touch events are fired.

I’m not sure why this happens.

How can I update the rotation without missing the touch events? Should I update the rotation state only after a drag gesture end (on mobile)?

Thanks for any help

1 Like
#2

Hey @marcocosta1618 not sure what’s going on there. But I want to say NICE WORK!! :clap: :clap: :clap:

@curran’s curses are great! And he might help you as well.

Best regards!

#3

Thanks @maion!

They are indeed, he’s a great teacher and his videos about d3 and React has helped me a lot.

1 Like
#4

The dragging + Versor sounds pretty tricky! Not sure how to help with the details there, but this example of a rotating globe might help:

https://blocks.roadtolarissa.com/curran/0bb64d8f56042e2480c908b0985f063b

#5

This question inspired me to port the old example into VizHub and upgrade it to the latest D3:

#6

Well it is, and admitedly I don’t understand all the math behind it, but (from the versor npm package readme):

it tracks the spherical coordinates of the point that is under the mouse, and applies a rotation to the globe that will move the initial point to the current mouse position. Computing that rotation involves quaternions.

It also prevents the globe being dragged in the ‘wrong’ direction if rotated upside-down.

Anyway your updated example has given me a couple of ideas which I need to try, thank you.

I’m still investigating, but I think that the issue may be caused by how d3 differentiates between mouse and touch gestures.