D3 Force Graph in SolidJS with TypeScript
I've originally asked this on StackOverflow.
D3 seems so complicated to make work with basically any framework... Specially when it comes to TypeScript, since they apparently keep changing their APIs, rendering so many past examples from gists and other posts close to useless.
At the moment, I would like to make work with TypeScript and SolidJS the canonical force graph example.
I feel like trying to solve a jigsaw puzzle since a lot of the types just won't match. The one I've had the most trouble with was the
drag() arguments, I believe. I've also tried simply ignoring types, of course, but I couldn't make it work either.Also, does anyone know if it is possible to append any arbitrary component as a graph node?
---
References
1. D3 - Force Directed Graph
1. Easily show relationships — Draw Simple Force Graph with React & d3 utilizing TypeScript
1. Building D3 interactive network graph D3 Force-Simulation + React + TypeScript
1. mbostock's Gist
1. steveharoz's Gist with Full Controls
Stack Overflow
D3 seems so complicated to make work with basically any framework... Specially when it comes to TypeScript, since they apparently keep changing their APIs, rendering so many past examples from gist...
Observable
This network of character co-occurence in Les Misérables is positioned using D3’s force layout. Color represents arbitrary clusters in the data. Drag nodes below to better understand connections. See also a disconnected graph, a canvas version, and compare to WebCoLa. Data: Stanford Graph Base
Medium
A force-directed graph is often used for drawing graphs pleasing the eye. Using a combination of React with d3 is great since each library…
Medium
We can build very powerful network graphs using D3 Force Simulation library. I have already written how we can build such graph in Angular…
