问题描述
限时送ChatGPT账号.. 首先请参考this 问题(已解决).继续那个问题,我想在同一个页面和同一个JS函数中使用selectNode
或selectEdge
函数,但是该函数无法点击,为什么会发生这种情况?如果我不使用以前的功能,selectNode
或 selectEdge
也可以使用.
Firstly please refer to this issue (Has been solved).
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 selectEdge
function?
这里是 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/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屋!
更多推荐
[db:关键词]
发布评论