vis.js Network更改样式
程序员文章站
2022-06-07 13:51:00
...
参考:官网地址:https://visjs.github.io/vis-network/docs/network/
要实现点击连接线将其变红,并且起始点也变红,点击其他线则点击线变红其他恢复原状。
话不多说直接撸:
//设置链接线属性
window.setEdgeOptions = function(edgeId, options, callback) {
var edg = network.body.data.edges;
var clickedEdges = edg.get(edgeId);
$.each(options, function(key, value) {
clickedEdges[key] = value;
})
if (typeof callback != "undefined" && $.isFunction(callback)) {
callback(clickedEdges);
}
edg.update(clickedEdges);
}
//设置点属性
window.setNodeOptions = function(nodeId, options, callback) {
var nodeArr = network.body.data.nodes;
var clickedNode = nodeArr.get(nodeId);
$.each(options, function(key, value) {
clickedNode[key] = value;
})
if (typeof callback != "undefined" && $.isFunction(callback)) {
callback(clickedNode);
}
nodeArr.update(clickedNode);
}
//管段id
var checkPipesId = "";
var pipOption = {
color: {}
};
var nodeOption = {
color: {}
};
//根据管段id修改其样式
function clickPipHandle(pipId) {
if (!comm.isEmpty(checkPipesId)) { //切换后恢复默认
pipOption.color.color = "#2B7CE9";
window.setEdgeOptions(checkPipesId, pipOption, function(pip) {
nodeOption.color.background = "#97C2FC";
window.setNodeOptions(pip.from, nodeOption);
window.setNodeOptions(pip.to, nodeOption);
});
}
// if (pipId != checkPipesId) {
pipOption.color.color = "red";
window.setEdgeOptions(pipId, pipOption, function(pip) {
nodeOption.color.background = "red";
window.setNodeOptions(pip.from, nodeOption);
window.setNodeOptions(pip.to, nodeOption);
});
checkPipesId = pipId;
// }
}
上一篇: iPhone 12要用高通基带?别高兴的太早 信号依然不容乐观
下一篇: vue点击更改样式