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.
86 lines
2.9 KiB
86 lines
2.9 KiB
<html>
|
|
<head><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>
|
|
<title>Network | Graphviz Gallery</title>
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
|
|
|
<style type="text/css">
|
|
p {
|
|
width: 600px;
|
|
}
|
|
html, body, select {
|
|
font: 11pt arial;
|
|
}
|
|
#mygraph {
|
|
width: 100%;
|
|
height: 600px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
if (location.href.substr(0, 5) == 'file:') {
|
|
document.write(
|
|
'<p style="color: red;">' +
|
|
'Error: Cannot fetch the example data because of security ' +
|
|
'restrictions in JavaScript. Run the example from a server ' +
|
|
'instead of as a local file to resolve this problem. ' +
|
|
'Alternatively, you can load DOT graphs in ' +
|
|
'the <a href="../15_dot_language_playground.html" ' +
|
|
'style="color:red;">playground</a>.' +
|
|
'</p>');
|
|
}
|
|
</script>
|
|
|
|
<p>
|
|
The following examples are unmodified copies from the
|
|
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
|
|
</p>
|
|
<p>
|
|
Note that some style attributes of Graphviz are not supported by vis.js,
|
|
and that vis.js offers options not supported by Graphviz (which could make
|
|
some examples look much nicer).
|
|
</p>
|
|
|
|
<p>
|
|
<label for="url">Select an example:</label>
|
|
<select id="url" onchange="loadData()">
|
|
<option value="data/fsm.gv.txt">fsm</option>
|
|
<option value="data/hello.gv.txt">hello</option>
|
|
<option value="data/process.gv.txt">process</option>
|
|
<option value="data/siblings.gv.txt">siblings</option>
|
|
<option value="data/softmaint.gv.txt">softmaint</option>
|
|
<option value="data/traffic_lights.gv.txt">traffic_lights</option>
|
|
<option value="data/transparency.gv.txt">transparency</option>
|
|
<option value="data/twopi2.gv.txt">twopi2</option>
|
|
<option value="data/unix.gv.txt">unix</option>
|
|
<option value="data/world.gv.txt">world</option>
|
|
</select>
|
|
</p>
|
|
|
|
<div id="mygraph"></div>
|
|
<script type="text/javascript">
|
|
var container = document.getElementById('mygraph');
|
|
var url = document.getElementById('url');
|
|
var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
|
|
|
|
function loadData () {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: url.value
|
|
}).done(function(data) {
|
|
network.setOptions({
|
|
stabilize: false
|
|
});
|
|
network.setData( {
|
|
dot: data
|
|
});
|
|
});
|
|
}
|
|
loadData();
|
|
</script>
|
|
</body>
|
|
</html>
|