200 lines
4.6 KiB
HTML
200 lines
4.6 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
|
<title>RGraph - Graph Operations</title>
|
||
|
|
|
||
|
|
<!-- CSS Files -->
|
||
|
|
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||
|
|
<link type="text/css" href="../css/RGraph.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||
|
|
|
||
|
|
<!-- JIT Library File -->
|
||
|
|
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||
|
|
|
||
|
|
<!-- Example File -->
|
||
|
|
<script language="javascript" type="text/javascript" src="example3.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="init();">
|
||
|
|
<div id="container">
|
||
|
|
|
||
|
|
<div id="left-container">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="text">
|
||
|
|
<h4>
|
||
|
|
Graph Operations
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
You can do the following operations with the RGraph<br /><br />
|
||
|
|
1.- Removing subtrees or nodes<br /><br />
|
||
|
|
2.- Removing edges<br /><br />
|
||
|
|
3.- Adding another graph, also called sum<br /><br />
|
||
|
|
4.- Morphing (or transforming) the graph into another one<br />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="id-list"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="center-container">
|
||
|
|
<div id="infovis"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="right-container">
|
||
|
|
|
||
|
|
<h4>Global Options</h4>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
duration:
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<select id="select-duration">
|
||
|
|
<option>1000</option>
|
||
|
|
<option>1500</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
fps:
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<select id="select-fps">
|
||
|
|
<option>10</option>
|
||
|
|
<option selected="selected">30</option>
|
||
|
|
<option>60</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
hide labels:
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="checkbox" checked="checked" id="hide-labels" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>1.- Remove Nodes</h4>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
type:
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<select id="select-type-remove-nodes">
|
||
|
|
<option>fade:seq</option>
|
||
|
|
<option>fade:con</option>
|
||
|
|
<option>iter</option>
|
||
|
|
<option>replot</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Remove" id="remove-nodes" />
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>2.- Remove Edges</h4>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
type:
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<select id="select-type-remove-edges">
|
||
|
|
<option>fade:seq</option>
|
||
|
|
<option>fade:con</option>
|
||
|
|
<option>iter</option>
|
||
|
|
<option>replot</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Remove" id="remove-edges" />
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>3.- Add Graph (Sum)</h4>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
type:
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<select id="select-type-sum">
|
||
|
|
<option>fade:seq</option>
|
||
|
|
<option>fade:con</option>
|
||
|
|
<option>replot</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Sum" id="sum" />
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>4.- Morph</h4>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
type:
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<select id="select-type-morph">
|
||
|
|
<option>fade:con</option>
|
||
|
|
<option>replot</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Morph" id="morph" />
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="log"></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|