vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

212 lines
4.9 KiB

<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
}
#frame {
width: 100%;
height: 99%;
}
#frame td {
padding: 10px;
height: 100%;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
}
#mynetwork {
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
display: none;
}
</style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="drawExample('example1')">
<table id="frame">
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<div>
<a href="javascript: drawExample('example1')">example 1</a>
<a href="javascript: drawExample('example2')">example 2</a>
<a href="javascript: drawExample('example3')">example 3</a>
</div>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<textarea id="data"></textarea>
</td>
<td>
<div id="mynetwork"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var network = null;
var data = null;
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the network when window resizes
window.onresize = function () {
network.redraw()
};
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
// parse and draw the data
function draw () {
destroy();
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = {
dot: txtData.value
};
// create a network
var container = document.getElementById('mynetwork');
var options = {};
network = new vis.Network(container, data, options);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
}
}
// show an error message
txtError.innerHTML = err.toString();
}
}
/**
* Draw an example
* @param {String} id HTML id of the textarea containing the example code
*/
function drawExample(id) {
txtData.value = document.getElementById(id).value;
draw();
}
</script>
<textarea id="example1" class="example">
digraph {
node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontColor=white,
color=red,
]
}
</textarea>
<textarea id="example2" class="example">
digraph topology
{
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}
</textarea>
<textarea id="example3" class="example">
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}
</textarea>
</body>
</html>