Reactjs 稳定后如何显示图形（vis.js）？

我正在使用vis网络的实现绘制一个图，如图所示。现在，图形在渲染后需要一些时间才能稳定下来。但我希望网络在显示之前稳定下来。我尝试在物理模块下使用稳定选项，但未能实现

下面是我的图形组件

import {default as React, Component} from 'react';
import isEqual from 'lodash/isEqual';
import differenceWith from 'lodash/differenceWith';
import vis from 'vis';
import uuid from 'uuid';
import PropTypes from 'prop-types';

class Graph extends Component {
  constructor(props) {
    super(props);
    const {identifier} = props;
    this.updateGraph = this.updateGraph.bind(this);
    this.state = {
      identifier : identifier !== undefined ? identifier : uuid.v4()
    };
  }

  componentDidMount() {
    this.edges = new vis.DataSet();
    this.edges.add(this.props.graph.edges);
    this.nodes = new vis.DataSet();
    this.nodes.add(this.props.graph.nodes);
    this.updateGraph();
  }

  shouldComponentUpdate(nextProps, nextState) {
    let nodesChange = !isEqual(this.nodes.get(), nextProps.graph.nodes);
    let edgesChange = !isEqual(this.edges.get(), nextProps.graph.edges);
    let optionsChange = !isEqual(this.props.options, nextProps.options);
    let eventsChange = !isEqual(this.props.events, nextProps.events);

    if (nodesChange) {
      const idIsEqual = (n1, n2) => n1.id === n2.id;
      const nodesRemoved = differenceWith(this.nodes.get(), nextProps.graph.nodes, idIsEqual);
      const nodesAdded = differenceWith(nextProps.graph.nodes, this.nodes.get(), idIsEqual);
      const nodesChanged = differenceWith(differenceWith(nextProps.graph.nodes, this.nodes.get(), isEqual), nodesAdded);
      this.patchNodes({nodesRemoved, nodesAdded, nodesChanged});
    }

    if (edgesChange) {
      const edgesRemoved = differenceWith(this.edges.get(), nextProps.graph.edges, isEqual);
      const edgesAdded = differenceWith(nextProps.graph.edges, this.edges.get(), isEqual);
      this.patchEdges({edgesRemoved, edgesAdded});
    }

    if (optionsChange) {
      this.Network.setOptions(nextProps.options);
    }

    if (eventsChange) {
      let events = this.props.events || {}
      for (let eventName of Object.keys(events))
        this.Network.off (eventName, events[eventName])

      events = nextProps.events || {}
      for (let eventName of Object.keys(events))
        this.Network.on (eventName, events[eventName])
    }

    return false;
  }

  componentDidUpdate() {
    this.updateGraph();
  }

  patchEdges({edgesRemoved, edgesAdded}) {
    this.edges.remove(edgesRemoved);
    this.edges.add(edgesAdded);
  }

  patchNodes({nodesRemoved, nodesAdded, nodesChanged}) {
    this.nodes.remove(nodesRemoved);
    this.nodes.add(nodesAdded);
    this.nodes.update(nodesChanged);
  }

  updateGraph() {
    let options = this.props.options;

    this.Network = new vis.Network(
            this.refs.nw,
      Object.assign(
        {},
        this.props.graph,
        {
          edges: this.edges,
          nodes: this.nodes
        }
      ),
      options
    );


    if (this.props.getNetwork) {
      this.props.getNetwork(this.Network)
    }

    // Add user provided events to network
    let events = this.props.events || {};
    for (let eventName of Object.keys(events)) {
      this.Network.on(eventName, events[eventName]);
    }
  }

  render(){
        return (<div ref="nw" style={{width:'100%' , height: '480px'}}/>);
    }
}

Graph.defaultProps = {
  graph: {},
  style: { width: '100%', height: '480px' }
};
Graph.propTypes = {
  graph: PropTypes.object,
  style: PropTypes.object,
  getNetwork: PropTypes.func
};

export default Graph;

任何帮助都将不胜感激。

---

提前谢谢

您提到您试图实现稳定，但没有成功。选项中的以下选项应起作用：

physics: {
  stabilization: {
    enabled: true,
    iterations: 5000    // YMMV
  }
}

这和你试过的不同吗

physics: {
  stabilization: {
    enabled: true,
    iterations: 5000    // YMMV
  }
}