在节点加载后停止vis.js物理，但允许可拖动节点

Stop vis.js physics after nodes load but allow drag-able nodes

本文关键字：节点 许可 拖动 物理 vis 加载 js      更新时间：2023-09-26

我试图画一个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，我不明白步骤。

谢谢

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

我想你首先想让网络稳定，然后才禁用物理?在这种情况下，可以在启用physics和stabilization的情况下加载网络。一旦节点稳定下来，就会触发stabilized事件。然后你可以通过network.setOptions

禁用物理效果

我能够弄清楚这一点，代码现在看起来像这样

// 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()，如新代码所示，它现在按预期工作。

相关文章：