我个人的项目

・已经完成了绘制网络图的部分，链接：https://create-react-app-yamap-y6hp.vercel.app/
・这次要实现在图上添加UI的功能。

迷上了瘾

・我现在仍然沉迷其中
・最终原因是图书馆本身

解决的方案

・react-vis-graph → 不行（煩惱了一個星期）
・react-vis-graph-wrapper → 五秒鐘解決

问题意识

・在CHATGPT中无法解决
・坚持在Google上搜索 →果然，这里很重要。

詳盡的
详细

在参数数组中发现了重复的id。在n.value（data-set.ts:259:1）中发生了错误。

原文： ソース

中文：调料

import React, { useState, useEffect } from "react";
import VisGraph, {
  GraphData,
  GraphEvents,
  Options,
} from 'react-vis-graph-wrapper';

import options from '../options';

const GraphPage = (props) => {
  const events = {};

  const filteredNodes = props.data.nodes.filter((node) => node.isOn);

  // Check for duplicate node IDs
  const nodeIds = new Set();
  const uniqueNodes = [];
  filteredNodes.forEach((node) => {
    if (!nodeIds.has(node.id)) {
      nodeIds.add(node.id);
      uniqueNodes.push(node);
    }
  });

  // Remove edges.id from the filteredEdges array
  const filteredEdges = props.data.edges.filter((edge) => {
    return (
      uniqueNodes.find((node) => node.id === edge.from) !== undefined &&
      uniqueNodes.find((node) => node.id === edge.to) !== undefined
    );
  });

  return (
    <VisGraph
      graph={{ nodes: uniqueNodes, edges: filteredEdges }}
      options={options}
      events={events}
    />
  );
};

export default GraphPage;

不合格报告

该问题在https://github.com/crubier/react-graph-vis/issues/150提出，但尚未解决。

这个软件包是react-graph-vis的完全重写，由ZachHaber在某个深层讨论中提及的这个gist开始。