vis.jsのグラフの枝を隠すには？

Question

次のようにノード1205をクリックしてvis.jsにグラフの一部を表示することはできますが、同じノードの2回目のクリックで展開された部分が消えるようにする方法を理解できませんか？

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}]); 

ここ