react-force-graph How can react-force-graph work with material UI components

Hi Vasturiano and friends here.

I'm a big fan of 3D-force-graph. Recently we have a trial project using React, however I found the codes is very differnt using 3D-force-graph and react-force-graph.

For example we have a auto complete search component in material UI . It returns a node 'id', but how we can use this id to hide the links and nodes which is not connecting to it? I know how to do it in 3D force-graph, but no idea on react-force-graph. I've checked all of the demos and answers here...

Would you please advise or better can provide an example code? Thank you！

Mar 18 '22 07:03 gzboy007

@gzboy007 thanks for reaching out.

This seems like functionality similar to the highlight nodes/links example. You can check the code here, perhaps the pattern will help: https://github.com/vasturiano/react-force-graph/blob/master/example/highlight/index.html

Essentially you'll want to use useState hooks to persist the state of your focus nodeId, and then make your other node/link props depend on it.

Mar 18 '22 11:03 vasturiano

Thanks Vasturiano. I checked this before but couldn't understand. Let me checked it again or reach out to you if I still have questions.

Mar 18 '22 14:03 gzboy007

Hi Vasturiano, by using useState, I can switch the graph by using another filter component. It's something like... function Graph({graphJson}) { const [data, setData] = useState(); fetch...setData(graphJson) return( ... '<ForceGraph3DgraphData={data}>' ) }

The question is how can we keep the graph unchange, when we click another filter component so I can hide some nodes and links? Change the state here will cause the component re-render. For example if the "{data}" change, the graph will be re-render. Or passing the state to nodeVisibility like nodeVisibility={visibleNodes}, the graph won't be re-heated? Would you please kindly advise? Thanks~

By the way, I have almost use 3D-force-graph for almost 1 year. It's really an amazing library!

Mar 24 '22 17:03 gzboy007

@Vasturiano, I've figured out how to do it, Thanks.

Mar 25 '22 11:03 gzboy007