如何清除/重置/刷新 selectNode 或 selectEdge 的 vis.js 函数? [英] How to clear/reset/refresh vis.js function for selectNode or selectEdge?

问题描述

1. 首先请参考this 问题(已解决).
2. 继续那个问题，我想在同一个页面和同一个JS函数中使用selectNode或selectEdge函数，但是该函数无法点击，为什么会发生这种情况?如果我不使用以前的功能，selectNode 或 selectEdge 也可以使用.

1. Firstly please refer to this issue (Has been solved).
2. Continuous from that issue, I want to use selectNode or selectEdge function at same page and same JS function, however the function is unable to click, why this happen? If I don't use previous function, the selectNode or selectEdge is work as well.

这里，有人知道如何在点击 selectNode 或 selectEdge 函数之前清除/删除/刷新以前的函数吗?

So here, anyone know how to clear/delete/refresh previous function prior to clicking the selectNode or selectEdgefunction?

这里是 selectNode 或 selectEdge 函数.

Here is the selectNode or selectEdge function.

function node(){
    // Previous solved issue
    $("#btnSearchNode").on('click',function () {
        for (var i = 0;i<test_array_node.length;i++){
            if (test_array_node[i].label.indexOf($("#inputSearchNode").val()) >=0 && $("#inputSearchNode").val() != ''){
                test_array_node[i].font = {
                    color:'#FFFFFF',
                    background: '#4A77E0',
                    size: 20
                };
            }else{
                delete test_array_node[i].font;
            }
        }
        new vis.Network(container, data, options);
    });
    
    // Current issue - how to clear above function to be able below function can be click
    network.on('selectNode', function (properties){
        console.log('Node is selected');
    },
    network.on('selectEdge', function (properties){
        console.log('Edge is selected');
    }
}

推荐答案

您已经为 selectEdge 编写了代码 &selectEdge 在页面加载时.因此，它具有初始网络实例的参考.但是，当您过滤节点时，您正在重新初始化，即: new vis.Network(container, data, options) 所以以前的实例不起作用.而是将您的实例保存在某个变量中，然后重新初始化您的事件.

You have written code for selectEdge & selectEdge on page load . So , it has reference of intial network instance . But , when you filter your nodes you are reinitializing i.e : new vis.Network(container, data, options) so previous instance doesn't work . Instead save your instance in some variable and then reinitialize your events .

演示代码:

var allNodes = [{
    id: 1,
    label: "55"
  },
  {
    id: 2,
    label: "192.12"
  },
  {
    id: 3,
    label: "192.16"
  },
  {
    id: 4,
    label: "192.168.1.8"
  },
];
// Create edge data array
var allEdges = [{
    id: "1_2",
    from: 1,
    to: 2
  },
  {
    id: "2_3",
    from: 2,
    to: 3
  },
  {
    id: "2_4",
    from: 2,
    to: 4
  },
  {
    id: "4_1",
    from: 4,
    to: 1
  }
]
var container = document.getElementById('mynetwork');
var nodes = new vis.DataSet(allNodes);
var edges = new vis.DataSet(allEdges);
var data = {
  nodes: nodes,
  edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
intialize(network); //call this
$("#btnSearch").on('click', function() {
  for (var i = 0; i < allNodes.length; i++) {
    if (allNodes[i].label.indexOf($("#inputSearch").val()) >= 0 && $("#inputSearch").val() != '') {

      allNodes[i].font = {
        background: "#FF0000",
        color: "#FFFFFF"
      };
    } else {
      delete allNodes[i].font;
    }
  }
  network = new vis.Network(container, data, options); //get instance
  intialize(network); //call this 
});

function intialize(network) {
  //reintialize..
  network.on('selectNode', function(properties) {
    console.log('Node is selected');
  })
  network.on('selectEdge', function(properties) {
    console.log('Edge is selected');
  })
}

#mynetwork {
  width: 500px;
  height: 500px;
  border: 1px solid lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<input type="text" id="inputSearch" placeholder="Please enter the ip address"><button id="btnSearch">Search</button>
<div id="mynetwork"></div>

这篇关于如何清除/重置/刷新 selectNode 或 selectEdge 的 vis.js 函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！