visjs-network
Version:
A dynamic, browser-based network visualization library.
72 lines (71 loc) • 1.97 kB
HTML
<html>
<head>
<title>Network | Dynamic filtering</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;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
</style>
</head>
<body>
<h1>Dynamic filtering</h1>
<p>
With <a
href="https://visjs.github.io/vis-data/data/dataview.html"
target="_blank">
<code>vis.DataView</code></a>
on top of vis.DataSet you can filter displayed data without modifying the data source.
</p>
<label>
Filter nodes
<select id='nodeFilterSelect'>
<option value=''>All characters</option>
<option value='kid'>kids</option>
<option value='adult'>adults</option>
<option value='male'>male</option>
<option value='female'>female</option>
</select>
</label>
<br>
<br>
<label>
Filter edges
<div>
<label>
<input type='checkbox' name='edgesFilter' value='parent' checked></input>
Is parent of
</label>
</div>
<div>
<label>
<input type='checkbox' name='edgesFilter' value='teacher' checked></input>
Is teacher of
</label>
</div>
<div>
<label>
<input type='checkbox' name='edgesFilter' value='friend' checked></input>
Is friend of
</label>
</div>
</label>
<br></br>
<div id="mynetwork"></div>
<script src="./index.js" type="text/javascript"></script>
</body>
</html>