react-force-graph icon indicating copy to clipboard operation
react-force-graph copied to clipboard

Q: Group nodes by label

Open csansz opened this issue 4 years ago • 3 comments

Hi!

Is it possible to group nodes on the screen by labels?

For example all of the nodes with label X located in the top right corner, nodes with label Y are in the middle and so on.. The location of the nodes is not important, only the grouping is necessary for me. I don't know if it's solvable or if there's any option to do that.

My graph has circles so I cannot use DAG mode.

Thank you for your answer.

csansz avatar Nov 23 '21 08:11 csansz

@csansz jumping in here. Pretty sure the library has no built-in ways to lay out nodes in clusters. You can set the node coordinates whichever way you want by updating each node'sfx, fy or x, y props. One solution would be to use a layout library to compute force layouts for each label separately, and then arrange each label cluster a different place on the canvas.

JonThom avatar Nov 23 '21 09:11 JonThom

In addition to what @JonThom mentioned, you can also try using a clustering force plugin to help you with some of the layout computation, like d3-force-cluster: https://github.com/ericsoco/d3-force-cluster or the 3D counterpart: https://github.com/vasturiano/d3-force-cluster-3d

vasturiano avatar Nov 23 '21 20:11 vasturiano

@csansz jumping in here. Pretty sure the library has no built-in ways to lay out nodes in clusters. You can set the node coordinates whichever way you want by updating each node'sfx, fy or x, y props. One solution would be to use a layout library to compute force layouts for each label separately, and then arrange each label cluster a different place on the canvas.

Are you suggesting to use a different library altogether, or a different layout algorithm from another library?

duhmojo avatar Dec 22 '21 17:12 duhmojo