Thanks for the reply! I'll take a look at it. I don't think it can render React components as nodes of the graph, or can it? Ultimately, what I'm planning is that each node of the mind map/graph will be a social media post (text, picture, video, comment, etc.). Do you think I could pull that off with this library?
Hey I don't think each node can be a react component as that will be pretty heavy. There is a react wrapper for the library mentioned. We use it to visualize a whole computer folder / file system.
If you update the datalist the graph will update dynamically with animations if wanted.
I think a mind map based off post would have much less posts than a whole filesysten.
This module exports 4 React components with identical interfaces: ForceGraph2D, ForceGraph3D, ForceGraphVR and ForceGraphAR. Each can be used to represent a graph data structure in a 2 or 3-dimensional space using a force-directed iterative layout.
For dependency convenience, all of the components are also available as stand-alone packages: react-force-graph-2d, react-force-graph-3d, react-force-graph-vr and react-force-graph-ar.
Uses canvas/WebGL for rendering and d3-force-3d for the underlying physics engine
Supports zooming/panning, node dragging and node/link hover/click interactions.
The tip to use the force-graph library was gold, I'm now using it in the latest version of my project. Check it out: dev.to/pahund/drawing-a-mind-map-w...
Glad it helped! Looking forward to seeing more of the projects and if I have any tips I'll make sure to comment! That's what I love about IT all sharing ideas and tips to make projects better!
Thanks for the reply! I'll take a look at it. I don't think it can render React components as nodes of the graph, or can it? Ultimately, what I'm planning is that each node of the mind map/graph will be a social media post (text, picture, video, comment, etc.). Do you think I could pull that off with this library?
Hey I don't think each node can be a react component as that will be pretty heavy. There is a react wrapper for the library mentioned. We use it to visualize a whole computer folder / file system.
If you update the datalist the graph will update dynamically with animations if wanted.
I think a mind map based off post would have much less posts than a whole filesysten.
For the react one here is the one we used.
React component for 2D, 3D, VR and AR force directed graphs
react-force-graph
React bindings for the force-graph suite of components: force-graph (2D HTML Canvas), 3d-force-graph (ThreeJS/WebGL), 3d-force-graph-vr (A-Frame) and 3d-force-graph-ar (AR.js).
This module exports 4 React components with identical interfaces:
ForceGraph2D,ForceGraph3D,ForceGraphVRandForceGraphAR. Each can be used to represent a graph data structure in a 2 or 3-dimensional space using a force-directed iterative layout.For dependency convenience, all of the components are also available as stand-alone packages:
react-force-graph-2d,react-force-graph-3d,react-force-graph-vrandreact-force-graph-ar.Uses canvas/WebGL for rendering and d3-force-3d for the underlying physics engine Supports zooming/panning, node dragging and node/link hover/click interactions.
Check out the examples:
I'm definitely curious how quickly I will run into performance issues with my mind map with React components as sprite textures. We'll see…
Sure
The tip to use the force-graph library was gold, I'm now using it in the latest version of my project. Check it out: dev.to/pahund/drawing-a-mind-map-w...
Glad it helped! Looking forward to seeing more of the projects and if I have any tips I'll make sure to comment! That's what I love about IT all sharing ideas and tips to make projects better!
Should have listened to your advice right away 😂