0

我正在使用 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;

这是我的选项对象

let options = {
layout: {
    hierarchical: false
},
autoResize: false,
edges: {
  smooth: false,
  color: '#000000',
  width: 0.5,
  arrows: {
    to: {
      enabled: true,
      scaleFactor: 0.5
    }
  }
}
};

任何帮助将不胜感激。提前致谢 ！

4

1 回答 1

0

您提到您尝试启用稳定但没有成功。选项中的以下内容应该有效：

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

这与您尝试的不同吗？

于 2017-06-24T07:27:41.720 回答