vis.js力导向图第五弹——隐藏节点

正经学徒,佛系记录,不搞事情

基于上文:https://blog.csdn.net/qq_31748587/article/details/84143153 的项目

通过复选框动态控制节点的展示(节点隐藏会自动隐藏关系,但节点还是存在于图中,只是隐藏了)

首先随意创建节点和关系

vis.js力导向图第五弹——隐藏节点_第1张图片

隐藏C类

vis.js力导向图第五弹——隐藏节点_第2张图片

实现方法:

html

显示节点
A类
B类
C类

js

$('input[type=checkbox][name=checkbox]').change(function(e) {
    for(var i in network.body.data.nodes._data){
        if(network.body.data.nodes._data[i].label == e.target.value && !e.currentTarget.checked){
            network.clustering.updateClusteredNode(i, {hidden : true});
        }else{
            network.clustering.updateClusteredNode(i, {hidden : false});
        }
    }
});

后续结合java+neo4j(图形数据库)+vis.js实现数据的展示

项目地址:

https://pan.baidu.com/s/1MWGXeAAPVa02e9-h6UlDqA 提取码: fepm

你可能感兴趣的:(vis.js)