如何在vis.js中隐藏图形的分支？

Question

通过点击节点1205，可以在vis.js中显示部分图表，但无法弄清楚如何在同一个节点上再次点击展开的部分？

var nodes = new vis.DataSet([ 
 
    {id: 2696, label: "l"}, 
 
    {id: 1205, label: "l"}, 
 
    {id: 2697, label: "l"} 
 
]); 
 

 
var edges = new vis.DataSet([ 
 
    {from: 2696, to: 2697}, 
 
    {from: 2696, to: 1205} 
 
]); 
 

 
var container = document.getElementById('mynetwork'); 
 
var data = { 
 
    nodes: nodes, 
 
    edges: edges 
 
}; 
 

 
var network = new vis.Network(container, data, {}); 
 
network.on("click", function(e) { 
 
    tw_id = 1205; 
 
    if (e.nodes[0] == tw_id) { 
 
    sel_id = e.nodes[0]; 
 
    var node = nodes.get(e.nodes[0]); 
 
    nodes.add([ 
 
     {id: 2021, label: "l"}, 
 
     {id: 2047, label: "l"} 
 
    ]); 
 
    edges.add([ 
 
     {from: 1205, to: 2021}, 
 
     {from: 1205, to: 2047} 
 
    ]); 
 
    nodes.update(node); 
 
    } 
 
});

#mynetwork { 
 
    width: 400px; 
 
    height: 300px; 
 
    border: 1px solid lightgray; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script> 
 
<div id="mynetwork"></div>

Answer 1

这里有一个如何实现这个基础上@ pgoldweic的选项加上预定义将显示每点击/未显示在节点1205

的代码维护一个布尔值，表明是否边沿和节点为例下一个动作是显示或隐藏其他节点。针对hidden属性，显示为false，隐藏为true。

var nodes = new vis.DataSet([ 
 
    {id: 2696, label: "2696", hidden: false}, 
 
    {id: 1205, label: "1205", hidden: false}, 
 
    {id: 2697, label: "2697", hidden: false}, 
 
    {id: 2021, label: "2021", hidden: true}, 
 
    {id: 2047, label: "2047", hidden: true} 
 
]); 
 

 
var edges = new vis.DataSet([ 
 
    {id: 'e1', from: 2696, to: 2697, hidden: false}, 
 
    {id: 'e2', from: 2696, to: 1205, hidden: false}, 
 
    {id: 'e3', from: 1205, to: 2021, hidden: true}, 
 
    {id: 'e4', from: 1205, to: 2047, hidden: true} 
 
]); 
 

 
var container = document.getElementById('mynetwork'); 
 
var data = { 
 
    nodes: nodes, 
 
    edges: edges 
 
}; 
 

 
var network = new vis.Network(container, data, {}); 
 

 
// true=hide; false=show 
 
var toggle = false; 
 
network.on("click", function(e) { 
 
    tw_id = 1205; 
 
    if (e.nodes[0] == tw_id) { 
 
    nodes.update([ 
 
     {id: 2021, hidden: toggle}, 
 
     {id: 2047, hidden: toggle} 
 
    ]); 
 
    edges.update([ 
 
     {id: 'e3', hidden: toggle}, 
 
     {id: 'e4', hidden: toggle} 
 
    ]); 
 
    network.fit(); 
 
    // switch toggle 
 
    toggle = !toggle; 
 
    } 
 
});

#mynetwork { 
 
    width: 400px; 
 
    height: 300px; 
 
    border: 1px solid lightgray; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script> 
 
<div id="mynetwork"></div>

Answer 2

只要你跟踪哪些节点和边缘是给定节点的扩展区域的一部分，你可以随时使用vis.js更新功能隐藏起来。举例来说，隐藏其id为“ID1”的一个节点，你可以拨打：

nodes.update([{id: 'id1', hidden: true}]); 

（注意，更新预计数组作为参数）。以同样的方式，你可以通过调用隐藏的边缘：

edges.update([{id: 'edge1', hidden: true}]); 

希望这有助于！