react-d3-graph 分布没有链接的节点

Question

我正在使用

react-d3-graph

添加多个节点 with 和 without 链接。

当我添加多个节点没有链接时，它们都位于左上角，这意味着它们始终位于彼此之上。

我可以设置任何配置来将它们自动分布在图表上吗？

---

以下是该案例的示例：

CodeSanbox 链接

数据：

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"
    }
  ]
};

您可以看到

node-1

和

node-2

已连接，因此它们正确对齐，但

node-3

和

node-4

未连接，因此它们在左上角重叠。

Answer 1

我也有同样的问题

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;

如果您找到解决方案，请告诉我