1

我目前正在实现一个具有不同节点的图表（网络图表）。

最初呈现页面时，会进行 API 调用，以显示具有不同节点的网络图。用户可以双击Node ，它将为选定的 Node呈现一个新图表。用户可以继续点击节点（parent -> child1 -> child2 -> child3）。这工作正常。

在某些情况下，当用户双击一个节点时，我们没有来自 API 的数据。在这种情况下，我们需要显示错误弹出窗口，还需要使用前一个节点（父节点）重新加载图表。

这是网络图的示例，看起来像https://visjs.github.io/vis-network/examples/network/basicUsage.html

当 API 调用没有数据时，我很难加载以前的节点数据。

这是伪代码。

const NetworkGraph = (props: any) => {
  
  const container = useRef<HTMLInputElement | null>(null);
  const [nodeId, setNodeId] = useState(props.nodeId)
  const { graphData, isLoading } = useGetNetowrkGraphData(nodeId); //Custom hook making API call
  
  useEffect(() => {
    if (isLoading === false) {
      if (graphData.nodes.length <= 0) {
        setMessage('No data found', 'error');
        //TODO: Here I need to set the previous NodeId and show previous graph
      }

      const nodes = new DataSet(graphData.nodes);
      const edges = new DataSet(graphData.edges as any[]);
      const networkData = { nodes: nodes, edges: edges };

      const network = container.current && new Network(container.current, networkData, options);

      network?.on('doubleClick', function (params) {
        var ids = params.nodes;
        var clickedNodes = nodes.get(ids);

        if (clickedNodes && clickedNodes.length > 0) {
          setNodeId(clickedNodes[0].id);
        }
      });
    }
  }, [
    container,
    nodeId,
    graphData.nodes,
    graphData.edges,
    isLoading,
    setNodeId,
    setMessage,
  ]);

  if (isLoading) return <div>Loading...</div>;

  return (
    <>
      <Div>
          <div ref={container}/>
      </Div>
    </>
  );
};

export default NetworkGraph;
4

0 回答 0