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
Unified 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> <script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <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> <body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<script type="text/javascript"> <script type="text/javascript">

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

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

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

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

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

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

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

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

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

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

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

@ -14,23 +14,17 @@
border: 1px solid lightgray; border: 1px solid lightgray;
} }
table.legend_table { 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> </style>
@ -52,51 +46,23 @@
function draw() { function draw() {
destroy(); 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 // create a network
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
@ -105,7 +71,10 @@
edges: edges edges: edges
}; };
var options = { var options = {
interaction:{navigationButtons: true},
interaction: {
navigationButtons: true,
keyboard: true
}
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
@ -115,7 +84,8 @@
}); });
} }
</script> </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();"> <body onload="draw();">
<h2>Navigation controls and keyboad navigation</h2> <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 /> 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"> <table class="legend_table">
<tr> <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>
<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>
<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> </tr>
</table> </table>
<br /> <br />
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. 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> 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. The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</div> </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> <div id="mynetwork"></div>

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

@ -114,7 +114,9 @@
edges: edges edges: edges
}; };
var options = { var options = {
stabilize: false,
physics: {
stabilization: false
},
manipulation: true manipulation: true
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
@ -148,7 +150,8 @@
} }
} }
</script> </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();"> <body onload="draw();">
<h2>Editing the dataset</h2> <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> <html>
<head> <head>
<title>Network | Multiline text</title>
<title>Network | Les miserables</title>
<style type="text/css"> <style type="text/css">
#mynetwork { #mynetwork {
@ -18,83 +18,83 @@
function draw() { function draw() {
// create some nodes // create some nodes
var 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 // create some edges
@ -361,14 +361,26 @@
nodes: nodes, nodes: nodes,
edges: edges 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); var network = new vis.Network(container, data, options);
} }
</script> </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()"> <body onload="draw()">
<p>
Relations between the characters of "Les miserables".
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
</body> </body>
</html> </html>

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

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

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

@ -141,7 +141,8 @@
} }
</script> </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();"> <body onload="draw();">
<h2>Hierarchical Layout - User-defined</h2> <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. 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. If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
</div> </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> <div id="mynetwork"></div>
@ -165,7 +167,7 @@
btnUD.onclick = function() { btnUD.onclick = function() {
directionInput.value = "UD"; directionInput.value = "UD";
draw(); draw();
}
};
var btnDU = document.getElementById("btn-DU"); var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function() { btnDU.onclick = function() {
directionInput.value = "DU"; 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="09_scaling.html">09_scaling.html</a></p>
<p><a href="10_multiline_text.html">10_multiline_text.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="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="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="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> <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>

Write Preview
Loading…
Cancel
Save