react-d3-graph distribute nodes without links

Question

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.

Answer 1

Please take a look to this example I created.

Note 1: I used the trick by adding the cyrcle link to the unlinked nodes. While direction arrow is need not to be displayed - it is Ok, otherwise...

Note 2: the Graph should be initiated with the empty object. And receive the real data after small delay.

Note 3: pay attention to the used configuration.

Answer 2

I'm having same issue

import React, { Component } from "react";
import { Graph } from "react-d3-graph";
import "./App.css";

class App extends Component {
  render() {
    const data = {
      nodes: [
        {
          "id": "VUX",
          "symbolType": "square"
        },
        {
          "id": "Guardian",
          "symbolType": "square"
        },
        {
          "id": "Broodhmome",
          "symbolType": "square"
        },
        {
          "id": "Avenger",
          "symbolType": "square"
        },
        {
          "id": "Podship",
          "symbolType": "square"
        },
        {
          "id": "Eluder",
          "symbolType": "square"
        },
        {
          "id": "Drone",
          "symbolType": "square"
        },
        {
          "id": "Intruder",
          "symbolType": "square"
        },
      ],
      links: [
        {
          "source": "VUX",
          "target": "Intruder"
        }
      ],
    };

    const config = {
      width: 2000,
      height: 2000,
    };

    return (
      <div className="App">
        <Graph id="my-graph" data={data} config={config} />
      </div>
    );
  }
}

export default App;

It should render like this but it is not

If you have found a solution please let me know