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

最新推荐文章于 2024-08-05 13:23:57 发布

My name is Red ^^

最新推荐文章于 2024-08-05 13:23:57 发布

阅读量2.5k

点赞数 1

分类专栏： vis.js 文章标签： vis 隐藏节点力导向图

本文链接：https://blog.csdn.net/qq_31748587/article/details/84245920

版权

vis.js 专栏收录该内容

6 篇文章 7 订阅

订阅专栏

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

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

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

首先随意创建节点和关系

隐藏C类

实现方法：

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