visjs-network
Version:
A dynamic, browser-based network visualization library.
41 lines (40 loc) • 1.74 kB
HTML
<html>
<head>
<title>Network | Dynamic Data</title>
<script type='text/javascript' src='../../../dist/vis.js'></script>
<link href='../../../dist/vis-network.min.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>
<body>
<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 src='./index.js' type='text/javascript'></script>
</body>
</html>