Layouting Challenges with @visx/network

[golansoffer]

Hey guys,

I'm using @visx/network to render multiple linked lists stacked on top of each other, all within the same SVG. Each row consists of 4 nodes, with each node linked to the next one.

I initially tried yoga-layout, but it’s hard to customize for my needs. Here’s my challenge:

1. The first node has its own layout that indicates it’s the starting point.
2. The last node is a mirror of the first node.
3. The middle nodes are more centered as they have links stretching out from both the left and right sides.

Additionally, I need to dynamically reveal nodes—starting with only the first node and its link, then progressively rendering the second node with its two links (left and right), and so on.

What’s the best way to achieve this controlled, step-by-step rendering while also handling custom node layouts like this? Should I manage it via state updates, or is there a better layout strategy for this setup?

Thanks!

Note: In the picture, there’s only one line, but in my case, I need to stack multiple lines on top of each other.