安定したグラフを表示するには（vis.js）？

Question

私はvisネットワークの実装を使ってグラフをレンダリングしています（here）。現在、グラフはレンダリング後に安定するまでに時間がかかります。しかし、私はネットワークが表示される前に安定していなければなりません。私は物理モジュールの安定化オプションを使ってみましたが、実現できませんでした。

以下は私のグラフコンポーネントです。

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

任意の助けをいただければ幸いオブジェクトです。 ありがとうございます！

Answer 1

安定化を有効にしようとしたことをお伝えしました。オプションの次の項目は機能するはずです：

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

これはあなたの試行したものとは異なりますか？