vis.js力導向圖第五彈——隱藏節點
阿新 • • 發佈:2018-12-01
正經學徒,佛系記錄,不搞事情
基於上文: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類
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