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.48k stars 803 forks source link

Render graph in multiple html div elements #631

Open PixDay opened 1 year ago

PixDay commented 1 year ago

It is possible to render the same graph in 4 differents HTML div?

The objectives is to render the graph 4 times to create an pyramidal hologram: image

vasturiano commented 1 year ago

@PixDay you could try cloning the data 4 times and passing each instance to its own 3d-force-graph component, each associated with a different div.

PixDay commented 1 year ago

@vasturiano I think I will have some issues since I'm using different forces and a lot of data, the 4 graphs will probably not have the exact same position for all their elements

Wouldn't it be possible to edit the source code, make it take an array of HTML elements, and loop over them while rendering the graph?

vasturiano commented 1 year ago

I have an alternative suggestion for this that just may work. If you have 4 separate DOM elements, each with its own 3dForceGraph instance, but with a shared data structure object (what you input via graphData) they should all remain in sync, even though they're separate elements.

One thing that you have to be careful however is to only have one force system active at any time, otherwise the effect of the forces will essentially quadruple and you'll start seeing strange motion artifacts.

To do that you can simply deactivate all the default forces in all but one of the instances. Something like this:

myGraphInstance
  .d3Force('link', null)
  .d3Force('charge', null)
  .d3Force('center', null);