search

vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.63k stars 817 forks source link

rotate not available when the 3D graph is inside a html tab/div container #627

Closed PatrickF-mbse closed 1 year ago

PatrickF-mbse commented 1 year ago

Hi,

I am trying to create a webpage with various tab and generate a graph per tab. I pasted the basic example code inside an html tab as below and the graph is appearing on the page. I can select nodes and drag them, I can zoom using the mouse scroll but the rotate and pan are not working. I was wondering if anybody had an idea why? not sure to look for a fix on the html side or look on the 3d graph code.

(Note: when I open the same script without extra html tabs (level 2 div) , the rotate function work fine.

image

vasturiano commented 1 year ago

@PatrickF-mbse if you're still having this issue, could you make a simplified reproduceable example on https://codesandbox.io/ so that we can have a closer look?

PatrickF-mbse commented 1 year ago

Hi

Thank you for the follow up. I am using node so I am not sure how I can create a simpler demo and put it online (just an amateur webapp development learning).

I am rendering html page with 3D force graph inside and when the user click on a button on the client side, it send a "get file" to the server , then the server send the html file to the client UI with a graph to be displayed in a tab. I am sending 3 graphs going to 3 tabs.

After a few days searching online, I could not find a solution to the mouse problem and found a work around as I noticed that when I selected a tab before the "get file" , the mouse was working in this specific tab only. Must be an html/node js thing I think...maybe not a good practice to send many file at the same time.

Workaround is to select a tab, then reload the page then click the "get file" command. I will need to find a better way later to display 3 graphs at the same time.

Anyway thank you for the follow up.

PatrickF-mbse commented 1 year ago

I am using a workaround for now ( manual reload of the page).