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

如何最好地禁用物理学

您可以遍历数据集中的所有节点并将它们设置为fixed：

将[固定为]定义为对象时，可以禁止在X或Y方向上的移动。（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问题，请注意， fix以前称为“ allowedToMove”。

我无法发现'editModeEnabled'事件。

vis.js会通知您，例如关于拖动开始/停止事件，不幸的是，它不会通知您正在进行或处于“操纵”模式。一种解决方法是检查dom是否设置了类名，例如检查是否存在“后退”按钮（仅在操作模式下显示）。

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

此外，您可以通过在容器中使用mutation observer来随时了解有关更改的信息。

Vis JS-网络图上的操纵模式事件

1 个答案: