Note quite what I'm aiming at, but I think I can make this work for me.ĭev.to user crimsonmed pointed me to an implementation of force-directed graphs for three.js: three-forcegraph – thanks Médéric! This is what it looks like (with tons and tons of nodes): Typically, these systems combine attractive forces between adjacent vertices with repulsive forces between all pairs of vertices, in order to seek a layout in which edge lengths are small while vertices are well-separated. In force-based layout systems, the graph drawing software modifies an initial vertex placement by continuously moving the vertices according to a system of forces based on physical metaphors related to systems of springs or molecular mechanics. This one seems to be the most appropriate for drawing a mind map: To calculate the position of the nodes so that the don't overlap is a nontrivial problem.Ī Facebook friend pointed me to the wikipedia article about graph drawing (thanks, Stefan!). I ultimately want my mind map to be potentially hundreds of levels deep and have thousands of nodes. It is renders mind maps with a depth of two levels, and already it becomes clear that drawing a graph like this is not easy (it is mathematically speaking a graph). I've been thinking about the solution I have this far.
#Cytoscape typescript how to
In the previous part I, part II and part III, I've found out how to render React components on sprites in three.js and connect them with lines to make up a mind map that's nested two levels deep.
Follow me if you're interested in what I've learned along the way about building web apps with React, Tailwind CSS, Firebase, Apollo/GraphQL, three.js and TypeScript. I'm building a social media network and collaboration tool based on mind maps, documenting my work in this series of blog posts.
0 kommentar(er)
