jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Updated exampled up to 24

flowchartTest
jos 9 years ago
parent
de5a9a76e6
commit
034d63ce59
13 changed files with 273 additions and 205 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +69
    -0
      examples/network/12_arrows.html
  2. +5
    -1
      examples/network/14_dot_language.html
  3. +9
    -2
      examples/network/15_dot_language_playground.html
  4. +2
    -1
      examples/network/16_dynamic_data.html
  5. +9
    -5
      examples/network/17_network_info.html
  6. +2
    -1
      examples/network/18_fully_random_nodes_clustering.html
  7. +2
    -1
      examples/network/19_scale_free_graph_clustering.html
  8. +56
    -96
      examples/network/20_navigation.html
  9. +5
    -2
      examples/network/21_data_manipulation.html
  10. +93
    -81
      examples/network/22_les_miserables.html
  11. +10
    -7
      examples/network/23_hierarchical_layout.html
  12. +10
    -8
      examples/network/24_hierarchical_layout_userdefined.html
  13. +1
    -0
      examples/network/index.html

+ 69
- 0
examples/network/12_arrows.html View File

@ -0,0 +1,69 @@
<!doctype html>
<html>
<head>
<title>Network | Arrows</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Called on page load
function draw() {
var nodes = [
{id: 1, label: 'arrows\nexamples'},
{id: 2, label: 'none'},
{id: 3, label: '"to"'},
{id: 4, label: '"from, to"'},
{id: 5, label: '"middle"'},
{id: 6, label: '{to: {scaleFactor: 2}}'}
];
var edges = [
{from: 1, to: 2},
{from: 1, to: 3, arrows: 'to'},
{from: 1, to: 4, arrows: 'from, to'},
{from: 1, to: 5, arrows: 'middle'},
{from: 1, to: 6, arrows: {to: {scaleFactor: 2}}}
];
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
},
physics: {
barnesHut: {
springLength: 150
},
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
This example shows the different options for arrows.
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 5
- 1
examples/network/14_dot_language.html View File

@ -4,8 +4,12 @@
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">

+ 9
- 2
examples/network/15_dot_language_playground.html View File

@ -48,7 +48,8 @@
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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="drawExample('example1')">
<table id="frame">
@ -113,7 +114,13 @@
// create a network
var container = document.getElementById('mynetwork');
var options = {};
var options = {
physics: {
barnesHut: {
springLength: 200
}
}
};
network = new vis.Network(container, data, options);
}
catch (err) {

+ 2
- 1
examples/network/16_dynamic_data.html View File

@ -168,7 +168,8 @@
network = new vis.Network(container, data, options);
});
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body>

+ 9
- 5
examples/network/17_network_info.html View File

@ -111,11 +111,14 @@
edges: edges
};
var options = {
stabilize: false, // stabilize positions before displaying
nodes: {
radiusMin: 16,
radiusMax: 32,
fontColor: BLACK
scaling: {
min: 16,
max: 32
},
font: {
color: BLACK
}
},
edges: {
color: GRAY
@ -146,7 +149,8 @@
network = new vis.Network(container, data, options);
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()">

+ 2
- 1
examples/network/18_fully_random_nodes_clustering.html View File

@ -77,7 +77,8 @@
});
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Clustering - Fully random network</h2>

+ 2
- 1
examples/network/19_scale_free_graph_clustering.html View File

@ -101,7 +101,8 @@
});
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Clustering - Scale-Free-Network</h2>

+ 56
- 96
examples/network/20_navigation.html View File

@ -14,23 +14,17 @@
border: 1px solid lightgray;
}
table.legend_table {
font-size: 11px;
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
border-collapse: collapse;
}
table.legend_table,td {
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
padding: 2px;
table.legend_table td,
table.legend_table th {
border: 1px solid #d3d3d3;
padding: 10px;
}
div.table_content {
width:80px;
text-align:center;
}
div.table_description {
width:100px;
table.legend_table td {
text-align: center;
width:110px;
}
</style>
@ -52,51 +46,23 @@
function draw() {
destroy();
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 1},
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
@ -105,7 +71,10 @@
edges: edges
};
var options = {
interaction:{navigationButtons: true},
interaction: {
navigationButtons: true,
keyboard: true
}
};
network = new vis.Network(container, data, options);
@ -115,7 +84,8 @@
});
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Navigation controls and keyboad navigation</h2>
@ -123,51 +93,41 @@
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
<table class="legend_table">
<tr>
<td>Icons: </td>
<td><div class="table_content"><img src="../../dist/img/network/upArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/downArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/leftArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/rightArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/plus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/minus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/zoomExtends.png" /> </div></td>
<th>Icons: </th>
<td><img src="../../dist/img/network/upArrow.png" /> </td>
<td><img src="../../dist/img/network/downArrow.png" /> </td>
<td><img src="../../dist/img/network/leftArrow.png" /> </td>
<td><img src="../../dist/img/network/rightArrow.png" /> </td>
<td><img src="../../dist/img/network/plus.png" /> </td>
<td><img src="../../dist/img/network/minus.png" /> </td>
<td><img src="../../dist/img/network/zoomExtends.png" /> </td>
</tr>
<tr>
<td><div class="table_description">Keyboard shortcuts:</div></td>
<td><div class="table_content">Up arrow</div></td>
<td><div class="table_content">Down arrow</div></td>
<td><div class="table_content">Left arrow</div></td>
<td><div class="table_content">Right arrow</div></td>
<td><div class="table_content">=<br />[<br />Page up</div></td>
<td><div class="table_content">-<br />]<br />Page down</div></td>
<td><div class="table_content">None</div></td>
<th>Keyboard shortcuts:</th>
<td><div>Up arrow</div></td>
<td><div>Down arrow</div></td>
<td><div>Left arrow</div></td>
<td><div>Right arrow</div></td>
<td><div>=<br />[<br />Page up</div></td>
<td><div>-<br />]<br />Page down</div></td>
<td><div>None</div></td>
</tr>
<tr>
<td><div class="table_description">Description:</div></td>
<td><div class="table_content">Move up</div></td>
<td><div class="table_content">Move down</div></td>
<td><div class="table_content">Move left</div></td>
<td><div class="table_content">Move right</div></td>
<td><div class="table_content">Zoom in</div></td>
<td><div class="table_content">Zoom out</div></td>
<td><div class="table_content">Zoom extent</div></td>
<th>Description:</th>
<td>Move up</td>
<td>Move down</td>
<td>Move left</td>
<td>Move right</td>
<td>Zoom in</td>
<td>Zoom out</td>
<td>Zoom extent</td>
</tr>
</table>
<br />
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u>
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>
<div id="mynetwork"></div>

+ 5
- 2
examples/network/21_data_manipulation.html View File

@ -114,7 +114,9 @@
edges: edges
};
var options = {
stabilize: false,
physics: {
stabilization: false
},
manipulation: true
};
network = new vis.Network(container, data, options);
@ -148,7 +150,8 @@
}
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Editing the dataset</h2>

+ 93
- 81
examples/network/22_les_miserables.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>
<html>
<head>
<title>Network | Multiline text</title>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
@ -18,83 +18,83 @@
function draw() {
// create some nodes
var nodes = [
{id:0,"labelHidden":"Myriel","group":1},
{id:1,"labelHidden":"Napoleon","group":1},
{id:2,"labelHidden":"Mlle.Baptistine","group":1},
{id:3,"labelHidden":"Mme.Magloire","group":1},
{id:4,"labelHidden":"CountessdeLo","group":1},
{id:5,"labelHidden":"Geborand","group":1},
{id:6,"labelHidden":"Champtercier","group":1},
{id:7,"labelHidden":"Cravatte","group":1},
{id:8,"labelHidden":"Count","group":1},
{id:9,"labelHidden":"OldMan","group":1},
{id:10,"labelHidden":"Labarre","group":2},
{id:11,"labelHidden":"Valjean","group":2},
{id:12,"labelHidden":"Marguerite","group":3},
{id:13,"labelHidden":"Mme.deR","group":2},
{id:14,"labelHidden":"Isabeau","group":2},
{id:15,"labelHidden":"Gervais","group":2},
{id:16,"labelHidden":"Tholomyes","group":3},
{id:17,"labelHidden":"Listolier","group":3},
{id:18,"labelHidden":"Fameuil","group":3},
{id:19,"labelHidden":"Blacheville","group":3},
{id:20,"labelHidden":"Favourite","group":3},
{id:21,"labelHidden":"Dahlia","group":3},
{id:22,"labelHidden":"Zephine","group":3},
{id:23,"labelHidden":"Fantine","group":3},
{id:24,"labelHidden":"Mme.Thenardier","group":4},
{id:25,"labelHidden":"Thenardier","group":4},
{id:26,"labelHidden":"Cosette","group":5},
{id:27,"labelHidden":"Javert","group":4},
{id:28,"labelHidden":"Fauchelevent","group":0},
{id:29,"labelHidden":"Bamatabois","group":2},
{id:30,"labelHidden":"Perpetue","group":3},
{id:31,"labelHidden":"Simplice","group":2},
{id:32,"labelHidden":"Scaufflaire","group":2},
{id:33,"labelHidden":"Woman1","group":2},
{id:34,"labelHidden":"Judge","group":2},
{id:35,"labelHidden":"Champmathieu","group":2},
{id:36,"labelHidden":"Brevet","group":2},
{id:37,"labelHidden":"Chenildieu","group":2},
{id:38,"labelHidden":"Cochepaille","group":2},
{id:39,"labelHidden":"Pontmercy","group":4},
{id:40,"labelHidden":"Boulatruelle","group":6},
{id:41,"labelHidden":"Eponine","group":4},
{id:42,"labelHidden":"Anzelma","group":4},
{id:43,"labelHidden":"Woman2","group":5},
{id:44,"labelHidden":"MotherInnocent","group":0},
{id:45,"labelHidden":"Gribier","group":0},
{id:46,"labelHidden":"Jondrette","group":7},
{id:47,"labelHidden":"Mme.Burgon","group":7},
{id:48,"labelHidden":"Gavroche","group":8},
{id:49,"labelHidden":"Gillenormand","group":5},
{id:50,"labelHidden":"Magnon","group":5},
{id:51,"labelHidden":"Mlle.Gillenormand","group":5},
{id:52,"labelHidden":"Mme.Pontmercy","group":5},
{id:53,"labelHidden":"Mlle.Vaubois","group":5},
{id:54,"labelHidden":"Lt.Gillenormand","group":5},
{id:55,"labelHidden":"Marius","group":8},
{id:56,"labelHidden":"BaronessT","group":5},
{id:57,"labelHidden":"Mabeuf","group":8},
{id:58,"labelHidden":"Enjolras","group":8},
{id:59,"labelHidden":"Combeferre","group":8},
{id:60,"labelHidden":"Prouvaire","group":8},
{id:61,"labelHidden":"Feuilly","group":8},
{id:62,"labelHidden":"Courfeyrac","group":8},
{id:63,"labelHidden":"Bahorel","group":8},
{id:64,"labelHidden":"Bossuet","group":8},
{id:65,"labelHidden":"Joly","group":8},
{id:66,"labelHidden":"Grantaire","group":8},
{id:67,"labelHidden":"MotherPlutarch","group":9},
{id:68,"labelHidden":"Gueulemer","group":4},
{id:69,"labelHidden":"Babet","group":4},
{id:70,"labelHidden":"Claquesous","group":4},
{id:71,"labelHidden":"Montparnasse","group":4},
{id:72,"labelHidden":"Toussaint","group":5},
{id:73,"labelHidden":"Child1","group":10},
{id:74,"labelHidden":"Child2","group":10},
{id:75,"labelHidden":"Brujon","group":4},
{id:76,"labelHidden":"Mme.Hucheloup","group":8}
{id:0,"label":"Myriel","group":1},
{id:1,"label":"Napoleon","group":1},
{id:2,"label":"Mlle.Baptistine","group":1},
{id:3,"label":"Mme.Magloire","group":1},
{id:4,"label":"CountessdeLo","group":1},
{id:5,"label":"Geborand","group":1},
{id:6,"label":"Champtercier","group":1},
{id:7,"label":"Cravatte","group":1},
{id:8,"label":"Count","group":1},
{id:9,"label":"OldMan","group":1},
{id:10,"label":"Labarre","group":2},
{id:11,"label":"Valjean","group":2},
{id:12,"label":"Marguerite","group":3},
{id:13,"label":"Mme.deR","group":2},
{id:14,"label":"Isabeau","group":2},
{id:15,"label":"Gervais","group":2},
{id:16,"label":"Tholomyes","group":3},
{id:17,"label":"Listolier","group":3},
{id:18,"label":"Fameuil","group":3},
{id:19,"label":"Blacheville","group":3},
{id:20,"label":"Favourite","group":3},
{id:21,"label":"Dahlia","group":3},
{id:22,"label":"Zephine","group":3},
{id:23,"label":"Fantine","group":3},
{id:24,"label":"Mme.Thenardier","group":4},
{id:25,"label":"Thenardier","group":4},
{id:26,"label":"Cosette","group":5},
{id:27,"label":"Javert","group":4},
{id:28,"label":"Fauchelevent","group":0},
{id:29,"label":"Bamatabois","group":2},
{id:30,"label":"Perpetue","group":3},
{id:31,"label":"Simplice","group":2},
{id:32,"label":"Scaufflaire","group":2},
{id:33,"label":"Woman1","group":2},
{id:34,"label":"Judge","group":2},
{id:35,"label":"Champmathieu","group":2},
{id:36,"label":"Brevet","group":2},
{id:37,"label":"Chenildieu","group":2},
{id:38,"label":"Cochepaille","group":2},
{id:39,"label":"Pontmercy","group":4},
{id:40,"label":"Boulatruelle","group":6},
{id:41,"label":"Eponine","group":4},
{id:42,"label":"Anzelma","group":4},
{id:43,"label":"Woman2","group":5},
{id:44,"label":"MotherInnocent","group":0},
{id:45,"label":"Gribier","group":0},
{id:46,"label":"Jondrette","group":7},
{id:47,"label":"Mme.Burgon","group":7},
{id:48,"label":"Gavroche","group":8},
{id:49,"label":"Gillenormand","group":5},
{id:50,"label":"Magnon","group":5},
{id:51,"label":"Mlle.Gillenormand","group":5},
{id:52,"label":"Mme.Pontmercy","group":5},
{id:53,"label":"Mlle.Vaubois","group":5},
{id:54,"label":"Lt.Gillenormand","group":5},
{id:55,"label":"Marius","group":8},
{id:56,"label":"BaronessT","group":5},
{id:57,"label":"Mabeuf","group":8},
{id:58,"label":"Enjolras","group":8},
{id:59,"label":"Combeferre","group":8},
{id:60,"label":"Prouvaire","group":8},
{id:61,"label":"Feuilly","group":8},
{id:62,"label":"Courfeyrac","group":8},
{id:63,"label":"Bahorel","group":8},
{id:64,"label":"Bossuet","group":8},
{id:65,"label":"Joly","group":8},
{id:66,"label":"Grantaire","group":8},
{id:67,"label":"MotherPlutarch","group":9},
{id:68,"label":"Gueulemer","group":4},
{id:69,"label":"Babet","group":4},
{id:70,"label":"Claquesous","group":4},
{id:71,"label":"Montparnasse","group":4},
{id:72,"label":"Toussaint","group":5},
{id:73,"label":"Child1","group":10},
{id:74,"label":"Child2","group":10},
{id:75,"label":"Brujon","group":4},
{id:76,"label":"Mme.Hucheloup","group":8}
];
// create some edges
@ -361,14 +361,26 @@
nodes: nodes,
edges: edges
};
var options = {nodes: {shape:'circle'},stabilize: false};
var options = {
nodes: {
shape: 'dot',
size: 16
},
physics: {
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
Relations between the characters of "Les miserables".
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 10
- 7
examples/network/23_hierarchical_layout.html View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Network | Random nodes</title>
<title>Network | Hierarchical layout</title>
<style type="text/css">
body {
@ -101,7 +101,8 @@
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Network</h2>
@ -115,11 +116,13 @@
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
<p>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
</p>
<script language="javascript">
var directionInput = document.getElementById("direction");

+ 10
- 8
examples/network/24_hierarchical_layout_userdefined.html View File

@ -141,7 +141,8 @@
}
</script>
<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>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - User-defined</h2>
@ -149,12 +150,13 @@
This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
</div>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
<br />
<p>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
</p>
<div id="mynetwork"></div>
@ -165,7 +167,7 @@
btnUD.onclick = function() {
directionInput.value = "UD";
draw();
}
};
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function() {
directionInput.value = "DU";

+ 1
- 0
examples/network/index.html View File

@ -22,6 +22,7 @@
<p><a href="09_scaling.html">09_scaling.html</a></p>
<p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
<p><a href="11_styling.html">11_styling.html</a></p>
<p><a href="12_arrows.html">12_arrows.html</a></p>
<p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
<p><a href="14_dot_language.html">14_dot_language.html</a></p>
<p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>

Write Preview
Loading…
Cancel
Save