javascript - Vis js - 网络图上的操作模式事件

Question

我正在 vis.js 的网络图中处理节点和边缘操作。当我进入操作模式来创建、编辑和删除节点时，如何最好地禁用物理？

我创建了一个像这样的网络:

  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 3, to: 3}
  ]);


  var options = {
        interaction: {
            hover: true,
            navigationButtons: true
        },
        manipulation: {
            enabled: true,
            addNode: function(nodeData, callback) {
                network.setOptions({
                    physics: false
                });
                callback(nodeData);
            },
            addEdge: function(edgeData, callback) {

                network.setOptions({
                    physics: false
                });
                callback(edgeData);
            },
            editNode: function(nodeData, callback) {

                network.setOptions({
                    physics: false
                });
                callback(nodeData);

            },
            editEdge: function(edgeData, callback) {

                callback(edgeData);

            },

        }
    },

    layout: {
        improvedLayout: true
    },
    nodes: {
        shape: "dot",
        font: {
            size: 8
        },
        size: 5,
    },
    edges: {
        smooth: false
    },
    physics: {
        barnesHut: {
            springLength: 40
        },
        minVelocity: 0.08,
        timestep: 0.4
    }
};

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

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

我发现 vis.js network docs 上有可以在没有 GUI 的情况下调用的操作方法。我找不到 'editModeEnabled' 事件。我本来希望写一些类似的东西

  network.on('editModeEnabled',function(params){
       //...disable physics
   });

Answer 1

How do I best go about disabling the physics

您可以迭代数据集中的所有节点并将它们设置为固定:

When [fixed is] defined as an object, movement in either X or Y direction can be disabled. (http://visjs.org/docs/network/nodes.html)

// freeze your nodes
const updates = nodes.get().map(node => {
  ...node,
  fixed: { x: true, y: true }
});

// pass updates to your dataset
nodes.update(updates);

有关“禁用”物理和将节点设置为固定的有用讨论，请参阅 this github 问题，它还讨论了如何在拖动事件后修复节点(另请参阅此 this 问题，请注意修复以前名为“allowedToMove”)。

I can't spot an 'editModeEnabled' event.

虽然 vis.js 会通知您，例如关于拖动启动/停止事件，不幸的是，它不会通知您进入或处于“操作”模式。解决方法是检查 dom 中是否设置了类名，例如检查是否存在后退按钮(仅在操作模式下出现)。

container.getElementsByClassName('vis-button vis-back').length > 0;

此外，您可以使用 mutation observer 随时了解更改信息用于您的容器。