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.66k stars 821 forks source link

Arrange groups of nodes as intersecting rings #462

Open nathanturczan opened 3 years ago

nathanturczan commented 3 years ago

Using this CodePen for example:

https://codepen.io/nathanturczan/pen/OJWrRXj

I would like to arrange all of the Bart nodes in a ring, all of the Lisa nodes in a ring, and all of the Skinner nodes in a ring. Some nodes have connections to nodes in other groups, but I would like to maintain the rings' basic circular shape. The rings can be on different 2d axes, but it's important to my use case to show the groupings in this way.

vasturiano commented 3 years ago

@nathanturczan you could perhaps try to achieve that with forceRadial.

You can have 3 different forceRadial added to the system, one for each group, with its own center and radius. You can make each force applicable to only the nodes of its given group by setting the strength to 0 if the node doesn't belong in that group.

nathanturczan commented 3 years ago

@vasturiano thank you for your response, this approach seems promising!

I'm not entirely sure how I would go about using the forceRadial functionality of d3-force-3d in the context of this project that's built with your 3d-force-graph component.

Do you suggest I re-build the project using only d3-force-3d?

nathanturczan commented 3 years ago

Ah, I see now that d3-force-3d is part of 3d-force-graph's underlying physics engine, so I'm sure I will be able to use forceRadial in the context of 3d-force-graph. Thank you again!

RaulPROP commented 3 years ago

I think that the way to do it is like this, but I'm not sure as I have not added custom forces before.

@vasturiano Could you add an example importing custom forces?

vasturiano commented 3 years ago

@RaulPROP there are some in the nodes collision example: https://github.com/vasturiano/3d-force-graph/blob/master/example/collision-detection/index.html#L35-L47

The way you've added it in your codepen looks right though. In addition, if you want to arrange them like circles on a plain, perhaps you can fix the Z dimension with fz attributes on the nodes.

A different approach to the whole case could also be using clustering forces, using d3-force-cluster-3d.