visjs-network
Version:
A dynamic, browser-based network visualization library.
150 lines (149 loc) • 3.53 kB
HTML
<html>
<head>
<title>Network | DOT edge styles</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src='../../../../dist/vis.js'></script>
<link href='../../../../dist/vis-network.min.css' rel='stylesheet' type='text/css' />
<style type='text/css'>
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
width: 40%;
height: 80%;
top: 0;
left: 0;
}
#right {
width: 60%;
height: 100%;
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw, #reset {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id='header'>
<h1>DOT edge styles</h1>
<div>
<p>
Example of edge styles support.
</p>
<table border=1>
<tr>
<th>Attributes</th><th>Description</th><th>Possible Values</th><th>Default Value</th>
</tr>
<tr>
<td align='center'>label</td>
<td>Text displayed on the edge</td>
<td></td>
<td></td>
</tr>
<tr>
<td align='center'>color</td>
<td>Edge color</td>
<td></td>
<td></td>
</tr>
<tr>
<td align='center'>style</td>
<td>Edge style</td>
<td>'solid', 'dashed', 'dotted'</td>
<td></td>
</tr>
<tr>
<td align='center'>width or penwidth</td>
<td>Edge width</td>
<td></td>
<td></td>
</tr>
<tr>
<td align='center'>dir</td>
<td>Arrow direction</td>
<td>'forward', 'both', 'back', 'none'</td>
<td>'forward'</td>
</tr>
<tr>
<td align='center'>arrowhead</td>
<td>Arrow tail style</td>
<td>'dot', 'box', 'crow', 'curve', 'icurve', 'normal', 'inv', 'diamond', 'tee', 'vee'</td>
<td></td>
</tr>
<tr>
<td align='center'>arrowtail</td>
<td>Arrow head style</td>
<td>'dot', 'box', 'crow', 'curve', 'icurve', 'normal', 'inv', 'diamond', 'tee', 'vee'</td>
<td></td>
</tr>
</table>
</div>
</div>
<div id='contents'>
<div id='left'>
<textarea id='data'>
</textarea>
<div>
<button id='draw' title='Draw the DOT graph (Ctrl+Enter)'>Draw</button>
<button id='reset' title='Reset the DOT graph'>Reset</button>
</div>
<div>
<span id='error'></span>
</div>
</div>
<div id='right'>
<div id='mynetwork'></div>
</div>
</div>
<script src='./index.js' type='text/javascript'></script>
</body>
</html>