react-graph-vis 更新整个节点的颜色非常慢

问题描述

我正在使用这个 react-graph-vis(this link) 库来可视化我的 a->b 依赖项。

除了点击节点之外，我想变灰，但如果我有超过 500 个样本节点，它会非常慢。

（实际上我的数据集包含 1,800 个节点）

你能帮我改进它的性能吗？

这是更新片段，

  const events = {
    select: function(event) {
      var { nodes,edges } = event;

      let connectednodes = [];
      let connectedEdges = [];

      if (nodes.length > 0) {
        connectednodes = graph.network.getConnectednodes(nodes[0]);
        connectedEdges = graph.network.getConnectedEdges(nodes[0]);
      }

      let newNodes = graph.nodes.map((el) => {
        if (nodes.length <= 0 || nodes[0] === el.id || connectednodes.includes(el.id)) {
          return { ...el,color: undefined };
        } else {
          return { ...el,color: '#EbedEF' };
        }
      });

      let newEdges = graph.edges.map((el) => {
        if (nodes.length <= 0 || nodes[0] === el.id || connectedEdges.includes(el.id)) {
          return { ...el,hidden: false };
        } else {
          return { ...el,hidden: true };
        }
      });

      const temp = { ...graph };
      temp.nodes = newNodes;
      temp.edges = newEdges;
      setGraph(temp);
    }
  };

这是我的code sandbox link。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）