微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何清除/重置/刷新 selectNode 或 selectEdge 的 vis.js 函数?

如何解决如何清除/重置/刷新 selectNode 或 selectEdge 的 vis.js 函数?

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

这里,有人知道如何在点击 selectEdgeselectNode 功能之前清除/删除/刷新以前的功能吗?

这是 selectEdgeselectNode 函数

selectEdge

解决方法

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

演示代码

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",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,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,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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?