Mon 21 Jul 22:43:21 CEST 2025

2025-07-21 22:57:53 +02:00 · 2025-07-21 22:57:53 +02:00 · f6379f1d2f
commit f6379f1d2f
parent 19ec345dd2
1 changed files with 140 additions and 0 deletions
--- a/js/dos/ext/vis/examples/network/data/datasets.html
+++ b/js/dos/ext/vis/examples/network/data/datasets.html
@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Dynamic Data</title>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+    <style type="text/css">
+        #mynetwork {
+            width: 600px;
+            height: 400px;
+            border: 1px solid lightgray;
+        }
+
+        p {
+            max-width:600px;
+        }
+
+        h4 {
+            margin-bottom:3px;
+        }
+    </style>
+</head>
+
+<p>
+    You can change any settings you want while the network is initialized using the vis Dataset, setOptions and setData. Finally you can destroy the network and completely reinitialize it.
+</p>
+
+<h4>DataSet (change the data while it's loaded and initialzed):</h4>
+<input type="button" onclick="addNode()" value="add node dynamically"> <br />
+<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
+<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
+<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
+<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
+
+<h4>setOptions (change the global options):</h4>
+<input type="button" onclick="changeOptions()" value="change the global options"><br />
+
+<h4>setData (reinitialize the data): </h4>
+<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
+
+<h4>Cleanly destroy the network and restart it:</h4>
+<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+    var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
+
+    function startNetwork() {
+        // this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
+        nodeIds = [2, 3, 4, 5];
+        shadowState = false;
+
+
+        // create an array with nodes
+        nodesArray = [
+            {id: 1, label: 'Node 1'},
+            {id: 2, label: 'Node 2'},
+            {id: 3, label: 'Node 3'},
+            {id: 4, label: 'Node 4'},
+            {id: 5, label: 'Node 5'}
+        ];
+        nodes = new vis.DataSet(nodesArray);
+
+        // create an array with edges
+        edgesArray = [
+            {from: 1, to: 3},
+            {from: 1, to: 2},
+            {from: 2, to: 4},
+            {from: 2, to: 5}
+        ];
+        edges = new vis.DataSet(edgesArray);
+
+        // create a network
+        var container = document.getElementById('mynetwork');
+        var data = {
+            nodes: nodes,
+            edges: edges
+        };
+        var options = {};
+        network = new vis.Network(container, data, options);
+    }
+
+    function addNode() {
+        var newId = (Math.random() * 1e7).toString(32);
+        nodes.add({id:newId, label:"I'm new!"});
+        nodeIds.push(newId);
+    }
+
+    function changeNode1() {
+        var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
+        nodes.update([{id:1, color:{background:newColor}}]);
+    }
+
+    function removeRandomNode() {
+        var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
+        nodes.remove({id:randomNodeId});
+
+        var index = nodeIds.indexOf(randomNodeId);
+        nodeIds.splice(index,1);
+    }
+
+    function changeOptions() {
+        shadowState = !shadowState;
+        network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
+    }
+
+    function resetAllNodes() {
+        nodes.clear();
+        edges.clear();
+        nodes.add(nodesArray);
+        edges.add(edgesArray);
+    }
+
+    function resetAllNodesStabilize() {
+        resetAllNodes();
+        network.stabilize();
+    }
+
+    function setTheData() {
+        nodes = new vis.DataSet(nodesArray);
+        edges = new vis.DataSet(edgesArray);
+        network.setData({nodes:nodes, edges:edges})
+    }
+
+    function resetAll() {
+        if (network !== null) {
+            network.destroy();
+            network = null;
+        }
+        startNetwork();
+    }
+
+    startNetwork();
+</script>
+
+<script src="../../googleAnalytics.js"></script>
+</body>
+</html>