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

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

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

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

首先随意创建节点和关系

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

隐藏C类

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

实现方法：

html

显示节点
<input type="checkbox" name="checkbox" checked value="A类"/>A类
<input type="checkbox" name="checkbox" checked value="B类"/>B类
<input type="checkbox" name="checkbox" checked value="C类"/>C类

$('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