DEV Community

loading...

Discussion on: Drawing a Mind Map with Three.js and React

Collapse
crimsonmed profile image
Médéric Burlet

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.

GitHub logo vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs

react-force-graph

NPM package Dependencies

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, 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.

Check out the examples:





Thread Thread
pahund profile image
Patrick Hund Author

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…

Thread Thread
crimsonmed profile image
Médéric Burlet

Sure

Thread Thread
pahund profile image
Patrick Hund Author

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...

Thread Thread
crimsonmed profile image
Médéric Burlet

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!

Thread Thread
pahund profile image
Patrick Hund Author

Should have listened to your advice right away 😂