DEV Community

loading...

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

Collapse
crimsonmed profile image
Médéric Burlet • Edited

why not use a force graph? That would be the best way to do it no?

GitHub logo vasturiano / three-forcegraph

Force-directed graph as a ThreeJS 3d object

ThreeJS Force-Directed Graph

NPM package Build Size Dependencies

A ThreeJS WebGL class to represent a graph data structure in a 3-dimensional space using a force-directed iterative layout Uses either d3-force-3d or ngraph for the underlying physics engine.

Quick start

import ThreeForceGraph from 'three-forcegraph'

or

var ThreeForceGraph = require('three-forcegraph')

or even

<script src="//unpkg.com/three-forcegraph"></script>

then

var myGraph = new ThreeForceGraph()
    .graphData(<myData>);

var myScene = new THREE.Scene();
myScene.add(myGraph);

...

// on animation frame
myGraph.tickFrame();

API reference

Method Description Default
graphData([data]) Getter/setter for graph data structure (see below for syntax details). Can also be used to apply incremental updates. { nodes: [], links: [] }
jsonUrl([url]) URL of JSON file to load graph data directly from, as an alternative to specifying graphData directly.
numDimensions([int]) Getter/setter for number of dimensions to run the force simulation on (1, 2 or 3). 3
dagMode([str]) Apply layout constraints based on

For 2D you could use this:

GitHub logo vasturiano / force-graph

Force-directed graph rendered on HTML5 canvas

force-graph

NPM package Build Size Dependencies

Force-directed graph rendered on HTML5 canvas.

A web component to represent a graph data structure in a 2-dimensional canvas using a force-directed iterative layout Uses HTML5 canvas for rendering and d3-force for the underlying physics engine Supports canvas zooming/panning, node dragging and node/link hover/click interactions.

Check out the examples:

Collapse
pahund profile image
Patrick Hund Author

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?

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 😂