1

I'm using react-d3-graph for adding several nodes with and without links.

When I'm adding several nodes without a link, they are all in the top left corner, which means that they are always above each other.

Is there any config I can set to auto spread them on the graph?


Here is an example of that case:

CodeSanbox link

The data:

const data = {
  nodes: [
    {
      id: "node-1",
      fx: 100,
      fy: 100
    },
    {
      id: "node-2",
      fx: 200,
      fy: 200
    },
    {
      id: "node-3",
      fx: 300,
      fy: 300
    },
    {
      id: "node-4",
      fx: 300,
      fy: 300
    }
  ],
  links: [
    {
      source: "node-1",
      target: "node-2"
    }
  ]
};

And you can see the node-1 and node-2 are connected, so they are aligned correctly, but node-3 and node-4 are not connected, so they are overlapping on the top-left point.

enter image description here

baruchiro
  • 5,088
  • 5
  • 44
  • 66
liav yazdi
  • 55
  • 6

0 Answers0