Is there a way to make nodes spawn initially without links overlapping?

[liamlows]

Hello,

We are using react force graph to display hundreds of nodes and wanted them to spawn in so they are separated out nicely with no links overlapping. One way I have noticed to achieve this is to let them naturally spawn in and then hold and wiggle the root node a little and eventually all the nodes will place themselves correctly. I have provided screenshots of the initial load and what we want it to look like on initial load (after wiggling the root node until all are placed nicely).

Initial load:

What we want:

As you can see, in the initial load links cross over each other and it makes the graph hard to trace whereas the screenshot of what we want it to look like all the nodes are nicely spaced out and it is easy to follow the links from the root to children with minimal overlap.

Is there a way to achieve this? I have tried playing with various settings but nothing seems to get it quite right. We are fine if it takes a few seconds to get to the final state but having it spawn initially like that would be great!

Thanks in advance and wonderful project!

[vasturiano]

@liamlows thanks for reaching out.

You can try decreasing the d3AlphaDecay to say 0.005 in order to keep the engine running at high intensity for longer.

[liamlows]

@liamlows thanks for reaching out.

You can try decreasing the d3AlphaDecay to say 0.005 in order to keep the engine running at high intensity for longer.

Awesome that was what I was looking for! Thank you!

[liamlows]

one more thing @vasturiano, we have a onclick handler for the nodes to display information about them. When we click on the node, it causes the graph to re-engage in the force effect. is there a way to prevent this and keep it static?

EDIT: here is some of the code:

  const updateHighlight = () => {
    setHighlightNodes(highlightNodes);
    setHighlightLinks(highlightLinks);
  };

  const handleNodeHover = (node: Node) => {
    highlightNodes.clear();
    highlightLinks.clear();
    if (node) {
      highlightNodes.add(node);
      node.neighbors?.forEach((neighbor) => highlightNodes.add(neighbor));
      node.links?.forEach((link) => highlightLinks.add(link));
    }

    setHoverNode(node || null);
    updateHighlight();
  };

  const paintRing = useCallback(
    (node: Node, ctx: CanvasRenderingContext2D) => {
      // add ring just for highlighted nodes
      ctx.beginPath();
      ctx.arc(node.x as number, node.y as number, NODE_R * 1.4, 0, 2 * Math.PI, false);
      ctx.fillStyle = node === hoverNode ? 'lawngreen' : 'dodgerblue';
      ctx.fill();
    },
    [hoverNode],
  );
...
            <ForceGraph2D
              ref={graphRef}
              graphData={
                { nodes: graphMap.nodes, links: graphMap.links } as GraphData<
                  NodeObject<NodeObject<Node>>,
                  LinkObject<Node, LinkObject<Node, Link>>
                >
              }
              d3AlphaDecay={0.005}
              nodeLabel={(node) => {
                return node.nodeName as string;
              }}
              width={wrapperRef.current?.offsetWidth}
              height={dim.height ? dim.height - 150 : 1000}
              nodeRelSize={NODE_R}
              autoPauseRedraw={false}
              backgroundColor={resolvedTheme === 'light' ? '#fafafa' : '#09090b'}
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              nodeCanvasObject={paintRing}
              nodeCanvasObjectMode={(node) => (highlightNodes.has(node) ? 'before' : undefined)}
              linkWidth={(link) => (highlightLinks.has(link) ? 6 : 1)}
              linkDirectionalParticles={3}
              linkDirectionalParticleWidth={(link) => (highlightLinks.has(link) ? 1 : 0)}
              linkColor={() => (resolvedTheme === 'dark' ? '#fafafa22' : '#09090b')}
              onNodeClick={(node) => {
                currentNodeRef.current?.setCurrentNode(node as unknown as ElementNode);
                setCurrentNode(node as unknown as ElementNode);
                handleNodeHover(node as Node);
              }}
            />

[vasturiano]

@liamlows you should memoize your props that are passed to the component.

For example, this:

graphData={{ nodes: graphMap.nodes, links: graphMap.links }}

is causing a new data object to be input into the component at every re-render, in consequence causing the force engine to reset and run again which is what you're experiencing.

So, short story, memoize all the input props using useMemo.

[liamlows]

Hmm, I've tried that but i think the issue resides in the state thats holding the currently clicked node. I forgot to include the following code:

const [currentNode, setCurrentNode] = useState<ElementNode | undefined>(undefined);
const [highlightNodes, setHighlightNodes] = useState(new Set());
const [highlightLinks, setHighlightLinks] = useState(new Set());
const [hoverNode, setHoverNode] = useState<Node | null>(null);

when clicking on a node, these various states will change in order to provide proper highlighting and to show details about the currently clicked node on a side pane. So i believe the state change is causing the re-render right? not necessarily the graph data. Im not sure since i tried memoizing the graphdata input and also using useCallback on the functions in the code i previously posted to no avail.

[vasturiano]

Would you mind making a simple reduced example on https://codesandbox.io/ , it makes it easier to debug this.