Wie kann man den Graphzweig in vis.js verstecken?

Question

Ich kann einen Teil des Graphen in vis.js anzeigen, indem ich mit den folgenden Punkten auf den Knoten 1205 klicke, aber nicht herausfinden kann, wie man den expandierten Teil bei einem zweiten Klick auf denselben Knoten verschwinden lässt?

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

Hier ist ein Beispiel dafür, wie diese auf Wunsch des @ pgoldweic Basis zu implementieren und Pre-Definition der Kanten und Knoten, die 1205

Der Code unterhält eine boolean pro Klick auf Knoten dargestellt/nicht dargestellt werden, ob das, um anzuzeigen, Die nächste Aktion zeigt oder versteckt die anderen Knoten. Gegen die hidden Eigenschaft ist es false für Show und true für verstecken.

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

Solange Sie den Überblick behalten, welche Knoten und Kanten Teil des erweiterten Bereich für einen bestimmten Knoten sind, können Sie verstecken sie immer durch die Funktion vis.js Update verwenden. Um zum Beispiel einen Knoten, dessen ID ist 'id1' zu verstecken, könnten Sie rufen:

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

(beachten Sie, dass Update erwartet ein Array als Argument). Auf die gleiche Weise können Sie Kanten ausblenden, indem Sie Folgendes aufrufen:

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

Hoffe, das hilft!