react-graph-vis обновление цветов всего узла происходит очень медленно

Я использую эту библиотеку response-graph-vis(эта ссылка ) для визуализации моих зависимостей a->b.

Я хочу выделить серым цветом, кроме узлов, по которым щелкнули, но это очень медленно, если у меня более 500 узлов образца.

(На самом деле мой набор данных содержит 1800 узлов)

Не могли бы вы помочь мне улучшить его производительность?

Вот фрагмент обновления,

        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);
    }
  };

Это моя ссылка на песочницу кода .

0 ответов

Другие вопросы по тегам