react-d3-graph set starting positions for nodes

Question

Does anyone here use the library react-d3-graph? https://danielcaldas.github.io/react-d3-graph/docs/index.html I'm trying to find a way to give my nodes starting positions, I'm unsure how their positions are set upon render right now. Any idea how to do so ?

Thanks

Answer 1

I couldn't find it in the documentation, but you can just add an x and y property to a node to give it an initial position. (Works whether you set the prop staticGraph or not.)

The following will place node 'a' above node 'b' every time, instead of placing them randomly.

<Graph
  id="test-graph"
  data={{
    nodes: [
      { id: 'a', x: 0, y: 0 },
      { id: 'b', x: 0, y: 1 },
    ],
    links: [{ source: 'a', target: 'b' }],
  }}
/>

It's also possible to have coordinates on only some nodes. Then the ones without coordinates will be placed randomly.