web-dev-qa-db-ja.com

ノードのロード後にvis.js物理を停止しますが、ドラッグ可能なノードは許可します

Vis.jsネットワーク図を描画し、ノードをvisにロードして配置しようとしています。次に、ユーザーがノードを移動できるように、物理演算を無効にします。私はこれを試しましたが、機能していません。

var options = {

    nodes: {
      borderWidth:4,
      size:60,
      color: {
        border: '#222222',
        background: 'grey'
      },
      font:{color:'black'}
    },
    edges: {
      arrows: {
        to:     {enabled: false, scaleFactor:1},
        middle: {enabled: false, scaleFactor:1},
        from:   {enabled: false, scaleFactor:1}
      },
      color: 'black'
    },

    { physics: enabled: false; };

誰かがこれをしましたか？もしそうなら、これを達成するための最良の方法についての例やアドバイスを提供できますか。 ここ にある説明も読みましたが、Java）にあまり詳しくありません。手順がわかりません。

ありがとう

javascriptnode.jsvis.jsvis.js-network
12
Perry

Vis.js開発者からのさらなる作業と支援の後、完成したコードからjsonデータといくつかのオプションを除いたものがここにあります。秘訣は、"stabilizationIterationsDone"イベントを使用して、物理演算を無効にすることです。

 // create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {

    nodes: ...,
    edges: ...,

    physics: {
        forceAtlas2Based: {
            gravitationalConstant: -26,
            centralGravity: 0.005,
            springLength: 230,
            springConstant: 0.18,
            avoidOverlap: 1.5
        },
        maxVelocity: 146,
        solver: 'forceAtlas2Based',
        timestep: 0.35,
        stabilization: {
            enabled: true,
            iterations: 1000,
            updateInterval: 25
        }
    }
};

network = new vis.Network(container, data, options);

network.on("stabilizationIterationsDone", function () {
    network.setOptions( { physics: false } );
});
14
Perry

私はこれを理解することができました、そしてコードは今このように見えます

_// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {

    nodes: {
      borderWidth:1,
      size:45,
      color: {
        border: '#222222',
        background: 'grey'
      },
      font:{color:'black',
       size: 11,
       face :'arial',
       },
    },

    edges: {

        arrows: {
            to:     {enabled: false, scaleFactor:1},
            middle: {enabled: false, scaleFactor:1},
            from:   {enabled: false, scaleFactor:1}
        },
        color: {
            color:'#848484',
            highlight:'#848484',
            hover: '#848484',
        },
        font: {
            color: '#343434',
            size: 11, // px
            face: 'arial',
            background: 'none',
            strokeWidth: 5, // px
            strokeColor: '#ffffff',
            align:'vertical'
        },
        smooth: {
            enabled: false, //setting to true enables curved lines
            //type: "dynamic",
            //roundness: 0.5
        },
    }
};

network = new vis.Network(container, data, options);
    network.setOptions({
            physics: {enabled:false}
    });
}
_

新しいコードに示されているようにnetwork.setOptions()を移動する必要があり、現在は希望どおりに機能しています。

4
Perry

最初にネットワークを安定させてから、物理を無効にしたいのではないでしょうか。その場合、physicsとstabilizationを有効にしてネットワークをロードできます。ノードが安定すると、stabilizedイベントが発生します。次に、network.setOptionsを介して物理を無効にすることができます

3
Jos de Jong