S
SolidJS•10mo ago
psygo

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 Force Graph in SolidJS with TypeScript
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
Force-Directed Graph
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
Easily show relationships — Draw Simple Force Graph with React & d3...
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
Building D3 interactive network graph D3 Force-Simulation + React +...
We can build very powerful network graphs using D3 Force Simulation library. I have already written how we can build such graph in Angular…
6 Replies
thetarnav
thetarnav•10mo ago
D3 seems so complicated to make work with basically any framework
can't you render everything with d3 to svg or canvas? and just return the elements for solid to attach to the dom? To render some solid component you probably need to hand d3 a dom node. You could probably do it like this: 
const root = <div /> as HTMLDivElement
render(() => <>{some_jsx_that_you_want_to_render}</>, root)
// then root can be appended to the node
const root = <div /> as HTMLDivElement
render(() => <>{some_jsx_that_you_want_to_render}</>, root)
// then root can be appended to the node
psygo
psygo•10mo ago
Yes, I think the question is mostly about D3 and TypeScript, and that's the approach I've tried all day, but couldn't make work.
milomg (modderme123)
milomg (modderme123)•10mo ago
Maybe try creating an example of what you want in the solid playground?
psygo
psygo•10mo ago
What I would like to have is exactly this: https://discord.com/channels/722131463138705510/1141837112975568936/1141837112975568936, but in SolidJS, the link I mentioned in the OP.
Discord
Discord - A New Way to Chat with Friends & Communities
Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
milomg (modderme123)
milomg (modderme123)•10mo ago
Doing it "in solid" can be as simple as just putting it in onMount with a ref (in solid is in quotes because you could use a function dom element as a solid component). Here's a d3 tree I wrote in solid a while ago: https://github.com/CM-Tech/solid-debugger/blob/main/src/graph.tsx a force directed graph is in the commit history of that project too
GitHub
solid-debugger/src/graph.tsx at main · CM-Tech/solid-debugger
A debugger for solid-js. Contribute to CM-Tech/solid-debugger development by creating an account on GitHub.
psygo
psygo•10mo ago
Wow, mate, you went far above and beyond anything I would like to do. I'll give it a try, but your work seems way out of my wheel house. I've added it as a reference to the question (on SO) I've added a bounty (150) to the SO question.
Want results from more Discord servers?
Add your server
More Posts
an error that occurs every time something changes, but disappears with refresho/ i've run into some really odd behavior today. whenever i change anything in my code, the hot reloWhat is wrong with this reactive select list?https://playground.solidjs.com/anonymous/886c5e97-4d2e-427f-abf0-95df02ab0c71 The first select listHow do i write routes which update automatically based on if authenticated or notLets say that I have the below code and when i hit root path(`/`) i want to navigate to `/login` if template not exported from solidjs/webI'm trying to use the solid-spinner library https://github.com/lenniezelk/solid-spinner but am gettiSolid Start + Tailwind?Hello, I tried to use Solid Start with Tailwind, but my build ignores cssnano and the classes in theWhat's the best way to debug `Buffer is not defined`Hey folks, I am currently trying to re-restructure my code a bit, so it becomes more maintainable. Solid DNDAsking for help here, as the solid-dnd github seems to be pretty dead (as far as help and documentaSolidStart unknown number of optional nested route parametersHi, looking if there's a way to set up file based routes where there's an unknown number of optionalhow to use solidjs metaanyone used <https://github.com/solidjs/solid-meta> cuz I don't know how to use it what's "res" and Resource chaining and other promise-like compositionWith raw Promises, there are a number of ways to compose them usefully, e.g. `.then()` for value tra