微信图片_20240419161137.png

需要安装的依赖：
npm install vis-network

部分代码如下：（不能直接运行）

import { Network } from "vis-network";
import React, { useState, useEffect, useRef } from "react";

export default function index() {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);
  const htmlTitle = (text) => {
    const container = document.createElement("div");
    container.innerHTML = text;
    return container;
  };

  const graphRef = useRef(null);

  //基本配置信息
  const options = {
    autoResize: true,
    height: "100%",
    width: "100%",
    interaction: {
      hover: true,
      hoverConnectedEdges: true,
      multiselect: true,
    },
    nodes: {
      shape: "image",
      brokenImage: "{{ broken_image }}" ?? "",
      size: 35,
      font: {
        multi: "md",
        face: "helvetica",
        color:
          document.documentElement.dataset.netboxColorMode === "dark"
            ? "#fff"
            : "#000",
      },
    },
    edges: {
      length: 100,
      width: 2,
      font: {
        face: "helvetica",
      },
      shadow: {
        enabled: true,
      },
    },
    // physics: {
    //     solver: "forceAtlas2Based",
    // },
  };

  // 获取拓扑图数据
  const getInitData = (val) => {
  //从接口获取数据后进行数据处理
    const json = JSON.parse(res.data.topology_data);
    json.nodes = json.nodes.map((item) => ({
      ...item,
      image: "/net-api" + item.image,
      title: htmlTitle(item.title),
    }));
    setNodes(json.nodes);
    setEdges(json.edges);
  };

  useEffect(() => {
    const network = new Network(graphRef.current, { nodes, edges }, options);
    network.fit();
    network.on("select", (event) => {
      let { nodes } = event;
      if (nodes) {
        history.push({
          pathname: "XXX",
          search: `?id=${nodes}`,
        });
      }
    });
    network.on("dragEnd", (params) => {
      Promise.allSettled(
        Object.entries(network.getPositions(params.nodes)).map(
          async ([nodeId, nodePosition]) => {
            await useNodeApi(
              {
                url: "XXX",
                method: "PATCH",
                type: "xxx",
              },
              {
                node_id: nodeId,
                x: nodePosition.x,
                y: nodePosition.y,
              }
            );
          }
        )
      );
    });
  }, [nodes, edges]);

  return (
    <div className="data-container">
      <div
        style={{
          height: "600px",
          border: "1px solid #CCC",
          borderRadius: "7px ",
        }}
        ref={graphRef}
      ></div>
    </div>
  );
}

获取的数据结构如下：

//不能完全复制，参考思路即可

  {
    "nodes": [
    {
      "id": 86,
      "color.border": "#9e9e9e",
      "physics": true,
      "x": 0,
      "y": 0,
      "title": "<table><tbody> <tr><th>Type: </th><td>hello</td></tr><tr><th></tbody></table>",
      "name": "172.0.1.1",
      "label": "172.0.1.1",
      "shape": "image",
      "href": "/XXX/",
      "image": "/img/server1.svg"
    },
    {
      "id": 87,
      "color.border": "#9e9e9e",
      "physics": true,
      "x": 0,
      "y": 0,
      "title": "<table><tbody> <tr><th>Type: </th><td>hello</td></tr><tr><th></tbody></table>",
      "name": "172.0.1.22",
      "label": "172.0.1.22",
      "shape": "image",
      "href": "/XXX/",
      "image": "/img/server2.svg"
    }
  ],
      "edges": [
    {
      "id": 1,
      "from": 86,
      "to": 87,
      "color": "#2b7ce9",
      "title": "Cable betweenXXX",
      "href": "/XXX/cables/1/"
    }
  ],
      "group": "default"
  }