selectNode 或 selectEdge 如何 clear/reset/refresh vis.js 函数?
How to clear/reset/refresh vis.js function for selectNode or selectEdge?
- 首先请参考this问题(已解决)
- 接那个问题,我想在同一个页面同一个JS函数中使用
selectNode
或selectEdge
功能,但是功能无法点击,为什么会这样?如果我不使用以前的功能,selectNode
或 selectEdge
也可以使用。
所以在这里,有人知道如何在单击 selectNode
或 selectEdge
功能之前 clear/delete/refresh 上一个功能吗?
这里是 selectNode
或 selectEdge
函数。
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)
所以以前的实例不起作用。而是将您的实例保存在某个变量中,然后重新初始化您的事件。
演示代码 :
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>
- 首先请参考this问题(已解决)
- 接那个问题,我想在同一个页面同一个JS函数中使用
selectNode
或selectEdge
功能,但是功能无法点击,为什么会这样?如果我不使用以前的功能,selectNode
或selectEdge
也可以使用。
所以在这里,有人知道如何在单击 selectNode
或 selectEdge
功能之前 clear/delete/refresh 上一个功能吗?
这里是 selectNode
或 selectEdge
函数。
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)
所以以前的实例不起作用。而是将您的实例保存在某个变量中,然后重新初始化您的事件。
演示代码 :
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>