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

【问题标题】：Vis js - manipulation mode event on Network GraphVis js - 网络图上的操作模式事件
【发布时间】：2018-12-10 16:44:49
【问题描述】：

我正在 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
   });

【问题讨论】：

标签： javascript vis.js

【解决方案1】：

如何最好地禁用物理

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

当 [fixed is] 定义为对象时，可以禁用 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 问题，请注意，fixed 以前名为"allowedToMove")。

我无法发现“editModeEnabled”事件。

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

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

此外，您可以通过为您的容器使用 mutation observer 来随时了解更改。

【讨论】：