Custom Layout

You can provide a custom layout for the graph. This is useful if you want to use a layout we don’t provide out of the box or have a specific layout you wish to use.

Usage

To use a custom layout, you need to set the layoutType to custom and provide layoutOverrides with a getNodePosition function that will return the x/y/z position for a given node id.

Here is a basic example:

import { GraphCanvas, CustomLayoutInputs, NodePositionArgs } from 'reagraph';
 
const App = () => (
  <GraphCanvas
    layoutType="custom"
    layoutOverrides={{
      getNodePosition: (id: string, { nodes }: NodePositionArgs) => {
        const idx = nodes.findIndex(n => n.id === id);
        const node = nodes[idx];
 
        // IMPORTANT CODE HERE
        return {
          x: 25 * idx,
          y: idx % 2 === 0 ? 0 : 50,
          z: 1
        };
      }
    } as CustomLayoutInputs}
    nodes={simpleNodes}
    edges={simpleEdges}
  />
);

In this example, the getNodePosition function returns a position based on the index found in the graph. This is just a simple example to show how to use the getNodePosition function.

The interfaces for this are as follows:

LayoutFactoryProps

NodePositionArgs

Example