Browse Source

added groups docs

flowchartTest
Alex de Mulder 9 years ago
parent
commit
5734676b45
3 changed files with 123 additions and 3 deletions
  1. +118
    -0
      docs/network/groups.html
  2. +1
    -1
      docs/network/new_network.html
  3. +4
    -2
      examples/network/01_basic_usage.html

+ 118
- 0
docs/network/groups.html View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en"><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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" HREF="favicon.ico">
<title>vis.js - A dynamic, browser based visualization library.</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript">
smoothScroll.init();
</script>
<style>
td.properties {
width:350px;
}
</style>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="../index.html#modules">Modules</a></li>
<li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="../img/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="../blog.html">Blog</a></li>
<li><a href="../index.html#download_install">Download</a></li>
<li><a href="../showcase/index.html">Showcase</a></li>
<li><a href="../index.html#contribute">Contribute</a></li>
<li><a href="../featureRequests.html">Feature requests</a></li>
<li><a href="../index.html#licenses">License</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="container full">
<h1>Network - groups</h1>
<p>Handles the HTML part of the canvas.</p>
<h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<table class="moduleTable">
<tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr>
<tr><td>useDefaultGroups</td><td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>If your nodes have groups defined that are not in the Groups module, the module loops over the groups it does have, allocating one for each unknown group. When all are used, it goes back to the first group. By setting this to false, the default groups will not be used in this cycle.</td></tr>
<tr><td>group*</td><td class="mid">Object</td><td class="mid"><code></code></td><td>
You can add multiple groups containing styling information that applies to a certain subset of groups. All options described in the <a href="./nodes.html">nodes module</a> that make sense can be used here (you're not going to set the same id or x,y position for a group of nodes).
Example:
<pre class="code">
var nodes = [
{id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
]
var options = {
groups: {
myGroup: {color:{background:'red'}, borderWidth:3}
}
}
</pre>
*) the option is not called group, as shown by the example but can by any custom id, except for 'useDefaultGroups'.
<td></tr>
</table>
<h3>Methods</h3>
<p>The groups module has no methods.</p>
<h3>Events</h3>
<p>The groups module has no events.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>

+ 1
- 1
docs/network/new_network.html View File

@ -79,7 +79,7 @@
<tr><td width="120px" class="gren"><a href="./canvas.html">canvas</a></td> <td>Handles the HTML part of the network.</td></tr>
<tr><td class="gren"><a href="./configure.html">configure</a></td> <td>Generates an interactive option editor with filtering.</td></tr>
<tr><td class="gren"><a href="./rendering.html">rendering</a></td> <td>Handles the rendering aspect of vis. It governs the render loop, it draws the nodes and edges and provides events to allow users to hook into the drawing.</td></tr>
<tr><td class="blue"><a href="./groups.html">groups</a></td> <td>Contains the groups and some options on how to handle nodes with non-existing groups.</td></tr>
<tr><td class="gren"><a href="./groups.html">groups</a></td> <td>Contains the groups and some options on how to handle nodes with non-existing groups.</td></tr>
<tr><td class="gren"><a href="./nodes.html">nodes</a></td> <td>Handles the creation and deletion of nodes and contains the global node options and styles.</td></tr>
<tr><td class="gren"><a href="./edges.html">edges</a></td> <td>Handles the creation and deletion of edges and contains the global edge options and styles.</td></tr>
<tr><td class="gren"><a href="./layout.html">layout</a></td> <td>Governs the initial and hierarchical positioning.</td></tr>

+ 4
- 2
examples/network/01_basic_usage.html View File

@ -21,7 +21,7 @@
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', value:3, title:'hello world'},
{id: 2, label: 'Node 2', value:1},
{id: 2, label: 'Node 2', value:1, group:'bla'},
{id: 3, label: 'Node 3', value:5},
{id: 4, label: 'Node 4', value:3},
{id: 5, label: 'Node 5', value:2}
@ -44,7 +44,9 @@
edges: edges
};
var options = {
manipulation:true
manipulation:true,
groups:{'bla':{color:{background:'red'}, borderWidth:5}}
// physics:{stabilization:true}
}
var network = new vis.Network(container, data, options);

Loading…
Cancel
Save