Browse Source

Merge remote-tracking branch 'origin/v4' into v4

flowchartTest
Alex de Mulder 9 years ago
parent
commit
7c6979c0fc
37 changed files with 3319 additions and 1199 deletions
  1. +0
    -228
      docs/css/newdocs.css
  2. +83
    -0
      docs/css/old_style.css
  3. +165
    -55
      docs/css/style.css
  4. +1002
    -0
      docs/dataset/dataset.html
  5. +392
    -0
      docs/dataset/dataview.html
  6. +222
    -209
      docs/graph2d/index.html
  7. +732
    -0
      docs/graph3d/index.html
  8. +2
    -2
      docs/index.html
  9. +14
    -15
      docs/network/configure.html
  10. +108
    -108
      docs/network/edges.html
  11. +10
    -10
      docs/network/groups.html
  12. +91
    -88
      docs/network/index.html
  13. +19
    -19
      docs/network/interaction.html
  14. +9
    -9
      docs/network/layout.html
  15. +12
    -12
      docs/network/manipulation.html
  16. +118
    -118
      docs/network/nodes.html
  17. +46
    -48
      docs/network/physics.html
  18. +1
    -1
      docs/old/dataset.html
  19. +1
    -1
      docs/old/dataview.html
  20. +4
    -4
      docs/old/graph3d.html
  21. +3
    -3
      docs/old/old_network/canvas.html
  22. +2
    -2
      docs/old/old_network/clustering.html
  23. +3
    -3
      docs/old/old_network/rendering.html
  24. +2
    -2
      docs/old/old_network/selection.html
  25. +2
    -2
      docs/old/old_network/view.html
  26. +209
    -208
      docs/timeline/index.html
  27. +1
    -1
      examples/index.html
  28. +1
    -1
      examples/timeline/index.html
  29. +8
    -4
      lib/DataSet.js
  30. +6
    -6
      lib/network/Network.js
  31. +3
    -3
      lib/shared/ColorPicker.js
  32. +14
    -12
      lib/shared/Configurator.js
  33. +3
    -4
      lib/timeline/Core.js
  34. +16
    -8
      lib/timeline/Graph2d.js
  35. +8
    -6
      lib/timeline/Timeline.js
  36. +5
    -5
      lib/timeline/optionsGraph2d.js
  37. +2
    -2
      lib/timeline/optionsTimeline.js

+ 0
- 228
docs/css/newdocs.css View File

@ -1,228 +0,0 @@
html {
height:100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
/*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/
font-size:16px;
line-height: 1.5em;
background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
}
h1, h2, h3, h4, h5, h6 {
margin: 40px 0 20px 0;
}
ul {
margin-top: 0.7em;
margin-bottom: 0.7em;
}
p {
margin: 20px 0;
}
img.icon {
position:relative;
top:-2px;
}
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
font-size:16px;
}
div.blogHeader {
margin-left:auto;
margin-right:auto;
text-align:center;
width:910px;
padding: 0px 30px 0px 30px;
margin-top:-150px;
color:#ffffff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
margin-bottom:60px;
}
div.full {
min-height:100%;
box-shadow:0 2px 10px rgba(0,0,0,0.4);
padding: 20px 10px 40px 10px;
background-color:#ffffff;
}
@media (min-width: 768px) {
div.full {
padding: 40px 40px 80px 40px;
}
}
@media (min-width: 992px) {
div.full {
padding: 80px 80px 160px 80px;
}
}
table.moduleTable {
}
table.moduleTable th,
table.moduleTable td {
padding: 5px 15px;
border: 1px solid #dddddd;
}
table.moduleTable th {
background-color: #f5f5f5;
}
table.moduleTable td {
vertical-align: top;
}
/* TODO: cleanup */
/*tr.header {*/
/*color: #1f3350;*/
/*background-color: #cccccc;*/
/*border-bottom:1px solid #999999 !important;*/
/*font-size:16px;*/
/*font-style:italic;*/
/*}*/
td.mid {
background-color: #f5f5f5;
font-style:italic;
}
/*td.properties {*/
/*width:150px;*/
/*}*/
/*p {*/
/*max-width:1000px;*/
/*}*/
/*pre.code {*/
/*padding:2px 4px;*/
/*font-size:90%;*/
/*color: #444444;*/
/*background-color:#f9f2f4;*/
/*border-radius:4px;*/
/*border:0;*/
/*}*/
pre {
margin: 20px 0;
}
/*pre.top {*/
/*margin-left:20px;*/
/*}*/
tr.hidden {
max-height:0;
/*max-height: 0;*/
overflow: hidden;
}
tr.visible {
/* Set our transitions up. */
-webkit-animation:
fadeIn 250ms ease-in;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
span.caret {
opacity: 0.5;
}
span.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 0.5;
vertical-align: top;
width: 0;
margin-left:5px;
margin-top:6px;
}
tr.toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
tr.toggle.collapsible {
background-color: #f5f5f5;
border-left: 3px solid #89b3ff;
}
td.indent {
padding-left:25px !important;
}
td.indent2 {
padding-left:50px !important;
}
/* TODO: cleanup */
/*td.name {*/
/*width:230px;*/
/*}*/
/*td.nameSmall {*/
/*width:150px;*/
/*}*/
/*td.type {*/
/*width: 110px;*/
/*}*/
/*td.default {*/
/*width:60px;*/
/*}*/
/*td.eventProperties {*/
/*width:150px;*/
/*}*/
/*td.methodName {*/
/*width:250px;*/
/*}*/
pre.options {
max-width:600px;
}
pre.hidden {
display:none;
}

+ 83
- 0
docs/css/old_style.css View File

@ -0,0 +1,83 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
position: relative;
margin: 0 auto;
padding: 10px 10px 50px 10px;
width: 970px;
max-width: 100%;
box-sizing: border-box;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
color: #064880;
}
h3 {
font-size: 140%;
}
a > img {
border: none;
}
a {
color: #064880;
text-decoration: none;
}
a:visited {
color: #064880;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
table {
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}
p.important_note {
color: #3a6baa;
font-weight:bold;
}

+ 165
- 55
docs/css/style.css View File

@ -1,83 +1,193 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
html {
height:100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
/*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/
font-size:16px;
line-height: 1.5em;
background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
} }
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
h1, h2, h3, h4, h5, h6 {
margin: 40px 0 20px 0;
} }
#container {
position: relative;
margin: 0 auto;
padding: 10px 10px 50px 10px;
width: 970px;
max-width: 100%;
box-sizing: border-box;
ul {
margin-top: 0.7em;
margin-bottom: 0.7em;
} }
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
p {
margin: 20px 0;
} }
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
color: #064880;
img.icon {
position:relative;
top:-2px;
} }
h3 {
font-size: 140%;
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
font-size:16px;
} }
a > img {
border: none;
div.blogHeader {
margin-left:auto;
margin-right:auto;
text-align:center;
width:910px;
padding: 0px 30px 0px 30px;
margin-top:-150px;
color:#ffffff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
margin-bottom:60px;
} }
a {
color: #064880;
text-decoration: none;
div.full {
min-height:100%;
box-shadow:0 2px 10px rgba(0,0,0,0.4);
padding: 20px 10px 40px 10px;
background-color:#ffffff;
} }
a:visited {
color: #064880;
text-decoration: none;
@media (min-width: 768px) {
div.full {
padding: 40px 40px 80px 40px;
}
} }
a:hover {
color: red;
text-decoration: underline;
@media (min-width: 992px) {
div.full {
padding: 80px 80px 160px 80px;
}
} }
table { table {
border-collapse: collapse;
} }
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
table th,
table td {
padding: 5px 15px;
border: 1px solid #dddddd;
}
table th {
background-color: #f5f5f5;
}
table td {
vertical-align: top;
}
/*
The following tables are used:
- A table 'properties' with data properties. Columns: Name, Type, Required, Description
- A table 'options' with configuration options. Columns: Name, Type, Default, Description
- A table 'methods' with methods. Columns: Method, Return Type, Description
- A table 'events' with events. Columns: Name, Properties, Description
- A table 'styles' with styles. Columns: Description, Values
- A table 'datatypes' with data types. Columns: Name, Description, Examples
*/
table.properties td:nth-child(2),
table.properties td:nth-child(3),
table.options td:nth-child(2),
table.options td:nth-child(3),
table.methods td:nth-child(2),
table.methods td:nth-child(2),
table.events td:nth-child(2) {
background-color: #f5f5f5;
font-style: italic;
}
pre {
margin: 20px 0;
}
a code {
text-decoration: underline;
}
/*pre.top {*/
/*margin-left:20px;*/
/*}*/
tr.hidden {
max-height:0;
/*max-height: 0;*/
overflow: hidden;
}
tr.visible {
/* Set our transitions up. */
-webkit-animation:
fadeIn 250ms ease-in;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
span.caret {
opacity: 0.5;
}
span.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 0.5;
vertical-align: top;
width: 0;
margin-left:5px;
margin-top:6px;
}
tr.toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
tr.toggle.collapsible {
background-color: #f5f5f5;
border-left: 3px solid #89b3ff;
}
td.indent {
padding-left:25px !important;
}
td.indent2 {
padding-left:50px !important;
} }
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
pre.options {
max-width:600px;
} }
p.important_note {
color: #3a6baa;
font-weight:bold;
pre.hidden {
display:none;
} }

+ 1002
- 0
docs/dataset/dataset.html
File diff suppressed because it is too large
View File


+ 392
- 0
docs/dataset/dataview.html View File

@ -0,0 +1,392 @@
<!DOCTYPE html>
<html lang="en"><head>
<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>DataView - vis.js - A dynamic, browser based visualization library.</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/style.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]-->
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
<script src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript">
smoothScroll.init();
</script>
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head>
<body onload="prettyPrint();">
<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="http://www.visjs.org/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="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
<li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
<li><a href="http://www.visjs.org/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>DataView documentation</h1>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Properties">Properties</a></li>
<li><a href="#Getting_Data">Getting Data</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
</ul>
<h2 id="Overview">Overview</h2>
<p>
A DataView offers a filtered and/or formatted view on a
<a href="dataset.html">DataSet</a>.
One can subscribe on changes in a DataView, and easily get filtered or
formatted data without having to specify filters and field types all
the time.
</p>
<h2 id="Example">Example</h2>
<p>
The following example shows how to use a DataView.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
data.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
// create a DataView
// the view will only contain items having a property group with value 1,
// and will only output fields id, text, and date.
var view = new vis.DataView(data, {
filter: function (item) {
return (item.group == 1);
},
fields: ['id', 'text', 'date']
});
// subscribe to any change in the DataView
view.on('*', function (event, properties, senderId) {
console.log('event', event, properties);
});
// update an item in the data set
data.update({id: 2, group: 1});
// get all ids in the view
var ids = view.getIds();
console.log('ids', ids); // will output [1, 2]
// get all items in the view
var items = view.get();
</pre>
<h2 id="Construction">Construction</h2>
<p>
A DataView can be constructed as:
</p>
<pre class="prettyprint lang-js">
var data = new vis.DataView(dataset, options)
</pre>
<p>
where:
</p>
<ul>
<li>
<code>dataset</code> is a DataSet or DataView.
</li>
<li>
<code>options</code> is an object which can
contain the following properties. Note that these properties
are exactly the same as the properties available in methods
<code>DataSet.get</code> and <code>DataView.get</code>.
<table class="options">
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>convert</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>none</td>
<td>
An object containing field names as key, and data types as value.
By default, the type of the properties of an item are left
unchanged. When a field type is specified, this field in the
items will be converted to the specified type. This can be used
for example to convert ISO strings containing a date to a
JavaScript Date object, or convert strings to numbers or vice
versa. The available data types are listed in section
<a href="dataset.html#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>fields</td>
<td>String[&nbsp;] | Object.&lt;String,&nbsp;String&gt;</td>
<td>none</td>
<td>
An array with field names, or an object with current field name and
new field name that the field is returned as.
By default, all properties of the items are emitted.
When <code>fields</code> is defined, only the properties
whose name is specified in <code>fields</code> will be included
in the returned items.
</td>
</tr>
<tr>
<td>filter</td>
<td>function</td>
<td>none</td>
<td>Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
</tr>
</table>
</li>
</ul>
<h2 id="Methods">Methods</h2>
<p>DataView contains the following methods.</p>
<table class="methods">
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>
get([options] [, data])<br>
get(id [,options] [, data])<br>
get(ids&nbsp;[,&nbsp;options]&nbsp;[,&nbsp;data])
</td>
<td>Object | Array</td>
<td>
Get a single item, multiple items, or all items from the DataView.
Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>.
</td>
</tr>
<tr>
<td>
getDataSet()
</td>
<td>DataSet</td>
<td>
Get the DataSet to which the DataView is connected.
</td>
</tr>
<tr>
<td>
getIds([options])
</td>
<td>Number[]</td>
<td>
Get ids of all items or of a filtered set of items.
Available <code>options</code> are described in section <a href="dataset.html#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>
Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>
Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>refresh()</td>
<td>none</td>
<td>
Refresh the filter results of a DataView. Useful when the filter function contains dynamic properties, like:
<pre class="prettyprint lang-js">var data = new vis.DataSet(...);
var view = new vis.DataView(data, {
filter: function (item) {
return item.value > threshold;
}
});</pre>
In this example, <code>threshold</code> is an external parameter. When the value of <code>threshold</code> changes, the DataView must be notified that the filter results may have changed by calling <code>DataView.refresh()</code>.
</td>
</tr>
<tr>
<td>
setDataSet(data)
</td>
<td>none</td>
<td>
Replace the DataSet of the DataView. Parameter <code>data</code> can be a DataSet or a DataView.
</td>
</tr>
</table>
<h2 id="Properties">Properties</h2>
<p>DataView contains the following properties.</p>
<table>
<colgroup>
<col width="200">
</colgroup>
<tr>
<th>Property</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>length</td>
<td>Number</td>
<td>The number of items in the DataView.</td>
</tr>
</table>
<h2 id="Getting_Data">Getting Data</h2>
<p>
Data of the DataView can be retrieved using the method <code>get</code>.
</p>
<pre class="prettyprint lang-js">
var items = view.get();
</pre>
<p>
Data of a DataView can be filtered and formatted again, in exactly the
same way as in a DataSet. See sections
<a href="dataset.html#Data_Manipulation">Data Manipulation</a> and
<a href="dataset.html#Data_Selection">Data Selection</a> for more
information.
</p>
<pre class="prettyprint lang-js">
var items = view.get({
fields: ['id', 'score'],
filter: function (item) {
return (item.score > 50);
}
});
</pre>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in the DataView. Subscription works exactly
the same as for DataSets. See the documentation on
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
for more information.
</p>
<pre class="prettyprint lang-js">
// create a DataSet and a view on the data set
var data = new vis.DataSet();
var view = new vis.DataView({
filter: function (item) {
return (item.group == 2);
}
});
// subscribe to any change in the DataView
view.on('*', function (event, properties, senderId) {
console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
});
// add, update, and remove data in the DataSet...
</pre>
</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>

+ 222
- 209
docs/graph2d/index.html
File diff suppressed because it is too large
View File


+ 732
- 0
docs/graph3d/index.html View File

@ -0,0 +1,732 @@
<!DOCTYPE html>
<html lang="en"><head>
<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>graph3d - vis.js - A dynamic, browser based visualization library.</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/style.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]-->
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
<script src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript">
smoothScroll.init();
</script>
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head>
<body onload="prettyPrint();">
<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="http://www.visjs.org/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="http://www.visjs.org/blog.html">Blog</a></li>
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
<li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
<li><a href="http://www.visjs.org/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>Graph3d</h1>
<h2 id="Overview">Overview</h2>
<p>
Graph3d is an interactive visualization chart to draw data in a three dimensional
graph. You can freely move and zoom in the graph by dragging and scrolling in the
window. Graph3d also supports animation of a graph.
</p>
<p>
Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
to render graphs, and can render up to a few thousands of data points smoothly.
</p>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Loading">Loading</a></li>
<li><a href="#Data_Format">Data Format</a></li>
<li><a href="#Configuration_Options">Configuration Options</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Example">Example</h2>
<p>
The following code shows how to create a Graph3d and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Graph 3D demo&lt;/title&gt;
&lt;style&gt;
body {font: 10pt arial;}
&lt;/style&gt;
&lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x+=axisStep) {
for (var y = 0; y &lt; axisMax; y+=axisStep) {
var value = custom(x, y);
data.add({
x: x,
y: y,
z: value,
style: value
});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// create a graph3d
var container = document.getElementById('mygraph');
graph3d = new vis.Graph3d(container, data, options);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="drawVisualization();"&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Loading">Loading</h2>
<p>
The class name of the Graph3d is <code>vis.Graph3d</code>.
When constructing a Graph3d, an HTML DOM container must be provided to attach
the graph to. Optionally, data an options can be provided.
Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
section <a href="#Data_Format">Data Format</a>.
Options is a name-value map in the JSON format. The available options
are described in section <a href="#Configuration_Options">Configuration Options</a>.
</p>
<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
<p>
Data and options can be set or changed later on using the functions
<code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
</p>
<h2 id="Data_Format">Data Format</h2>
<p>
Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
JSON objects are added to this DataSet by using the <code>add()</code> function.
Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
and can optionally have a property <code>style</code> and <code>filter</code>.
<h3>Definition</h3>
<p>
The DataSet JSON objects are defined as:
</p>
<table class="properties">
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>x</td>
<td>number</td>
<td>yes</td>
<td>Location on the x-axis.</td>
</tr>
<tr>
<td>y</td>
<td>number</td>
<td>yes</td>
<td>Location on the y-axis.</td>
</tr>
<tr>
<td>z</td>
<td>number</td>
<td>yes</td>
<td>Location on the z-axis.</td>
</tr>
<tr>
<td>style</td>
<td>number</td>
<td>no</td>
<td>The data value, required for graph styles <code>dot-color</code> and
<code>dot-size</code>.
</td>
</tr>
<tr>
<td>filter</td>
<td>*</td>
<td>no</td>
<td>Filter values used for the animation.
This column may have any type, such as a number, string, or Date.</td>
</tr>
</table>
<h2 id="Configuration_Options">Configuration Options</h2>
<p>
Options can be used to customize the graph. Options are defined as a JSON object.
All options are optional.
</p>
<pre class="prettyprint lang-js">
var options = {
width: '100%',
height: '400px',
style: 'surface'
};
</pre>
<p>
The following options are available.
</p>
<table class="options">
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>animationInterval</td>
<td>number</td>
<td>1000</td>
<td>The animation interval in milliseconds. This determines how fast
the animation runs.</td>
</tr>
<tr>
<td>animationPreload</td>
<td>boolean</td>
<td>false</td>
<td>If false, the animation frames are loaded as soon as they are requested.
if <code>animationPreload</code> is true, the graph will automatically load
all frames in the background, resulting in a smoother animation as soon as
all frames are loaded. The load progress is shown on screen.</td>
</tr>
<tr>
<td>animationAutoStart</td>
<td>boolean</td>
<td>false</td>
<td>If true, the animation starts playing automatically after the graph
is created.</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>string or Object</td>
<td>'white'</td>
<td>The background color for the main area of the chart.
Can be either a simple HTML color string, for example: 'red' or '#00cc00',
or an object with the following properties.</td>
</tr>
<tr>
<td>backgroundColor.stroke</td>
<td>string</td>
<td>'gray'</td>
<td>The color of the chart border, as an HTML color string.</td>
</tr>
<tr>
<td>backgroundColor.strokeWidth</td>
<td>number</td>
<td>1</td>
<td>The border width, in pixels.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>string</td>
<td>'white'</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>cameraPosition</td>
<td>Object</td>
<td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
<td>Set the initial rotation and position of the camera.
The object <code>cameraPosition</code> contains three parameters:
<code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
Parameter <code>horizontal</code> is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
Parameter <code>distance</code> is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</tr>
<tr>
<td>height</td>
<td>string</td>
<td>'400px'</td>
<td>The height of the graph in pixels or as a percentage.</td>
</tr>
<tr>
<td>keepAspectRatio</td>
<td>boolean</td>
<td>true</td>
<td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
keep their aspect ratio. If false, the axes are scaled such that they
both have the same, maximum with.</td>
</tr>
<tr>
<td>showAnimationControls</td>
<td>boolean</td>
<td>true</td>
<td>If true, animation controls are created at the bottom of the Graph.
The animation controls consists of buttons previous, start/stop, next,
and a slider showing the current frame.
Only applicable when the provided data contains an animation.</td>
</tr>
<tr>
<td>showGrid</td>
<td>boolean</td>
<td>true</td>
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
graph).</td>
</tr>
<tr>
<td>showPerspective</td>
<td>boolean</td>
<td>true</td>
<td>If true, the graph is drawn in perspective: points and lines which
are further away are drawn smaller.
Note that the graph currently does not support a gray colored bottom side
when drawn in perspective.
</td>
</tr>
<tr>
<td>showShadow</td>
<td>boolean</td>
<td>false</td>
<td>Show shadow on the graph.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>'dot'</td>
<td>The style of the 3d graph. Available styles:
<code>bar</code>,
<code>bar-color</code>,
<code>bar-size</code>,
<code>dot</code>,
<code>dot-line</code>,
<code>dot-color</code>,
<code>dot-size</code>,
<code>line</code>,
<code>grid</code>,
or <code>surface</code></td>
</tr>
<tr>
<td>tooltip</td>
<td>boolean | function</td>
<td>false</td>
<td>Show a tooltip showing the values of the hovered data point.
The contents of the tooltip can be customized by providing a callback
function as <code>tooltip</code>. In this case the function is called
with an object containing parameters <code>x</code>,
<code>y</code>, and <code>z</code> argument,
and must return a string which may contain HTML.
</td>
</tr>
<tr>
<td>valueMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the value-axis. Only available in combination
with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
</tr>
<tr>
<td>valueMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the value-axis. Only available in combination
with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
</tr>
<tr>
<td>verticalRatio</td>
<td>number</td>
<td>0.5</td>
<td>A value between 0.1 and 1.0. This scales the vertical size of the graph
When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
the graph will be a cube.</td>
</tr>
<tr>
<td>width</td>
<td>string</td>
<td>'400px'</td>
<td>The width of the graph in pixels or as a percentage.</td>
</tr>
<tr>
<td>xBarWidth</td>
<td>number</td>
<td>none</td>
<td>The width of bars in x direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr>
<tr>
<td>xCenter</td>
<td>string</td>
<td>'55%'</td>
<td>The horizontal center position of the graph, as a percentage or in
pixels.</td>
</tr>
<tr>
<td>xMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the x-axis.</td>
</tr>
<tr>
<td>xMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the x-axis.</td>
</tr>
<tr>
<td>xStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the x-axis.</td>
</tr>
<tr>
<td>xValueLabel</td>
<td>function</td>
<td>none</td>
<td>A function for custom formatting of the labels along the x-axis,
for example <code>function (x) {return (x * 100) + '%'}</code>.
</td>
</tr>
<tr>
<td>yBarWidth</td>
<td>number</td>
<td>none</td>
<td>The width of bars in y direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr>
<tr>
<td>yCenter</td>
<td>string</td>
<td>'45%'</td>
<td>The vertical center position of the graph, as a percentage or in
pixels.</td>
</tr>
<tr>
<td>yMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the y-axis.</td>
</tr>
<tr>
<td>yMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the y-axis.</td>
</tr>
<tr>
<td>yStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the y-axis.</td>
</tr>
<tr>
<td>yValueLabel</td>
<td>function</td>
<td>none</td>
<td>A function for custom formatting of the labels along the y-axis,
for example <code>function (y) {return (y * 100) + '%'}</code>.
</td>
</tr>
<tr>
<td>zMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the z-axis.</td>
</tr>
<tr>
<td>zMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the z-axis.</td>
</tr>
<tr>
<td>zStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the z-axis.</td>
</tr>
<tr>
<td>zValueLabel</td>
<td>function</td>
<td>none</td>
<td>A function for custom formatting of the labels along the z-axis,
for example <code>function (z) {return (z * 100) + '%'}</code>.
</td>
</tr>
<tr>
<td>xLabel</td>
<td>String</td>
<td>x</td>
<td>Label on the X axis.</td>
</tr>
<tr>
<td>yLabel</td>
<td>String</td>
<td>y</td>
<td>Label on the Y axis.</td>
</tr>
<tr>
<td>zLabel</td>
<td>String</td>
<td>z</td>
<td>Label on the Z axis.</td>
</tr>
<tr>
<td>filterLabel</td>
<td>String</td>
<td>time</td>
<td>Label for the filter column.</td>
</tr>
<tr>
<td>legendLabel</td>
<td>String</td>
<td>value</td>
<td>Label for the style description.</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>
Graph3d supports the following methods.
</p>
<table class="methods">
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>animationStart()</td>
<td>none</td>
<td>Start playing the animation.
Only applicable when animation data is available.</td>
</tr>
<tr>
<td>animationStop()</td>
<td>none</td>
<td>Stop playing the animation.
Only applicable when animation data is available.</td>
</tr>
<tr>
<td>getCameraPosition()</td>
<td>An object with parameters <code>horizontal</code>,
<code>vertical</code> and <code>distance</code></td>
<td>Returns an object with parameters <code>horizontal</code>,
<code>vertical</code> and <code>distance</code>,
which each one of them is a number, representing the rotation and position
of the camera.</td>
</tr>
<tr>
<td>redraw()</td>
<td>none</td>
<td>Redraw the graph. Useful after the camera position is changed externally,
when data is changed, or when the layout of the webpage changed.</td>
</tr>
<tr>
<td>setData(data)</td>
<td>none</td>
<td>Replace the data in the Graph3d.</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Update options of Graph3d.
The provided options will be merged with current options.</td>
</tr>
<tr>
<td>setSize(width, height)</td>
<td>none</td>
<td>Parameters <code>width</code> and <code>height</code> are strings,
containing a new size for the graph. Size can be provided in pixels
or in percentages.</td>
</tr>
<tr>
<td>setCameraPosition (pos)</td>
<td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
<td>Set the rotation and position of the camera. Parameter <code>pos</code>
is an object which contains three parameters: <code>horizontal</code>,
<code>vertical</code>, and <code>distance</code>.
Parameter <code>horizontal</code> is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
Parameter <code>distance</code> is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</td>
</tr>
</table>
<h2 id="Events">Events</h2>
<p>
Graph3d fires events after the camera position has been changed.
The event can be catched by creating a listener.
Here an example on how to catch a <code>cameraPositionChange</code> event.
</p>
<pre class="prettyprint lang-js">
function onCameraPositionChange(event) {
alert('The camera position changed to:\n' +
'Horizontal: ' + event.horizontal + '\n' +
'Vertical: ' + event.vertical + '\n' +
'Distance: ' + event.distance);
}
// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
graph3d.on('cameraPositionChange', onCameraPositionChange);
</pre>
<p>
The following events are available.
</p>
<table class="events">
<tr>
<th>name</th>
<th>Properties</th>
<th>Description</th>
</tr>
<tr>
<td>cameraPositionChange</td>
<td>
<ul>
<li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
<li><code>vertical</code>: Number. The vertical angle of the camera.</li>
<li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
</ul>
</td>
<td>The camera position changed. Fired after the user modified the camera position
by moving (dragging) the graph, or by zooming (scrolling),
but not after a call to <code>setCameraPosition</code> method.
The new camera position can be retrieved by calling the method
<code>getCameraPosition</code>.</td>
</tr>
</table>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data are processed and rendered in the browser. No data is sent to any server.
</p>
</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>

+ 2
- 2
docs/index.html View File

@ -5,7 +5,7 @@
<title>vis.js | documentation</title> <title>vis.js | documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> <link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href='css/old_style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="js/prettify/prettify.js"></script> <script type="text/javascript" src="js/prettify/prettify.js"></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>(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>
@ -61,7 +61,7 @@
Plot data on a timeline with lines or barcharts. Plot data on a timeline with lines or barcharts.
</li> </li>
<li> <li>
<a href="graph3d.html"><b>Graph3d</b></a>.
<a href="old/graph3d.html"><b>Graph3d</b></a>.
Display data in a three dimensional graph. Display data in a three dimensional graph.
</li> </li>
<li> <li>

+ 14
- 15
docs/network/configure.html View File

@ -13,7 +13,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@ -118,41 +118,40 @@ network.setOptions(options);
<p>As shown above, alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code>, <code>Function</code> or <p>As shown above, alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code>, <code>Function</code> or
<code>Boolean</code>. These will do the same as the filter option described below.</p> <code>Boolean</code>. These will do the same as the filter option described below.</p>
<table class="moduleTable">
<table class="options">
<tr> <tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>enabled</td> <td>enabled</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Toggle the configuration interface on or off. This is an optional parameter. If left undefined and any of the other properties of this object are defined, this will be set to true. <td>Toggle the configuration interface on or off. This is an optional parameter. If left undefined and any of the other properties of this object are defined, this will be set to true.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>filter</td> <td>filter</td>
<td class="mid">String, Array, Boolean, Function</td>
<td class="mid"><code>true</code></td>
<td>String, Array, Boolean, Function</td>
<td><code>true</code></td>
<td>When a boolean, true gives you all options, false will not show any. If a string is supplied, any <td>When a boolean, true gives you all options, false will not show any. If a string is supplied, any
combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics, combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics,
selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an
array of strings, any of the previously mentioned fields are accepted. <br><br> array of strings, any of the previously mentioned fields are accepted. <br><br>
When supplying a function, you receive two arguments. The option and the path of the option within the options object. If it returns true, the options will be shown in the configurator. Example: When supplying a function, you receive two arguments. The option and the path of the option within the options object. If it returns true, the options will be shown in the configurator. Example:
<pre class="code">
<pre class="prettyprint lang-js">
function (option, path) { function (option, path) {
return path.indexOf('physics') !== -1; return path.indexOf('physics') !== -1;
}
</pre>
}</pre>
This only shows the physics options. This only shows the physics options.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>container</td> <td>container</td>
<td class="mid">DOM element</td>
<td class="mid"><code>undefined</code></td>
<td>DOM element</td>
<td><code>undefined</code></td>
<td>This allows you to put the configure list in another HTML container than below the network.</td> <td>This allows you to put the configure list in another HTML container than below the network.</td>
</tr> </tr>
</table> </table>

+ 108
- 108
docs/network/edges.html View File

@ -11,7 +11,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/> <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="../js/googleAnalytics.js"></script> <script type="text/javascript" src="../js/googleAnalytics.js"></script>
@ -191,17 +191,17 @@ network.setOptions(options);
</pre> </pre>
<p>These options can also be set per individual edge.</p> <p>These options can also be set per individual edge.</p>
<table class="moduleTable" id="optionTable">
<table class="options" id="optionTable">
<tr> <tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','arrows', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','arrows', this);">
<td><span parent="arrows" class="right-caret"></span> arrows</td> <td><span parent="arrows" class="right-caret"></span> arrows</td>
<td class="mid">Object or String</td>
<td class="mid"><code>undefined</code></td>
<td>Object or String</td>
<td><code>undefined</code></td>
<td>To draw an arrow with default settings a string can be supplied. For example: <code>arrows:'to, from, <td>To draw an arrow with default settings a string can be supplied. For example: <code>arrows:'to, from,
middle'</code> or <code>'to;from'</code>, any combination with any seperating symbol is fine. If you middle'</code> or <code>'to;from'</code>, any combination with any seperating symbol is fine. If you
want to control the size of the arrowheads, you can supply an object. want to control the size of the arrowheads, you can supply an object.
@ -209,42 +209,42 @@ network.setOptions(options);
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent">arrows.to</td> <td class="indent">arrows.to</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>When true, an arrowhead on the 'to' side of the edge is drawn, pointing to the 'to' node with default <td>When true, an arrowhead on the 'to' side of the edge is drawn, pointing to the 'to' node with default
settings. To customize the size of the arrow, supply an object. settings. To customize the size of the arrow, supply an object.
</td> </td>
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent2">arrows.to.enabled</td> <td class="indent2">arrows.to.enabled</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Toggle the arrow on or off. This option is optional, if undefined and the scaleFactor property is set, <td>Toggle the arrow on or off. This option is optional, if undefined and the scaleFactor property is set,
enabled will be set to true. enabled will be set to true.
</td> </td>
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent2">arrows.to.scaleFactor</td> <td class="indent2">arrows.to.scaleFactor</td>
<td class="mid">Number</td>
<td class="mid"><code>1</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>The scale factor allows you to change the size of the arrowhead.</td> <td>The scale factor allows you to change the size of the arrowhead.</td>
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent">arrows.middle</td> <td class="indent">arrows.middle</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td> <td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td>
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent">arrows.from</td> <td class="indent">arrows.from</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>Exactly the same as the to object but with an arrowhead at the from node of the edge.</td> <td>Exactly the same as the to object but with an arrowhead at the from node of the edge.</td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
<td><span parent="color" class="right-caret"></span> color</td> <td><span parent="color" class="right-caret"></span> color</td>
<td class="mid">Object or String</td>
<td class="mid"><code>Object</code></td>
<td>Object or String</td>
<td><code>Object</code></td>
<td>The color object contains the color information of the edge in every situation. When the edge only needs <td>The color object contains the color information of the edge in every situation. When the edge only needs
a single color, a color value like <code>'rgb(120,32,14)'</code>, <code>'#ffffff'</code> or a single color, a color value like <code>'rgb(120,32,14)'</code>, <code>'#ffffff'</code> or
<code>'red'</code> can be supplied instead of an object. <code>'red'</code> can be supplied instead of an object.
@ -252,30 +252,30 @@ network.setOptions(options);
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.color</td> <td class="indent">color.color</td>
<td class="mid">String</td>
<td class="mid"><code>'#848484'</code></td>
<td>String</td>
<td><code>'#848484'</code></td>
<td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is
enabled in the interaction module)</i>. enabled in the interaction module)</i>.
</td> </td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.highlight</td> <td class="indent">color.highlight</td>
<td class="mid">String</td>
<td class="mid"><code>'#848484'</code></td>
<td>String</td>
<td><code>'#848484'</code></td>
<td>The color the edge when it is selected.</td> <td>The color the edge when it is selected.</td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.hover</td> <td class="indent">color.hover</td>
<td class="mid">String</td>
<td class="mid"><code>'#848484'</code></td>
<td>String</td>
<td><code>'#848484'</code></td>
<td>The color the edge when the mouse hovers over it <i>(assuming hover is enabled in the interaction <td>The color the edge when the mouse hovers over it <i>(assuming hover is enabled in the interaction
module)</i>. module)</i>.
</td> </td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.inherit</td> <td class="indent">color.inherit</td>
<td class="mid">String or Boolean</td>
<td class="mid"><code>'from'</code></td>
<td>String or Boolean</td>
<td><code>'from'</code></td>
<td><i>When color, highlight or hover are defined, inherit is set to false!</i> <td><i>When color, highlight or hover are defined, inherit is set to false!</i>
<br><br>Supported options are: <code>true, false, 'from','to','both'</code>. <br><br>Supported options are: <code>true, false, 'from','to','both'</code>.
<br><br>The default value is 'from' which does the same as true: the edge will inherit the color from <br><br>The default value is 'from' which does the same as true: the edge will inherit the color from
@ -288,8 +288,8 @@ network.setOptions(options);
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.opacity</td> <td class="indent">color.opacity</td>
<td class="mid">Number</td>
<td class="mid"><code>1.0</code></td>
<td>Number</td>
<td><code>1.0</code></td>
<td>It can be useful to set the opacity of an edge without manually changing all the colors. The opacity <td>It can be useful to set the opacity of an edge without manually changing all the colors. The opacity
option will convert all colors (also when using inherit) to adhere to the supplied opacity. The allowed option will convert all colors (also when using inherit) to adhere to the supplied opacity. The allowed
range of the opacity option is between <code>0 and 1</code>. This is only done once so the performance range of the opacity option is between <code>0 and 1</code>. This is only done once so the performance
@ -298,8 +298,8 @@ network.setOptions(options);
</tr> </tr>
<tr> <tr>
<td>dashes</td> <td>dashes</td>
<td class="mid">Array or Boolean</td>
<td class="mid"><code>false</code></td>
<td>Array or Boolean</td>
<td><code>false</code></td>
<td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array. <td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array.
Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is
repeated until the distance is filled. repeated until the distance is filled.
@ -308,56 +308,56 @@ network.setOptions(options);
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);">
<td><span parent="font" class="right-caret"></span> font</td> <td><span parent="font" class="right-caret"></span> font</td>
<td class="mid">Object or String</td>
<td class="mid"><code>false</code></td>
<td>Object or String</td>
<td><code>false</code></td>
<td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face <td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face
color'</code> for example: <code>'14px arial red'</code>. color'</code> for example: <code>'14px arial red'</code>.
</td> </td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.color</td> <td class="indent">font.color</td>
<td class="mid">String</td>
<td class="mid"><code>'#343434'</code></td>
<td>String</td>
<td><code>'#343434'</code></td>
<td>Color of the label text.</td> <td>Color of the label text.</td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.size</td> <td class="indent">font.size</td>
<td class="mid">Number</td>
<td class="mid"><code>14</code></td>
<td>Number</td>
<td><code>14</code></td>
<td>Size of the label text.</td> <td>Size of the label text.</td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.face</td> <td class="indent">font.face</td>
<td class="mid">String</td>
<td class="mid"><code>'arial'</code></td>
<td>String</td>
<td><code>'arial'</code></td>
<td>Font face (or font family) of the label text.</td> <td>Font face (or font family) of the label text.</td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.background</td> <td class="indent">font.background</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind <td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind
the label in the supplied color. the label in the supplied color.
</td> </td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.strokeWidth</td> <td class="indent">font.strokeWidth</td>
<td class="mid">Number</td>
<td class="mid"><code>2</code></td>
<td>Number</td>
<td><code>2</code></td>
<td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value <td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value
higher than 0 is supplied, the stroke will be drawn. higher than 0 is supplied, the stroke will be drawn.
</td> </td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.strokeColor</td> <td class="indent">font.strokeColor</td>
<td class="mid">String</td>
<td class="mid"><code>'#ffffff'</code></td>
<td>String</td>
<td><code>'#ffffff'</code></td>
<td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td> <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.align</td> <td class="indent">font.align</td>
<td class="mid">String</td>
<td class="mid"><code>'horizontal'</code></td>
<td>String</td>
<td><code>'horizontal'</code></td>
<td>Possible options: <code>'horizontal','top','middle','bottom'</code>. The alignment determines how the <td>Possible options: <code>'horizontal','top','middle','bottom'</code>. The alignment determines how the
label is aligned over the edge. The default value <code>horizontal</code> aligns the label horizontally, label is aligned over the edge. The default value <code>horizontal</code> aligns the label horizontally,
regardless of the orientation of the edge. When an option other than <code>horizontal</code> is chosen, regardless of the orientation of the edge. When an option other than <code>horizontal</code> is chosen,
@ -366,14 +366,14 @@ network.setOptions(options);
</tr> </tr>
<tr> <tr>
<td>hidden</td> <td>hidden</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>When true, the edge is not drawn. It is part still part of the physics simulation however!</td> <td>When true, the edge is not drawn. It is part still part of the physics simulation however!</td>
</tr> </tr>
<tr> <tr>
<td>hoverWidth</td> <td>hoverWidth</td>
<td class="mid">Number or Function</td>
<td class="mid"><code>0.5</code></td>
<td>Number or Function</td>
<td><code>0.5</code></td>
<td>Assuming the hover behaviour is enabled in the <a href="./interaction.html">interaction module</a>, the <td>Assuming the hover behaviour is enabled in the <a href="./interaction.html">interaction module</a>, the
hoverWidth determines the width of the edge when the user hovers over it with the mouse. If a number is hoverWidth determines the width of the edge when the user hovers over it with the mouse. If a number is
supplied, this number will be <b>added</b> to the width. supplied, this number will be <b>added</b> to the width.
@ -394,34 +394,34 @@ var options: {
<tr> <tr>
<td>id</td> <td>id</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.</td> <td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.</td>
</tr> </tr>
<tr> <tr>
<td>label</td> <td>label</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.</td> <td>The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.</td>
</tr> </tr>
<tr> <tr>
<td>length</td> <td>length</td>
<td class="mid">Number</td>
<td class="mid"><code>undefined</code></td>
<td>Number</td>
<td><code>undefined</code></td>
<td>The physics simulation gives edges a spring length. This value can override the length of the spring in <td>The physics simulation gives edges a spring length. This value can override the length of the spring in
rest. rest.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>physics</td> <td>physics</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>When true, the edge is part of the physics simulation. When false, it will not act as a spring.</td> <td>When true, the edge is part of the physics simulation. When false, it will not act as a spring.</td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);">
<td><span parent="scaling" class="right-caret"></span> scaling</td> <td><span parent="scaling" class="right-caret"></span> scaling</td>
<td class="mid">Object</td>
<td class="mid"><code>Object</code></td>
<td>Object</td>
<td><code>Object</code></td>
<td>If the <code>value</code> option is specified, the width of the edges will be scaled according to the <td>If the <code>value</code> option is specified, the width of the edges will be scaled according to the
properties in this object. Keep in mind that when using scaling, the <code>width</code> option is properties in this object. Keep in mind that when using scaling, the <code>width</code> option is
neglected. neglected.
@ -429,58 +429,58 @@ var options: {
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.min</td> <td class="indent">scaling.min</td>
<td class="mid">Number</td>
<td class="mid"><code>1</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>If edges have a value, their widths are determined by the value, the scaling function and the min max <td>If edges have a value, their widths are determined by the value, the scaling function and the min max
values. The min value is the minimum allowed value. values. The min value is the minimum allowed value.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.max</td> <td class="indent">scaling.max</td>
<td class="mid">Number</td>
<td class="mid"><code>15</code></td>
<td>Number</td>
<td><code>15</code></td>
<td>This is the maximum allowed width when the edges are scaled using the value option.</td> <td>This is the maximum allowed width when the edges are scaled using the value option.</td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.label</td> <td class="indent">scaling.label</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>When false, the label is not allowed to scale with the edge. If true it will scale using default <td>When false, the label is not allowed to scale with the edge. If true it will scale using default
settigns. For further customization, you can supply an object. settigns. For further customization, you can supply an object.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.enabled</td> <td class="indent2">scaling.label.enabled</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of <td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of
the properties in this object are defined. the properties in this object are defined.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.min</td> <td class="indent2">scaling.label.min</td>
<td class="mid">Number</td>
<td class="mid"><code>14</code></td>
<td>Number</td>
<td><code>14</code></td>
<td>The minimum font-size used for labels when scaling.</td> <td>The minimum font-size used for labels when scaling.</td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.max</td> <td class="indent2">scaling.label.max</td>
<td class="mid">Number</td>
<td class="mid"><code>30</code></td>
<td>Number</td>
<td><code>30</code></td>
<td>The maximum font-size used for labels when scaling.</td> <td>The maximum font-size used for labels when scaling.</td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.maxVisible</td> <td class="indent2">scaling.label.maxVisible</td>
<td class="mid">Number</td>
<td class="mid"><code>30</code></td>
<td>Number</td>
<td><code>30</code></td>
<td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this <td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this
option. If set to 30, the font will never look larger than size 30 zoomed at 100%. option. If set to 30, the font will never look larger than size 30 zoomed at 100%.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.drawThreshold</td> <td class="indent2">scaling.label.drawThreshold</td>
<td class="mid">Number</td>
<td class="mid"><code>3</code></td>
<td>Number</td>
<td><code>3</code></td>
<td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
When using font scaling, you can use this together with the maxVisible to first show labels of important When using font scaling, you can use this together with the maxVisible to first show labels of important
edges when zoomed out and only show the rest when zooming in. edges when zoomed out and only show the rest when zooming in.
@ -488,8 +488,8 @@ var options: {
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.customScalingFunction</td> <td class="indent">scaling.customScalingFunction</td>
<td class="mid">Function</td>
<td class="mid">in description</td>
<td>Function</td>
<td>in description</td>
<td>If edges have <code>value</code> fields, this function determines how the size of the nodes are scaled <td>If edges have <code>value</code> fields, this function determines how the size of the nodes are scaled
based on their values. The default function is: based on their values. The default function is:
<pre> <pre>
@ -515,8 +515,8 @@ myWidth = minWidth + diff * scale;
</tr> </tr>
<tr> <tr>
<td>selectionWidth</td> <td>selectionWidth</td>
<td class="mid">Number or Function</td>
<td class="mid"><code>1</code></td>
<td>Number or Function</td>
<td><code>1</code></td>
<td>The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied, <td>The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied,
this number will be <b>added</b> to the width. this number will be <b>added</b> to the width.
Because the width can be altered by the value and the scaling functions, a constant multiplier or added Because the width can be altered by the value and the scaling functions, a constant multiplier or added
@ -535,48 +535,48 @@ var options: {
</tr> </tr>
<tr> <tr>
<td>selfReferenceSize</td> <td>selfReferenceSize</td>
<td class="mid">Number</td>
<td class="mid"><code>false</code></td>
<td>Number</td>
<td><code>false</code></td>
<td>When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.</td> <td>When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.</td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
<td><span parent="shadow" class="right-caret"></span> shadow</td> <td><span parent="shadow" class="right-caret"></span> shadow</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>When true, the edge casts a shadow using the default settings. This can be further refined by supplying <td>When true, the edge casts a shadow using the default settings. This can be further refined by supplying
an object. an object.
</td> </td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.enabled</td> <td class="indent">shadow.enabled</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties <td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties
in this object are defined. in this object are defined.
</td> </td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.size</td> <td class="indent">shadow.size</td>
<td class="mid">Number</td>
<td class="mid"><code>10</code></td>
<td>Number</td>
<td><code>10</code></td>
<td>The blur size of the shadow.</td> <td>The blur size of the shadow.</td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.x</td> <td class="indent">shadow.x</td>
<td class="mid">Number</td>
<td class="mid"><code>5</code></td>
<td>Number</td>
<td><code>5</code></td>
<td>The x offset.</td> <td>The x offset.</td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.y</td> <td class="indent">shadow.y</td>
<td class="mid">Number</td>
<td class="mid"><code>5</code></td>
<td>Number</td>
<td><code>5</code></td>
<td>The y offset.</td> <td>The y offset.</td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','smooth', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','smooth', this);">
<td><span parent="smooth" class="right-caret"></span> smooth</td> <td><span parent="smooth" class="right-caret"></span> smooth</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than <td>When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than
that of straight curves but it looks better. that of straight curves but it looks better.
There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves
@ -586,16 +586,16 @@ var options: {
</tr> </tr>
<tr parent="smooth" class="hidden"> <tr parent="smooth" class="hidden">
<td class="indent">smooth.enabled</td> <td class="indent">smooth.enabled</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Toggle smooth curves on and off. This is an optional option. If any of the other properties in this <td>Toggle smooth curves on and off. This is an optional option. If any of the other properties in this
object are set, this option will be set to true. object are set, this option will be set to true.
</td> </td>
</tr> </tr>
<tr parent="smooth" class="hidden"> <tr parent="smooth" class="hidden">
<td class="indent">smooth.type</td> <td class="indent">smooth.type</td>
<td class="mid">String</td>
<td class="mid"><code>'dynamic'</code></td>
<td>String</td>
<td><code>'dynamic'</code></td>
<td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', <td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like 'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like
and pick the one that you like best! and pick the one that you like best!
@ -606,29 +606,29 @@ var options: {
</tr> </tr>
<tr parent="smooth" class="hidden"> <tr parent="smooth" class="hidden">
<td class="indent">smooth.roundness</td> <td class="indent">smooth.roundness</td>
<td class="mid">Number</td>
<td class="mid"><code>0.5</code></td>
<td>Number</td>
<td><code>0.5</code></td>
<td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the smooth curves for all types EXCEPT dynamic. <td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the smooth curves for all types EXCEPT dynamic.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>The title is shown in a pop-up when the mouse moves over the edge.</td> <td>The title is shown in a pop-up when the mouse moves over the edge.</td>
</tr> </tr>
<tr> <tr>
<td>value</td> <td>value</td>
<td class="mid">Number</td>
<td class="mid"><code>undefined</code></td>
<td>Number</td>
<td><code>undefined</code></td>
<td>When a value is set, the edges' width will be scaled using the options in the scaling object defined <td>When a value is set, the edges' width will be scaled using the options in the scaling object defined
above. above.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>width</td> <td>width</td>
<td class="mid">Number</td>
<td class="mid"><code>1</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>The width of the edge. If value is set, this is not used.</td> <td>The width of the edge. If value is set, this is not used.</td>
</tr> </tr>
</table> </table>

+ 10
- 10
docs/network/groups.html View File

@ -11,7 +11,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/prettify.css" type="text/css" rel="stylesheet" /> <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/toggleTable.js"></script> <script type="text/javascript" src="../js/toggleTable.js"></script>
@ -105,17 +105,17 @@ var options = {
network.setOptions(options); network.setOptions(options);
</pre> </pre>
<p>All of the individual options are explained here:</p> <p>All of the individual options are explained here:</p>
<table class="moduleTable">
<table class="options">
<tr> <tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>useDefaultGroups</td> <td>useDefaultGroups</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<td>Boolean</td>
<td><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 <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 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. setting this to false, the default groups will not be used in this cycle.
@ -123,8 +123,8 @@ network.setOptions(options);
</tr> </tr>
<tr> <tr>
<td>group*</td> <td>group*</td>
<td class="mid">Object</td>
<td class="mid"><code></code></td>
<td>Object</td>
<td><code></code></td>
<td> <td>
You can add multiple groups containing styling information that applies to a certain subset of groups. 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 All options described in the <a href="./nodes.html">nodes module</a> that make sense can be used here

+ 91
- 88
docs/network/index.html View File

@ -11,7 +11,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -196,7 +196,7 @@
</div> </div>
<h3>Modules</h3> <h3>Modules</h3>
<table class="moduleTable">
<table class="modules">
<tr> <tr>
<td width="120px"><a href="./configure.html">configure</a></td> <td width="120px"><a href="./configure.html">configure</a></td>
<td>Generates an interactive option editor with filtering.</td> <td>Generates an interactive option editor with filtering.</td>
@ -280,17 +280,17 @@ network.setOptions(options);
</pre> </pre>
<p>The individual options are explained below. The ones referring to modules are explained in the corresponding <p>The individual options are explained below. The ones referring to modules are explained in the corresponding
module.</p> module.</p>
<table class="moduleTable">
<table class="options">
<tr> <tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>autoResize</td> <td>autoResize</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>If true, the Network will automatically detect when its container is resized, and redraw itself <td>If true, the Network will automatically detect when its container is resized, and redraw itself
accordingly. If false, the Network can be forced to repaint after its container has been resized accordingly. If false, the Network can be forced to repaint after its container has been resized
using the function redraw() and setSize(). using the function redraw() and setSize().
@ -298,20 +298,20 @@ network.setOptions(options);
</tr> </tr>
<tr> <tr>
<td>width</td> <td>width</td>
<td class="mid">String</td>
<td class="mid"><code>'100%'</code></td>
<td>String</td>
<td><code>'100%'</code></td>
<td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
</tr> </tr>
<tr> <tr>
<td>height</td> <td>height</td>
<td class="mid">String</td>
<td class="mid"><code>'100%'</code></td>
<td>String</td>
<td><code>'100%'</code></td>
<td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
</tr> </tr>
<tr> <tr>
<td>locale</td> <td>locale</td>
<td class="mid">String</td>
<td class="mid"><code>'en'</code></td>
<td>String</td>
<td><code>'en'</code></td>
<td>Select the locale. By default, the language is English. If you want to use another language, you <td>Select the locale. By default, the language is English. If you want to use another language, you
will will
need to define your own locale and refer to it here. need to define your own locale and refer to it here.
@ -319,8 +319,8 @@ network.setOptions(options);
</tr> </tr>
<tr> <tr>
<td>locales</td> <td>locales</td>
<td class="mid">Object</td>
<td class="mid">defaultLocales</td>
<td>Object</td>
<td>defaultLocales</td>
<td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look <td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look
at at
the <a href="#locales" data-scroll="" the <a href="#locales" data-scroll=""
@ -330,8 +330,8 @@ network.setOptions(options);
</tr> </tr>
<tr> <tr>
<td>clickToUse</td> <td>clickToUse</td>
<td class="mid">Boolean</td>
<td class="mid">false</td>
<td>Boolean</td>
<td>false</td>
<td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look <td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look
at at
the <a href="#locales" data-scroll="" the <a href="#locales" data-scroll=""
@ -341,57 +341,57 @@ network.setOptions(options);
</tr> </tr>
<tr> <tr>
<td>configure</td> <td>configure</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./configure.html">All options in this object are explained in the configure module.</a> <td><a href="./configure.html">All options in this object are explained in the configure module.</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>edges</td> <td>edges</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./edges.html">All options in this object are explained in the edges module.</a> <td><a href="./edges.html">All options in this object are explained in the edges module.</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>nodes</td> <td>nodes</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./nodes.html">All options in this object are explained in the nodes module.</a> <td><a href="./nodes.html">All options in this object are explained in the nodes module.</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>groups</td> <td>groups</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./groups.html">All options in this object are explained in the groups module.</a> <td><a href="./groups.html">All options in this object are explained in the groups module.</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>layout</td> <td>layout</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./layout.html">All options in this object are explained in the layout module.</a> <td><a href="./layout.html">All options in this object are explained in the layout module.</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>interaction</td> <td>interaction</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./interaction.html">All options in this object are explained in the interaction module.</a> <td><a href="./interaction.html">All options in this object are explained in the interaction module.</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>manipulation</td> <td>manipulation</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./manipulation.html">All options in this object are explained in the manipulation module.</a> <td><a href="./manipulation.html">All options in this object are explained in the manipulation module.</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>physics</td> <td>physics</td>
<td class="mid">Object</td>
<td class="mid">Object</td>
<td>Object</td>
<td>Object</td>
<td><a href="./physics.html">All options in this object are explained in the physics module.</a> <td><a href="./physics.html">All options in this object are explained in the physics module.</a>
</td> </td>
</tr> </tr>
@ -429,7 +429,7 @@ var locales = {
<p>This is a list of all the methods in the public API. They have been grouped by category, which correspond to <p>This is a list of all the methods in the public API. They have been grouped by category, which correspond to
the the
modules listed above.</p> modules listed above.</p>
<table class="moduleTable" id="methodTable">
<table class="methods-collapsable" id="methodTable">
<tr class="subHeader"> <tr class="subHeader">
<td colspan="2">Global methods for the network.</td> <td colspan="2">Global methods for the network.</td>
</tr> </tr>
@ -1019,15 +1019,15 @@ var locales = {
<h4 id="optionsObject">Cluster methods options object</h4> <h4 id="optionsObject">Cluster methods options object</h4>
<p>The options object supplied to the cluster functions can contain these properties:</p> <p>The options object supplied to the cluster functions can contain these properties:</p>
<table class="moduleTable">
<table class="methods">
<tr> <tr>
<th class="name">name</th>
<th>Name</th>
<th>Type</th> <th>Type</th>
<th>description</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>joinCondition(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td>
<td class="midMethods">Function</td>
<td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)</td>
<td>Function</td>
<td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are <td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are
selected to be in the cluster and calls this function with their data as argument. selected to be in the cluster and calls this function with their data as argument.
If this function returns true, this node will be added to the cluster. You have access to all If this function returns true, this node will be added to the cluster. You have access to all
@ -1055,8 +1055,8 @@ network.clustering.cluster(options);
</td> </td>
</tr> </tr>
<tr> <tr>
<td>processProperties(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td>
<td class="midMethods">Function</td>
<td>processProperties(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)</td>
<td>Function</td>
<td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with <td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with
the the
properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all
@ -1069,12 +1069,15 @@ network.clustering.cluster(options);
cluster: cluster:
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
var options = { var options = {
processProperties: function (clusterOptions, childNodes, childEdges) {
processProperties: function (clusterOptions,
childNodes, childEdges) {
var totalMass = 0; var totalMass = 0;
var totalValue = 0; var totalValue = 0;
for (var i = 0; i < childNodes.length; i++) { for (var i = 0; i < childNodes.length; i++) {
totalMass += childNodes[i].mass;
totalValue = childNodes[i].value ? totalValue + childNodes[i].value : totalValue;
totalMass += childNodes[i].mass;
totalValue = childNodes[i].value
? totalValue + childNodes[i].value
: totalValue;
} }
clusterOptions.mass = totalMass; clusterOptions.mass = totalMass;
if (totalValue > 0) { if (totalValue > 0) {
@ -1088,7 +1091,7 @@ var options = {
</tr> </tr>
<tr> <tr>
<td>clusterNodeProperties</td> <td>clusterNodeProperties</td>
<td class="midMethods">Object</td>
<td>Object</td>
<td><i>Optional. </i> This is an object containing the options for the cluster node. All options <td><i>Optional. </i> This is an object containing the options for the cluster node. All options
described described
in the <a href="./nodes.html">nodes module</a> are allowed. This allows you to style your cluster in the <a href="./nodes.html">nodes module</a> are allowed. This allows you to style your cluster
@ -1100,7 +1103,7 @@ var options = {
</tr> </tr>
<tr> <tr>
<td>clusterEdgeProperties</td> <td>clusterEdgeProperties</td>
<td class="midMethods">Object</td>
<td>Object</td>
<td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster. <td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster.
All All
options described in the <a href="./edges.html">edges module</a> are allowed. Using this, you can options described in the <a href="./edges.html">edges module</a> are allowed. Using this, you can
@ -1119,18 +1122,18 @@ var options = {
<p>This is a list of all the events in the public API. They are collected here from all individual modules.</p> <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
<p>These events are fired by the interaction module. They are related to user input.</p> <p>These events are fired by the interaction module. They are related to user input.</p>
<table class="moduleTable">
<table class="events">
<tr> <tr>
<th class="eventName">name</th>
<th class="eventProperties">properties</th>
<th>description</th>
<th>Name</th>
<th>Properties</th>
<th>Description</th>
</tr> </tr>
<tr class="subHeader"> <tr class="subHeader">
<td colspan="3">Events triggered by human interaction, selection, dragging etc.</td> <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>click</td> <td>click</td>
<td class="mid">
<td>
<pre class="code"> <pre class="code">
{ {
nodes: [Array of selected nodeIds], nodes: [Array of selected nodeIds],
@ -1147,7 +1150,7 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>doubleClick</td> <td>doubleClick</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double <td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double
click click
is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want
@ -1159,7 +1162,7 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>oncontext</td> <td>oncontext</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not <td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not
select by default. You can use <a href="./selection.html">getNodeAt</a> to select the node if you select by default. You can use <a href="./selection.html">getNodeAt</a> to select the node if you
want. want.
@ -1167,7 +1170,7 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>hold</td> <td>hold</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click <td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click
event event
is also fired in this case. is also fired in this case.
@ -1175,13 +1178,13 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>release</td> <td>release</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
</td> </td>
</tr> </tr>
<tr class=""> <tr class="">
<td>select</td> <td>select</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when the selection has changed by user action. This means a node or edge has been selected, <td>Fired when the selection has changed by user action. This means a node or edge has been selected,
added added
to the selection or deselected. <b>All select events are only triggered on click and hold</b>. to the selection or deselected. <b>All select events are only triggered on click and hold</b>.
@ -1189,17 +1192,17 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>selectNode</td> <td>selectNode</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when a node has been selected by the user.</td> <td>Fired when a node has been selected by the user.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>selectEdge</td> <td>selectEdge</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when a edge has been selected by the user.</td> <td>Fired when a edge has been selected by the user.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>deselectNode</td> <td>deselectNode</td>
<td class="mid"><pre class="code">
<td><pre class="code">
{ {
nodes: [Array of selected nodeIds], nodes: [Array of selected nodeIds],
edges: [Array of selected edgeIds], edges: [Array of selected edgeIds],
@ -1223,7 +1226,7 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>deselectEdge</td> <td>deselectEdge</td>
<td class="mid">same as <code>deselectNode</code>.</td>
<td>same as <code>deselectNode</code>.</td>
<td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is <td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is
the the
list of nodes and edges that were selected before the last user event. list of nodes and edges that were selected before the last user event.
@ -1231,32 +1234,32 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>dragStart</td> <td>dragStart</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when starting a drag.</td> <td>Fired when starting a drag.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>dragging</td> <td>dragging</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when dragging node(s) or the view.</td> <td>Fired when dragging node(s) or the view.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>dragEnd</td> <td>dragEnd</td>
<td class="mid">same as <code>click</code>.</td>
<td>same as <code>click</code>.</td>
<td>Fired when the drag has finished.</td> <td>Fired when the drag has finished.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>zoom</td> <td>zoom</td>
<td class="mid"><code>{direction:'+'/'-'}</code></td>
<td><code>{direction:'+'/'-'}</code></td>
<td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in.</td> <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>showPopup</td> <td>showPopup</td>
<td class="mid"><code>id of item corresponding to popup</code></td>
<td><code>id of item corresponding to popup</code></td>
<td>Fired when the popup (tooltip) is shown.</td> <td>Fired when the popup (tooltip) is shown.</td>
</tr> </tr>
<tr class=""> <tr class="">
<td>hidePopup</td> <td>hidePopup</td>
<td class="mid">none</td>
<td>none</td>
<td>Fired when the popup (tooltip) is hidden.</td> <td>Fired when the popup (tooltip) is hidden.</td>
</tr> </tr>
<tr class="subHeader "> <tr class="subHeader ">
@ -1264,14 +1267,14 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>startStabilizing</td> <td>startStabilizing</td>
<td class="mid">none</td>
<td>none</td>
<td>Fired when stabilization starts. This is also the case when you drag a node and the physics <td>Fired when stabilization starts. This is also the case when you drag a node and the physics
simulation simulation
restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'. restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.
</td> </td>
<tr class=""> <tr class="">
<td>stabilizationProgress</td> <td>stabilizationProgress</td>
<td class="mid">
<td>
<pre class="code"> <pre class="code">
{ {
iterations: Number // iterations so far, iterations: Number // iterations so far,
@ -1285,14 +1288,14 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>stabilizationIterationsDone</td> <td>stabilizationIterationsDone</td>
<td class="mid">none</td>
<td>none</td>
<td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is <td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is
stabilized; it could also mean that the amount of iterations defined in the options has been stabilized; it could also mean that the amount of iterations defined in the options has been
reached. reached.
</td> </td>
<tr class=""> <tr class="">
<td>stabilized</td> <td>stabilized</td>
<td class="mid">
<td>
<pre class="code"> <pre class="code">
{ {
iterations: Number // iterations it took iterations: Number // iterations it took
@ -1309,7 +1312,7 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>resize</td> <td>resize</td>
<td class="mid">
<td>
<pre class="code"> <pre class="code">
{ {
width: Number // the new width of the canvas width: Number // the new width of the canvas
@ -1335,21 +1338,21 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>initRedraw</td> <td>initRedraw</td>
<td class="mid">none</td>
<td>none</td>
<td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to <td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to
move move
custom elements before starting drawing the new frame. custom elements before starting drawing the new frame.
</td> </td>
<tr class=""> <tr class="">
<td>beforeDrawing</td> <td>beforeDrawing</td>
<td class="mid"><code>canvas context</code></td>
<td><code>canvas context</code></td>
<td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before <td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before
all all
edges and nodes are drawn. Can be used to draw behind the network. edges and nodes are drawn. Can be used to draw behind the network.
</td> </td>
<tr class=""> <tr class="">
<td>afterDrawing</td> <td>afterDrawing</td>
<td class="mid"><code>canvas context</code></td>
<td><code>canvas context</code></td>
<td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
</td> </td>
</tr> </tr>
@ -1358,7 +1361,7 @@ var options = {
</tr> </tr>
<tr class=""> <tr class="">
<td>animationFinished</td> <td>animationFinished</td>
<td class="mid">none</td>
<td>none</td>
<td>Fired when an animation is finished.</td> <td>Fired when an animation is finished.</td>
</table> </table>
@ -1444,17 +1447,17 @@ var network = new vis.Network(container, data);
<h4>Gephi parser options</h4> <h4>Gephi parser options</h4>
There are a few options you can use to tell Vis what to do with the data from Gephi. There are a few options you can use to tell Vis what to do with the data from Gephi.
<table class="moduleTable">
<table class="options">
<tr> <tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>nodes.fixed</td> <td>nodes.fixed</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>When false, the nodes will move according to the physics model after import. If true, the nodes do <td>When false, the nodes will move according to the physics model after import. If true, the nodes do
not move at all. If set to true, the node positions have to be defined to avoid infinite recursion not move at all. If set to true, the node positions have to be defined to avoid infinite recursion
errors in the physics. errors in the physics.
@ -1462,16 +1465,16 @@ var network = new vis.Network(container, data);
</tr> </tr>
<tr> <tr>
<td>nodes.parseColor</td> <td>nodes.parseColor</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>If true, the color will be parsed by the vis parser, generating extra colors for the borders, <td>If true, the color will be parsed by the vis parser, generating extra colors for the borders,
highlighs and hover. If false, the node will be the supplied color. highlighs and hover. If false, the node will be the supplied color.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>edges.inheritColor</td> <td>edges.inheritColor</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>When true, the color supplied by gephi is ignored and the inherit color mode is used with the global <td>When true, the color supplied by gephi is ignored and the inherit color mode is used with the global
setting. setting.
</td> </td>

+ 19
- 19
docs/network/interaction.html View File

@ -11,7 +11,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -117,24 +117,24 @@ network.setOptions(options);
</pre> </pre>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p> <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" id="optionTable">
<tr><th>name</th><th>type</th><th>default</th><th>description</th></tr>
<tr><td>dragNodes</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>When true, the nodes that are not fixed can be dragged by the user.</td></tr>
<tr><td>dragView</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>When true, the view can be dragged around by the user.</td></tr>
<tr><td>hideEdgesOnDrag</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hover</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td> <td class="mid">Object or Boolean</td> <td class="mid"><code>Object</code></td> <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td> <td class="mid">Number</td> <td class="mid"><code>1</code></td> <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.y</td> <td class="mid">Number</td> <td class="mid"><code>1</code></td> <td>The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.zoom</td> <td class="mid">Number</td> <td class="mid"><code>0.02</code></td> <td>The speed at which the view zooms in or out pressing a key or pressing a navigation button.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.bindToWindow</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.</td></tr>
<tr><td>navigationButtons</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.</td></tr>
<tr><td>selectable</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
<tr><td>selectConnectedEdges</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
<tr><td>tooltipDelay</td> <td class="mid">Number</td> <td class="mid"><code>300</code></td> <td>When nodes or edges have a defined <code>'title'</code> field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.</td></tr>
<tr><td>zoomView</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>When true, the user can zoom in.</td></tr>
<table class="options" id="optionTable">
<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
<tr><td>dragNodes</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, the nodes that are not fixed can be dragged by the user.</td></tr>
<tr><td>dragView</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, the view can be dragged around by the user.</td></tr>
<tr><td>hideEdgesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hover</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td> <td>Object or Boolean</td> <td><code>Object</code></td> <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td> <td>Number</td> <td><code>1</code></td> <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.y</td> <td>Number</td> <td><code>1</code></td> <td>The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.zoom</td> <td>Number</td> <td><code>0.02</code></td> <td>The speed at which the view zooms in or out pressing a key or pressing a navigation button.</td></tr>
<tr parent="keyboard" class="hidden"><td class="indent">keyboard.bindToWindow</td> <td>Boolean</td> <td><code>true</code></td> <td>When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.</td></tr>
<tr><td>navigationButtons</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.</td></tr>
<tr><td>selectable</td> <td>Boolean</td><td><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
<tr><td>selectConnectedEdges</td> <td>Boolean</td><td><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
<tr><td>tooltipDelay</td> <td>Number</td> <td><code>300</code></td> <td>When nodes or edges have a defined <code>'title'</code> field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.</td></tr>
<tr><td>zoomView</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, the user can zoom in.</td></tr>
</table> </table>
</div> </div>

+ 9
- 9
docs/network/layout.html View File

@ -10,7 +10,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -109,14 +109,14 @@ var options = {
network.setOptions(options); network.setOptions(options);
</pre> </pre>
<p>When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.</p> <p>When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.</p>
<table class="moduleTable" id="optionTable">
<tr><th>name</th><th>type</th><th>default</th><td>description</td></tr>
<tr><td>randomSeed</td><td class="mid">Number</td><td class="mid"><code>undefined</code></td> <td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td class="mid">Object or Boolean</td><td class="mid"><code>Object</code></td> <td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td> <td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.levelSeparation</td><td class="mid">Number</td><td class="mid"><code>150</code></td> <td>The distance between the different levels.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.direction</td><td class="mid">String</td><td class="mid"><code>'UD'</code></td> <td>The direction of the hierarchical layout. The available options are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up, left-right, right-left.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.sortMethod</td><td class="mid">String</td><td class="mid"><code>'hubsize'</code></td> <td>The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: <code>hubsize, directed</code>. <br><br>
<table class="options" id="optionTable">
<tr><th>Name</th><th>Type</th><th>Default</th><td>Description</td></tr>
<tr><td>randomSeed</td><td>Number</td><td><code>undefined</code></td> <td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td>Object or Boolean</td><td><code>Object</code></td> <td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td>Boolean</td><td><code>false</code></td> <td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.levelSeparation</td><td>Number</td><td><code>150</code></td> <td>The distance between the different levels.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.direction</td><td>String</td><td><code>'UD'</code></td> <td>The direction of the hierarchical layout. The available options are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up, left-right, right-left.</td></tr>
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.sortMethod</td><td>String</td><td><code>'hubsize'</code></td> <td>The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: <code>hubsize, directed</code>. <br><br>
Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated. <br><br> Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated. <br><br>
Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr> Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
</table> </table>

+ 12
- 12
docs/network/manipulation.html View File

@ -10,7 +10,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -109,11 +109,11 @@ var options = {
network.setOptions(options); network.setOptions(options);
</pre> </pre>
<table class="moduleTable" id="optionTable">
<tr><th>name</th><th>type</th><th>default</th><td>description</td></tr>
<tr><td>enabled</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
<tr><td>initiallyActive</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
<tr><td>addNode</td> <td class="mid">Boolean or Function</td> <td class="mid"><code>true</code></td> <td>You can use these options to switch certain functionalities on or off of attach
<table class="options" id="optionTable">
<tr><th>Name</th><th>Type</th><th>Default</th><td>Description</td></tr>
<tr><td>enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
<tr><td>initiallyActive</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
<tr><td>addNode</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>You can use these options to switch certain functionalities on or off of attach
a handler function to them. These functions are called before the action is performed. If a node is going to be added through the manipulation system, a handler function to them. These functions are called before the action is performed. If a node is going to be added through the manipulation system,
the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do. For all except the editNode functionality, these handler functions are optional. the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do. For all except the editNode functionality, these handler functions are optional.
<br><br> <br><br>
@ -131,7 +131,7 @@ var options = {
} }
</pre> </pre>
This function changes the label of the new node into 'hello world'. If you do not want the node created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr> This function changes the label of the new node into 'hello world'. If you do not want the node created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr>
<tr><td>addEdge</td> <td class="mid">Boolean or Function</td> <td class="mid"><code>true</code></td> <td>If boolean, toggle the adding of edges.
<tr><td>addEdge</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the adding of edges.
When a function is supplied, it will be called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example: When a function is supplied, it will be called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example:
<pre class="code"> <pre class="code">
var options = { var options = {
@ -151,11 +151,11 @@ var options = {
} }
</pre> </pre>
This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr></td></tr> This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr></td></tr>
<tr><td>editNode</td> <td class="mid">Function</td> <td class="mid"><code>undefined</code></td> <td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
<tr><td>editEdge</td> <td class="mid">Boolean or Function</td> <td class="mid"><code>true</code></td> <td>If boolean, toggle the editing of edges. When a function is supplied, it will be called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
<tr><td>deleteNode</td> <td class="mid">Boolean or Function</td> <td class="mid"><code>true</code></td> <td>If boolean, toggle the deletion of nodes. If function, it will be called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>deleteEdge</td> <td class="mid">Boolean or Function</td> <td class="mid"><code>true</code></td> <td>If boolean, toggle the deletion of edges. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>controlNodeStyle</td> <td class="mid">Object</td> <td class="mid">Object</td><td>You can supply any styling information you'd like here. All fields described in <a href="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
<tr><td>editNode</td> <td>Function</td> <td><code>undefined</code></td> <td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
<tr><td>editEdge</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the editing of edges. When a function is supplied, it will be called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
<tr><td>deleteNode</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the deletion of nodes. If function, it will be called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>deleteEdge</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the deletion of edges. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>controlNodeStyle</td> <td>Object</td> <td>Object</td><td>You can supply any styling information you'd like here. All fields described in <a href="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
<pre class="code"> <pre class="code">
{ {
shape:'dot', shape:'dot',

+ 118
- 118
docs/network/nodes.html View File

@ -11,7 +11,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -190,37 +190,37 @@ network.setOptions(options);
</pre> </pre>
<p>These options can also be set per individual node. All of the individual options are explained here:</p> <p>These options can also be set per individual node. All of the individual options are explained here:</p>
<table class="moduleTable" id="optionTable">
<table class="options" id="optionTable">
<tr> <tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>borderWidth</td> <td>borderWidth</td>
<td class="mid">Number</td>
<td class="mid"><code>1</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>The width of the border of the node.</td> <td>The width of the border of the node.</td>
</tr> </tr>
<tr> <tr>
<td>borderWidthSelected</td> <td>borderWidthSelected</td>
<td class="mid">Number</td>
<td class="mid"><code>undefined</code></td>
<td>Number</td>
<td><code>undefined</code></td>
<td>The width of the border of the node when it is selected. When undefined, the borderWidth is used</td> <td>The width of the border of the node when it is selected. When undefined, the borderWidth is used</td>
</tr> </tr>
<tr> <tr>
<td>brokenImage</td> <td>brokenImage</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option can be an URL to <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option can be an URL to
a backup image in case the URL supplied in the image option cannot be resolved. a backup image in case the URL supplied in the image option cannot be resolved.
</td> </td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
<td><span parent="color" class="right-caret"></span> color</td> <td><span parent="color" class="right-caret"></span> color</td>
<td class="mid">Object or String</td>
<td class="mid"><code>Object</code></td>
<td>Object or String</td>
<td><code>Object</code></td>
<td>The color object contains the color information of the node in every situation. When the node only needs <td>The color object contains the color information of the node in every situation. When the node only needs
a single color, a color value like <code>'rgba(120,32,14,1)'</code>, <code>'#ffffff'</code> or <code>'red'</code> a single color, a color value like <code>'rgba(120,32,14,1)'</code>, <code>'#ffffff'</code> or <code>'red'</code>
can be supplied instead of an object. can be supplied instead of an object.
@ -228,58 +228,58 @@ network.setOptions(options);
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.border</td> <td class="indent">color.border</td>
<td class="mid">String</td>
<td class="mid"><code>'#2B7CE9'</code></td>
<td>String</td>
<td><code>'#2B7CE9'</code></td>
<td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is
enabled in the interaction module)</i>. enabled in the interaction module)</i>.
</td> </td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.background</td> <td class="indent">color.background</td>
<td class="mid">String</td>
<td class="mid"><code>'#D2E5FF'</code></td>
<td>String</td>
<td><code>'#D2E5FF'</code></td>
<td>The color of the background of the node when it is not selected or hovered over <i>(assuming hover is <td>The color of the background of the node when it is not selected or hovered over <i>(assuming hover is
enabled in the interaction module)</i>. enabled in the interaction module)</i>.
</td> </td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.highlight</td> <td class="indent">color.highlight</td>
<td class="mid">Object or String</td>
<td class="mid"><code>Object</code></td>
<td>Object or String</td>
<td><code>Object</code></td>
<td>The color the node when it is selected. Alternatively you can just supply a string color value.</td> <td>The color the node when it is selected. Alternatively you can just supply a string color value.</td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent2">color.highlight.border</td> <td class="indent2">color.highlight.border</td>
<td class="mid">String</td>
<td class="mid"><code>'#2B7CE9'</code></td>
<td>String</td>
<td><code>'#2B7CE9'</code></td>
<td>The color of the border of the node when it is selected.</td> <td>The color of the border of the node when it is selected.</td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent2">color.highlight.background</td> <td class="indent2">color.highlight.background</td>
<td class="mid">String</td>
<td class="mid"><code>'#D2E5FF'</code></td>
<td>String</td>
<td><code>'#D2E5FF'</code></td>
<td>The color of the background of the node when it is selected.</td> <td>The color of the background of the node when it is selected.</td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent">color.hover</td> <td class="indent">color.hover</td>
<td class="mid">Object or String</td>
<td class="mid"><code>Object</code></td>
<td>Object or String</td>
<td><code>Object</code></td>
<td>The color the node when the mouse hovers over it <i>(assuming hover is enabled in the interaction <td>The color the node when the mouse hovers over it <i>(assuming hover is enabled in the interaction
module)</i>. Shorthand like above is also supported. module)</i>. Shorthand like above is also supported.
</td> </td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent2">color.hover.border</td> <td class="indent2">color.hover.border</td>
<td class="mid">String</td>
<td class="mid"><code>'#2B7CE9'</code></td>
<td>String</td>
<td><code>'#2B7CE9'</code></td>
<td>The color of the border of the node when the mouse hovers over it <i>(assuming hover is enabled in the <td>The color of the border of the node when the mouse hovers over it <i>(assuming hover is enabled in the
interaction module)</i>. interaction module)</i>.
</td> </td>
</tr> </tr>
<tr parent="color" class="hidden"> <tr parent="color" class="hidden">
<td class="indent2">color.hover.background</td> <td class="indent2">color.hover.background</td>
<td class="mid">String</td>
<td class="mid"><code>'#D2E5FF'</code></td>
<td>String</td>
<td><code>'#D2E5FF'</code></td>
<td>The color of the background of the node when the mouse hovers over it <i>(assuming hover is enabled in <td>The color of the background of the node when the mouse hovers over it <i>(assuming hover is enabled in
the interaction module)</i>. the interaction module)</i>.
</td> </td>
@ -287,162 +287,162 @@ network.setOptions(options);
<tr class='toggle collapsible' onclick="toggleTable('optionTable','fixed', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','fixed', this);">
<td><span parent="fixed" class="right-caret"></span> fixed</td> <td><span parent="fixed" class="right-caret"></span> fixed</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>When true, the node will not move but IS part of the physics simulation. When defined as an object, <td>When true, the node will not move but IS part of the physics simulation. When defined as an object,
movement in either X or Y direction can be disabled. movement in either X or Y direction can be disabled.
</td> </td>
</tr> </tr>
<tr parent="fixed" class="hidden"> <tr parent="fixed" class="hidden">
<td class="indent">fixed.x</td> <td class="indent">fixed.x</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>When true, the node will not move in the X direction.</td> <td>When true, the node will not move in the X direction.</td>
</tr> </tr>
<tr parent="fixed" class="hidden"> <tr parent="fixed" class="hidden">
<td class="indent">fixed.y</td> <td class="indent">fixed.y</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>When true, the node will not move in the Y direction.</td> <td>When true, the node will not move in the Y direction.</td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);">
<td><span parent="font" class="right-caret"></span> font</td> <td><span parent="font" class="right-caret"></span> font</td>
<td class="mid">Object or String</td>
<td class="mid"><code>false</code></td>
<td>Object or String</td>
<td><code>false</code></td>
<td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face <td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face
color'</code> for example: <code>'14px arial red'</code>. color'</code> for example: <code>'14px arial red'</code>.
</td> </td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.color</td> <td class="indent">font.color</td>
<td class="mid">String</td>
<td class="mid"><code>'#343434'</code></td>
<td>String</td>
<td><code>'#343434'</code></td>
<td>Color of the label text.</td> <td>Color of the label text.</td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.size</td> <td class="indent">font.size</td>
<td class="mid">Number</td>
<td class="mid"><code>14</code></td>
<td>Number</td>
<td><code>14</code></td>
<td>Size of the label text.</td> <td>Size of the label text.</td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.face</td> <td class="indent">font.face</td>
<td class="mid">String</td>
<td class="mid"><code>'arial'</code></td>
<td>String</td>
<td><code>'arial'</code></td>
<td>Font face (or font family) of the label text.</td> <td>Font face (or font family) of the label text.</td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.background</td> <td class="indent">font.background</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind <td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind
the label in the supplied color. the label in the supplied color.
</td> </td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.strokeWidth</td> <td class="indent">font.strokeWidth</td>
<td class="mid">Number</td>
<td class="mid"><code>0</code></td>
<td>Number</td>
<td><code>0</code></td>
<td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value <td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value
higher than 0 is supplied, the stroke will be drawn. higher than 0 is supplied, the stroke will be drawn.
</td> </td>
</tr> </tr>
<tr parent="font" class="hidden"> <tr parent="font" class="hidden">
<td class="indent">font.strokeColor</td> <td class="indent">font.strokeColor</td>
<td class="mid">String</td>
<td class="mid"><code>'#ffffff'</code></td>
<td>String</td>
<td><code>'#ffffff'</code></td>
<td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td> <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
</tr> </tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>When not <code>undefined</code>, the</td> <td>When not <code>undefined</code>, the</td>
</tr> </tr>
<tr> <tr>
<td>hidden</td> <td>hidden</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>When true, the node will not be shown. It will still be part of the physics simulation though!</td> <td>When true, the node will not be shown. It will still be part of the physics simulation though!</td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','icon', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','icon', this);">
<td><span parent="icon" class="right-caret"></span> icon</td> <td><span parent="icon" class="right-caret"></span> icon</td>
<td class="mid">Object</td>
<td class="mid"><code>Object</code></td>
<td>Object</td>
<td><code>Object</code></td>
<td>These options are only used when the shape is set to <code>icon</code>.</td> <td>These options are only used when the shape is set to <code>icon</code>.</td>
</tr> </tr>
<tr parent="icon" class="hidden"> <tr parent="icon" class="hidden">
<td class="indent">icon.face</td> <td class="indent">icon.face</td>
<td class="mid">String</td>
<td class="mid"><code>'FontAwesome'</code></td>
<td>String</td>
<td><code>'FontAwesome'</code></td>
<td>These options are only used when the shape is set to <code>icon</code>. The possible options for the <td>These options are only used when the shape is set to <code>icon</code>. The possible options for the
face are: <code>'FontAwesome'</code> and <code>'Ionicons'</code>. face are: <code>'FontAwesome'</code> and <code>'Ionicons'</code>.
</td> </td>
</tr> </tr>
<tr parent="icon" class="hidden"> <tr parent="icon" class="hidden">
<td class="indent">icon.code</td> <td class="indent">icon.code</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>This is the code of the icon, for example <code>'\uf007'</code>.</td> <td>This is the code of the icon, for example <code>'\uf007'</code>.</td>
</tr> </tr>
<tr parent="icon" class="hidden"> <tr parent="icon" class="hidden">
<td class="indent">icon.size</td> <td class="indent">icon.size</td>
<td class="mid">Number</td>
<td class="mid"><code>50</code></td>
<td>Number</td>
<td><code>50</code></td>
<td>The size of the icon.</td> <td>The size of the icon.</td>
</tr> </tr>
<tr parent="icon" class="hidden"> <tr parent="icon" class="hidden">
<td class="indent">icon.color</td> <td class="indent">icon.color</td>
<td class="mid">String</td>
<td class="mid"><code>'#2B7CE9'</code></td>
<td>String</td>
<td><code>'#2B7CE9'</code></td>
<td>The color of the icon.</td> <td>The color of the icon.</td>
</tr> </tr>
<tr> <tr>
<td>id</td> <td>id</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td> <td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td>
</tr> </tr>
<tr> <tr>
<td>image</td> <td>image</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL
to an image. If the image cannot be found, the brokenImage option can be used. to an image. If the image cannot be found, the brokenImage option can be used.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>label</td> <td>label</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>String</td>
<td><code>undefined</code></td>
<td>The label is the piece of text shown in or under the node, depending on the shape.</td> <td>The label is the piece of text shown in or under the node, depending on the shape.</td>
</tr> </tr>
<tr> <tr>
<td>level</td> <td>level</td>
<td class="mid">Number</td>
<td class="mid"><code>undefined</code></td>
<td>Number</td>
<td><code>undefined</code></td>
<td>When using the hierarchical layout, the level determines where the node is going to be positioned.</td> <td>When using the hierarchical layout, the level determines where the node is going to be positioned.</td>
</tr> </tr>
<tr> <tr>
<td>mass</td> <td>mass</td>
<td class="mid">Number</td>
<td class="mid"><code>1</code></td>
<td>Number</td>
<td><code>1</code></td>
<td>The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By <td>The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By
increasing the mass of a node, you increase it's repulsion. Values lower than 1 are not recommended. increasing the mass of a node, you increase it's repulsion. Values lower than 1 are not recommended.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>physics</td> <td>physics</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>When false, the node is not part of the physics simulation. It will not move except for from manual <td>When false, the node is not part of the physics simulation. It will not move except for from manual
dragging. dragging.
</td> </td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);">
<td><span parent="scaling" class="right-caret"></span> scaling</td> <td><span parent="scaling" class="right-caret"></span> scaling</td>
<td class="mid">Object</td>
<td class="mid"><code>Object</code></td>
<td>Object</td>
<td><code>Object</code></td>
<td>If the <code>value</code> option is specified, the size of the nodes will be scaled according to the <td>If the <code>value</code> option is specified, the size of the nodes will be scaled according to the
properties in this object. All node shapes can be scaled, but some only when label scaling is enabled as properties in this object. All node shapes can be scaled, but some only when label scaling is enabled as
their size is based on the size of the label. their size is based on the size of the label.
@ -456,58 +456,58 @@ network.setOptions(options);
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.min</td> <td class="indent">scaling.min</td>
<td class="mid">Number</td>
<td class="mid"><code>10</code></td>
<td>Number</td>
<td><code>10</code></td>
<td>If nodes have a value, their sizes are determined by the value, the scaling function and the min max <td>If nodes have a value, their sizes are determined by the value, the scaling function and the min max
values. The min value is the minimum allowed value. values. The min value is the minimum allowed value.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.max</td> <td class="indent">scaling.max</td>
<td class="mid">Number</td>
<td class="mid"><code>30</code></td>
<td>Number</td>
<td><code>30</code></td>
<td>This is the maximum allowed size when the nodes are scaled using the value option.</td> <td>This is the maximum allowed size when the nodes are scaled using the value option.</td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.label</td> <td class="indent">scaling.label</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>This can be false if the label is not allowed to scale with the node. If true it will scale using <td>This can be false if the label is not allowed to scale with the node. If true it will scale using
default settigns. For further customization, you can supply an object. default settigns. For further customization, you can supply an object.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.enabled</td> <td class="indent2">scaling.label.enabled</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of <td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of
the properties in this object are defined. the properties in this object are defined.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.min</td> <td class="indent2">scaling.label.min</td>
<td class="mid">Number</td>
<td class="mid"><code>14</code></td>
<td>Number</td>
<td><code>14</code></td>
<td>The minimum font-size used for labels when scaling.</td> <td>The minimum font-size used for labels when scaling.</td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.max</td> <td class="indent2">scaling.label.max</td>
<td class="mid">Number</td>
<td class="mid"><code>30</code></td>
<td>Number</td>
<td><code>30</code></td>
<td>The maximum font-size used for labels when scaling.</td> <td>The maximum font-size used for labels when scaling.</td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.maxVisible</td> <td class="indent2">scaling.label.maxVisible</td>
<td class="mid">Number</td>
<td class="mid"><code>30</code></td>
<td>Number</td>
<td><code>30</code></td>
<td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this <td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this
option. If set to 30, the font will never look larger than size 30 zoomed at 100%. option. If set to 30, the font will never look larger than size 30 zoomed at 100%.
</td> </td>
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.drawThreshold</td> <td class="indent2">scaling.label.drawThreshold</td>
<td class="mid">Number</td>
<td class="mid"><code>3</code></td>
<td>Number</td>
<td><code>3</code></td>
<td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
When using font scaling, you can use this together with the maxVisible to first show labels of important When using font scaling, you can use this together with the maxVisible to first show labels of important
nodes when zoomed out and only show the rest when zooming in. nodes when zoomed out and only show the rest when zooming in.
@ -515,8 +515,8 @@ network.setOptions(options);
</tr> </tr>
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent">scaling.customScalingFunction</td> <td class="indent">scaling.customScalingFunction</td>
<td class="mid">Function</td>
<td class="mid">in description</td>
<td>Function</td>
<td>in description</td>
<td>If nodes have <code>value</code> fields, this function determines how the size of the nodes are scaled <td>If nodes have <code>value</code> fields, this function determines how the size of the nodes are scaled
based on their values. The default function is: based on their values. The default function is:
<pre> <pre>
@ -542,42 +542,42 @@ mySize = minSize + diff * scale;
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
<td><span parent="shadow" class="right-caret"></span> shadow</td> <td><span parent="shadow" class="right-caret"></span> shadow</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>Object or Boolean</td>
<td><code>Object</code></td>
<td>When true, the node casts a shadow using the default settings. This can be further refined by supplying <td>When true, the node casts a shadow using the default settings. This can be further refined by supplying
an object. an object.
</td> </td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.enabled</td> <td class="indent">shadow.enabled</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties <td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties
in this object are defined. in this object are defined.
</td> </td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.size</td> <td class="indent">shadow.size</td>
<td class="mid">Number</td>
<td class="mid"><code>10</code></td>
<td>Number</td>
<td><code>10</code></td>
<td>The blur size of the shadow.</td> <td>The blur size of the shadow.</td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.x</td> <td class="indent">shadow.x</td>
<td class="mid">Number</td>
<td class="mid"><code>5</code></td>
<td>Number</td>
<td><code>5</code></td>
<td>The x offset.</td> <td>The x offset.</td>
</tr> </tr>
<tr parent="shadow" class="hidden"> <tr parent="shadow" class="hidden">
<td class="indent">shadow.y</td> <td class="indent">shadow.y</td>
<td class="mid">Number</td>
<td class="mid"><code>5</code></td>
<td>Number</td>
<td><code>5</code></td>
<td>The y offset.</td> <td>The y offset.</td>
</tr> </tr>
<tr> <tr>
<td>shape</td> <td>shape</td>
<td class="mid">String</td>
<td class="mid"><code>'ellipse'</code></td>
<td>String</td>
<td><code>'ellipse'</code></td>
<td>The shape defines what the node looks like. There are two types of nodes. One type has the label inside <td>The shape defines what the node looks like. There are two types of nodes. One type has the label inside
of it and the other type has the label underneath it. The types with the label inside of it are: of it and the other type has the label underneath it. The types with the label inside of it are:
<code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>. <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
@ -588,8 +588,8 @@ mySize = minSize + diff * scale;
</tr> </tr>
<tr> <tr>
<td>size</td> <td>size</td>
<td class="mid">Number</td>
<td class="mid"><code>25</code></td>
<td>Number</td>
<td><code>25</code></td>
<td>The size is used to determine the size of node shapes that do not have the label inside of them. These <td>The size is used to determine the size of node shapes that do not have the label inside of them. These
shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>, shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
@ -597,23 +597,23 @@ mySize = minSize + diff * scale;
</tr> </tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td class="mid">String or Element</td>
<td class="mid"><code>undefined</code></td>
<td>String or Element</td>
<td><code>undefined</code></td>
<td>Title to be displayed when the user hovers over the node. The title can be an HTML element or a string <td>Title to be displayed when the user hovers over the node. The title can be an HTML element or a string
containing plain text or HTML. containing plain text or HTML.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>value</td> <td>value</td>
<td class="mid">Number</td>
<td class="mid"><code>undefined</code></td>
<td>Number</td>
<td><code>undefined</code></td>
<td>When a value is set, the nodes will be scaled using the options in the scaling object defined above. <td>When a value is set, the nodes will be scaled using the options in the scaling object defined above.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>x</td> <td>x</td>
<td class="mid">Number</td>
<td class="mid"><code>undefined</code></td>
<td>Number</td>
<td><code>undefined</code></td>
<td>This gives a node an initial x position. When using the hierarchical layout, either the x or y position <td>This gives a node an initial x position. When using the hierarchical layout, either the x or y position
is set by the layout engine depending on the type of view. The other value remains untouched. When using is set by the layout engine depending on the type of view. The other value remains untouched. When using
stabilization, the stabilized position may be different from the initial one. To lock the node to that stabilization, the stabilized position may be different from the initial one. To lock the node to that
@ -622,8 +622,8 @@ mySize = minSize + diff * scale;
</tr> </tr>
<tr> <tr>
<td>y</td> <td>y</td>
<td class="mid">Number</td>
<td class="mid"><code>undefined</code></td>
<td>Number</td>
<td><code>undefined</code></td>
<td>This gives a node an initial y position. When using the hierarchical layout, either the x or y position <td>This gives a node an initial y position. When using the hierarchical layout, either the x or y position
is set by the layout engine depending on the type of view. The other value remains untouched. When using is set by the layout engine depending on the type of view. The other value remains untouched. When using
stabilization, the stabilized position may be different from the initial one. To lock the node to that stabilization, the stabilized position may be different from the initial one. To lock the node to that

+ 46
- 48
docs/network/physics.html View File

@ -10,7 +10,7 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@ -91,7 +91,7 @@ var options = {
springLength: 95, springLength: 95,
springConstant: 0.04, springConstant: 0.04,
damping: 0.09, damping: 0.09,
avoidOverlap: false
avoidOverlap: 0
}, },
forceAtlas2Based: { forceAtlas2Based: {
theta: 0.5, theta: 0.5,
@ -100,15 +100,14 @@ var options = {
springConstant: 0.08, springConstant: 0.08,
springLength: 100, springLength: 100,
damping: 0.4, damping: 0.4,
avoidOverlap: false
avoidOverlap: 0
}, },
repulsion: { repulsion: {
centralGravity: 0.2, centralGravity: 0.2,
springLength: 200, springLength: 200,
springConstant: 0.05, springConstant: 0.05,
nodeDistance: 100, nodeDistance: 100,
damping: 0.09,
avoidOverlap: false
damping: 0.09
}, },
hierarchicalRepulsion: { hierarchicalRepulsion: {
centralGravity: 0.0, centralGravity: 0.0,
@ -144,52 +143,51 @@ var options = {
network.setOptions(options); network.setOptions(options);
</pre> </pre>
<p>All of the individual options are explained here:</p> <p>All of the individual options are explained here:</p>
<table class="moduleTable" id="optionTable">
<tr><th class="name">name</th><th class="type">type</th><th>default</th><th>description</th></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.gravitationalConstant</td> <td class="mid">Number</td> <td class="mid"><code>-2000</code></td> <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.3</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springLength</td> <td class="mid">Number</td> <td class="mid"><code>95</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.04</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.avoidOverlap</td> <td class="mid">Number</td> <td class="mid"><code>0</code></td> <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model and the spring model. Value 1 is maximum overlap avoidance.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','forceAtlas2Based', this);"><td><span parent="forceAtlas2Based" class="right-caret"></span> forceAtlas2Based</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>Force Atlas 2 has been developed by <a href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679" target="_blank">Jacomi <i>et al</i> (2014)</a> for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided
<table class="options" id="optionTable">
<tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td> <td>Object</td> <td><code>Object</code></td> <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.gravitationalConstant</td> <td>Number</td> <td><code>-2000</code></td> <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.centralGravity</td> <td>Number</td> <td><code>0.3</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springLength</td> <td>Number</td> <td><code>95</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springConstant</td> <td>Number</td> <td><code>0.04</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.damping</td> <td>Number</td> <td><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.avoidOverlap</td> <td>Number</td> <td><code>0</code></td> <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','forceAtlas2Based', this);"><td><span parent="forceAtlas2Based" class="right-caret"></span> forceAtlas2Based</td> <td>Object</td> <td><code>Object</code></td> <td>Force Atlas 2 has been developed by <a href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679" target="_blank">Jacomi <i>et al</i> (2014)</a> for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided
by them and makes use of the barnesHut implementation in vis. The main differences are the central gravity model, by them and makes use of the barnesHut implementation in vis. The main differences are the central gravity model,
which is here distance independent, and the repulsion being linear instead of quadratic. Finally, all node masses have a which is here distance independent, and the repulsion being linear instead of quadratic. Finally, all node masses have a
multiplier based on the amount of connected edges plus one.</td></tr> multiplier based on the amount of connected edges plus one.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.gravitationalConstant</td> <td class="mid">Number</td> <td class="mid"><code>-50</code></td> <td>This is similar to the barnesHut method except that the falloff is linear instead of quadratic. The connectivity is also taken into account as a factor of the mass. If you want the repulsion to be stronger, decrease the value (so -1000, -2000).</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.01</code></td> <td>There is a central gravity attractor to pull the entire network back to the center. This is not dependent on distance.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springLength</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.08</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.4</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.avoidOverlap</td> <td class="mid">Number</td> <td class="mid"><code>0</code></td> <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model and the spring model. Value 1 is maximum overlap avoidance.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','repulsion', this);"><td><span parent="repulsion" class="right-caret"></span> repulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.2</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>200</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.05</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.avoidOverlap</td> <td class="mid">Number</td> <td class="mid"><code>0</code></td> <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for the spring model. Value 1 is maximum overlap avoidance.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchicalRepulsion', this);"><td><span parent="hierarchicalRepulsion" class="right-caret"></span> hierarchicalRepulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>120</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.0'</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.01</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr><td>maxVelocity</td> <td class="mid">Number</td> <td class="mid"><code>50</code></td> <td>The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.</td></tr>
<tr><td>minVelocity</td> <td class="mid">Number</td> <td class="mid"><code>0.1</code></td> <td>Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.</td></tr>
<tr><td>solver</td> <td class="mid">String</td> <td class="mid"><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'</code>. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','stabilization', this);"><td><span parent="stabilization" class="right-caret"></span> stabilization</td> <td class="mid">Object | Boolean</td><td class="mid"><code>Object</code></td> <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td> <td class="mid">Number</td> <td class="mid"><code>1000</code></td> <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.fit</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr><td>timestep</td> <td class="mid">Number</td> <td class="mid"><code>0.5</code></td> <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.gravitationalConstant</td> <td>Number</td> <td><code>-50</code></td> <td>This is similar to the barnesHut method except that the falloff is linear instead of quadratic. The connectivity is also taken into account as a factor of the mass. If you want the repulsion to be stronger, decrease the value (so -1000, -2000).</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.centralGravity</td> <td>Number</td> <td><code>0.01</code></td> <td>There is a central gravity attractor to pull the entire network back to the center. This is not dependent on distance.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springLength</td> <td>Number</td> <td><code>100</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springConstant</td> <td>Number</td> <td><code>0.08</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.damping</td> <td>Number</td> <td><code>0.4</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.avoidOverlap</td> <td>Number</td> <td><code>0</code></td> <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','repulsion', this);"><td><span parent="repulsion" class="right-caret"></span> repulsion</td> <td>Object</td> <td><code>Object</code></td> <td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.nodeDistance</td> <td>Number</td> <td><code>100</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.centralGravity</td> <td>Number</td> <td><code>0.2</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springLength</td> <td>Number</td> <td><code>200</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springConstant</td> <td>Number</td> <td><code>0.05</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.damping</td> <td>Number</td> <td><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchicalRepulsion', this);"><td><span parent="hierarchicalRepulsion" class="right-caret"></span> hierarchicalRepulsion</td> <td>Object</td> <td><code>Object</code></td> <td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.nodeDistance</td> <td>Number</td> <td><code>120</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.centralGravity</td> <td>Number</td> <td><code>0.0'</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springLength</td> <td>Number</td> <td><code>100</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springConstant</td> <td>Number</td> <td><code>0.01</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.damping</td> <td>Number</td> <td><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr><td>maxVelocity</td> <td>Number</td> <td><code>50</code></td> <td>The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.</td></tr>
<tr><td>minVelocity</td> <td>Number</td> <td><code>0.1</code></td> <td>Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.</td></tr>
<tr><td>solver</td> <td>String</td> <td><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'</code>. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','stabilization', this);"><td><span parent="stabilization" class="right-caret"></span> stabilization</td> <td>Object | Boolean</td><td><code>Object</code></td> <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td> <td>Number</td> <td><code>1000</code></td> <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td>Number</td> <td><code>100</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td> <td>Boolean</td> <td><code>false</code></td> <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.fit</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr><td>timestep</td> <td>Number</td> <td><code>0.5</code></td> <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
</table> </table>
</div> </div>

docs/dataset.html → docs/old/dataset.html View File

@ -5,7 +5,7 @@
<title>vis.js | DataSet documentation</title> <title>vis.js | DataSet documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> <link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href='css/old_style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="js/prettify/prettify.js"></script> <script type="text/javascript" src="js/prettify/prettify.js"></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>(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>

docs/dataview.html → docs/old/dataview.html View File

@ -5,7 +5,7 @@
<title>vis.js | DataView documentation</title> <title>vis.js | DataView documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> <link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href='css/old_style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="js/prettify/prettify.js"></script> <script type="text/javascript" src="js/prettify/prettify.js"></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>(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>

docs/graph3d.html → docs/old/graph3d.html View File

@ -3,10 +3,10 @@
<head> <head>
<title>vis.js | graph3d documentation</title> <title>vis.js | graph3d documentation</title>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href='../css/prettify.css' type='text/css' rel='stylesheet'>
<link href='../css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script type="text/javascript" src="../js/prettify/prettify.js"></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>(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>
<body onload="prettyPrint();"> <body onload="prettyPrint();">
@ -39,7 +39,7 @@
<h2 id="Example">Example</h2> <h2 id="Example">Example</h2>
<p> <p>
The following code shows how to create a Graph3d and provide it with data. The following code shows how to create a Graph3d and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
More examples can be found in the <a href="../../examples">examples</a> directory.
</p> </p>
<pre class="prettyprint lang-html"> <pre class="prettyprint lang-html">

docs/network/old/canvas.html → docs/old/old_network/canvas.html View File

@ -100,7 +100,7 @@ var options = {
network.setOptions(options); network.setOptions(options);
</pre> </pre>
<p>All of the individual options are explained here:</p> <p>All of the individual options are explained here:</p>
<table class="moduleTable">
<table>
<tr class="header"> <tr class="header">
<td class="name">name</td> <td class="name">name</td>
<td class="type">type</td> <td class="type">type</td>
@ -133,7 +133,7 @@ network.setOptions(options);
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the
setOptions method of the network itself and use the module name as an object name.</p> setOptions method of the network itself and use the module name as an object name.</p>
<table class="moduleTable">
<table>
<tr class="header"> <tr class="header">
<td class="methodName">name</td> <td class="methodName">name</td>
<td>returns</td> <td>returns</td>
@ -169,7 +169,7 @@ network.setOptions(options);
<h3>Events</h3> <h3>Events</h3>
<p>This is a list of all the events in the public API. They are collected here from all individual modules.</p> <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
<table class="moduleTable">
<table>
<tr class="header"> <tr class="header">
<td class="eventName">name</td> <td class="eventName">name</td>
<td class="eventProperties">properties</td> <td class="eventProperties">properties</td>

docs/network/old/clustering.html → docs/old/old_network/clustering.html View File

@ -84,7 +84,7 @@
<h3>Methods</h3> <h3>Methods</h3>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p> <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<table class="moduleTable">
<table>
<tr class="header"><td class="name">name</td><td>returns</td><td>description</td></tr> <tr class="header"><td class="name">name</td><td>returns</td><td>description</td></tr>
<tr><td>findNode(<br> <tr><td>findNode(<br>
&nbsp;&nbsp;<code>String nodeId</code><br>)</td> <td class="mid">Array</td> <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds showing where the node is. Example: <br> &nbsp;&nbsp;<code>String nodeId</code><br>)</td> <td class="mid">Array</td> <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds showing where the node is. Example: <br>
@ -113,7 +113,7 @@
<br> <br>
<h4 id="optionsObject">Cluster options object</h4> <h4 id="optionsObject">Cluster options object</h4>
<p>The options object supplied to the cluster functions can contain these properties:</p> <p>The options object supplied to the cluster functions can contain these properties:</p>
<table class="moduleTable">
<table>
<tr class="header"><td class="name">name</td><td>Type</td><td>description</td></tr> <tr class="header"><td class="name">name</td><td>Type</td><td>description</td></tr>
<tr><td>joinCondition(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td> <td class="mid">Function</td> <tr><td>joinCondition(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td> <td class="mid">Function</td>
<td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are selected to be in the cluster and calls this function with their data as argument. <td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are selected to be in the cluster and calls this function with their data as argument.

docs/network/old/rendering.html → docs/old/old_network/rendering.html View File

@ -90,7 +90,7 @@ var options = {
network.setOptions(options); network.setOptions(options);
</pre> </pre>
<p>All of the individual options are explained here:</p> <p>All of the individual options are explained here:</p>
<table class="moduleTable">
<table>
<tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr> <tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr>
<tr><td>hideEdgesOnDrag</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td><td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr> <tr><td>hideEdgesOnDrag</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td><td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
<tr><td>hideNodesOnDrag</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td><td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr> <tr><td>hideNodesOnDrag</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td><td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
@ -98,14 +98,14 @@ network.setOptions(options);
<h3>Methods</h3> <h3>Methods</h3>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p> <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<table class="moduleTable">
<table>
<tr class="header"><td>name</td><td>returns</td><td>description</td></tr> <tr class="header"><td>name</td><td>returns</td><td>description</td></tr>
<tr><td>redraw()</td><td class="mid">none</td><td>Redraw the network.</td></tr> <tr><td>redraw()</td><td class="mid">none</td><td>Redraw the network.</td></tr>
</table> </table>
<h3>Events</h3> <h3>Events</h3>
<p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p> <p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p>
<table class="moduleTable">
<table>
<tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr> <tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr>
<tr><td>initRedraw</td><td class="mid">none</td><td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to move custom elements before starting drawing the new frame.</td> <tr><td>initRedraw</td><td class="mid">none</td><td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to move custom elements before starting drawing the new frame.</td>
<tr><td>beforeDrawing</td><td class="mid"><code>canvas context</code></td><td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before all edges and nodes are drawn. Can be used to draw behind the network.</td> <tr><td>beforeDrawing</td><td class="mid"><code>canvas context</code></td><td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before all edges and nodes are drawn. Can be used to draw behind the network.</td>

docs/network/old/selection.html → docs/old/old_network/selection.html View File

@ -91,7 +91,7 @@ var options = {
network.setOptions(options); network.setOptions(options);
</pre> </pre>
<p>All of the individual options are explained here:</p> <p>All of the individual options are explained here:</p>
<table class="moduleTable">
<table>
<tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr> <tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr>
<tr><td>selectable</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr> <tr><td>selectable</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
<tr><td>selectConnectedEdges</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr> <tr><td>selectConnectedEdges</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
@ -99,7 +99,7 @@ network.setOptions(options);
<h3>Methods</h3> <h3>Methods</h3>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p> <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<table class="moduleTable">
<table>
<tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr> <tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr>
<tr><td>getSelection()</td> <td class="mid"> <tr><td>getSelection()</td> <td class="mid">
<pre class="code"> <pre class="code">

docs/network/old/view.html → docs/old/old_network/view.html View File

@ -76,7 +76,7 @@
<h3>Methods</h3> <h3>Methods</h3>
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p> <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
<table class="moduleTable">
<table>
<tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr> <tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr>
<tr><td>getScale()</td> <td class="mid">Number</td><td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.</td></tr> <tr><td>getScale()</td> <td class="mid">Number</td><td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.</td></tr>
<tr><td>getPosition()</td> <td class="mid">Number</td><td>Returns the current central focus point of the camera.</td></tr> <tr><td>getPosition()</td> <td class="mid">Number</td><td>Returns the current central focus point of the camera.</td></tr>
@ -140,7 +140,7 @@
<h3>Events</h3> <h3>Events</h3>
<p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p> <p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p>
<table class="moduleTable">
<table>
<tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr> <tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr>
<tr><td>animationFinished</td><td class="mid">none</td><td>Fired when an animation is finished.</td> <tr><td>animationFinished</td><td class="mid">none</td><td>Fired when an animation is finished.</td>
</table> </table>

+ 209
- 208
docs/timeline/index.html
File diff suppressed because it is too large
View File


+ 1
- 1
examples/index.html View File

@ -4,7 +4,7 @@
<head> <head>
<title>vis.js | examples</title> <title>vis.js | examples</title>
<link href='../docs/css/style.css' type='text/css' rel='stylesheet'>
<link href='../docs/css/old_style.css' type='text/css' rel='stylesheet'>
<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>(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>
<body> <body>

+ 1
- 1
examples/timeline/index.html View File

@ -4,7 +4,7 @@
<head> <head>
<title>vis.js | timeline examples</title> <title>vis.js | timeline examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
<link href='../../docs/css/old_style.css' type='text/css' rel='stylesheet'>
<script src="../googleAnalytics.js"></script> <script src="../googleAnalytics.js"></script>
</head> </head>

+ 8
- 4
lib/DataSet.js View File

@ -142,8 +142,10 @@ DataSet.prototype.on = function(event, callback) {
}); });
}; };
// TODO: make this function deprecated (replaced with `on` since version 0.5)
DataSet.prototype.subscribe = DataSet.prototype.on;
// TODO: remove this deprecated function some day (replaced with `on` since version 0.5, deprecated since v4.0)
DataSet.prototype.subscribe = function () {
throw new Error('DataSet.subscribe is deprecated. Use DataSet.on instead.');
};
/** /**
* Unsubscribe from an event, remove an event listener * Unsubscribe from an event, remove an event listener
@ -157,8 +159,10 @@ DataSet.prototype.off = function(event, callback) {
} }
}; };
// TODO: make this function deprecated (replaced with `on` since version 0.5)
DataSet.prototype.unsubscribe = DataSet.prototype.off;
// TODO: remove this deprecated function some day (replaced with `on` since version 0.5, deprecated since v4.0)
DataSet.prototype.unsubscribe = function () {
throw new Error('DataSet.unsubscribe is deprecated. Use DataSet.off instead.');
};
/** /**
* Trigger an event * Trigger an event

+ 6
- 6
lib/network/Network.js View File

@ -24,7 +24,7 @@ import InteractionHandler from './modules/InteractionHandler';
import SelectionHandler from "./modules/SelectionHandler"; import SelectionHandler from "./modules/SelectionHandler";
import LayoutEngine from "./modules/LayoutEngine"; import LayoutEngine from "./modules/LayoutEngine";
import ManipulationSystem from "./modules/ManipulationSystem"; import ManipulationSystem from "./modules/ManipulationSystem";
import ConfigurationSystem from "./../shared/ConfigurationSystem";
import Configurator from "./../shared/Configurator";
import Validator from "./../shared/Validator"; import Validator from "./../shared/Validator";
import {printStyle} from "./../shared/Validator"; import {printStyle} from "./../shared/Validator";
import {allOptions, configureOptions} from './options.js'; import {allOptions, configureOptions} from './options.js';
@ -123,7 +123,7 @@ function Network(container, data, options) {
this.canvas._create(); this.canvas._create();
// setup configuration system // setup configuration system
this.configurationSystem = new ConfigurationSystem(this, this.body.container, configureOptions, this.canvas.pixelRatio);
this.configurator = new Configurator(this, this.body.container, configureOptions, this.canvas.pixelRatio);
// apply options // apply options
this.setOptions(options); this.setOptions(options);
@ -177,10 +177,10 @@ Network.prototype.setOptions = function (options) {
//this.view.setOptions(options.view); //this.view.setOptions(options.view);
//this.clustering.setOptions(options.clustering); //this.clustering.setOptions(options.clustering);
this.configurationSystem.setOptions(options.configure);
this.configurator.setOptions(options.configure);
// if the configuration system is enabled, copy all options and put them into the config system // if the configuration system is enabled, copy all options and put them into the config system
if (this.configurationSystem.options.enabled === true) {
if (this.configurator.options.enabled === true) {
let networkOptions = {nodes:{},edges:{},layout:{},interaction:{},manipulation:{},physics:{},global:{}}; let networkOptions = {nodes:{},edges:{},layout:{},interaction:{},manipulation:{},physics:{},global:{}};
util.deepExtend(networkOptions.nodes, this.nodesHandler.options); util.deepExtend(networkOptions.nodes, this.nodesHandler.options);
util.deepExtend(networkOptions.edges, this.edgesHandler.options); util.deepExtend(networkOptions.edges, this.edgesHandler.options);
@ -197,7 +197,7 @@ Network.prototype.setOptions = function (options) {
util.deepExtend(networkOptions.global, this.canvas.options); util.deepExtend(networkOptions.global, this.canvas.options);
util.deepExtend(networkOptions.global, this.options); util.deepExtend(networkOptions.global, this.options);
this.configurationSystem.setModuleOptions(networkOptions);
this.configurator.setModuleOptions(networkOptions);
} }
// handle network global options // handle network global options
@ -359,7 +359,7 @@ Network.prototype.destroy = function () {
delete this.manipulation; delete this.manipulation;
delete this.nodesHandler; delete this.nodesHandler;
delete this.edgesHandler; delete this.edgesHandler;
delete this.configurationSystem;
delete this.configurator;
delete this.images; delete this.images;
// delete emitter bindings // delete emitter bindings

lib/network/modules/components/ColorPicker.js → lib/shared/ColorPicker.js View File

@ -1,6 +1,6 @@
let Hammer = require('../../../module/hammer');
let hammerUtil = require('../../../hammerUtil');
let util = require('../../../util');
let Hammer = require('../module/hammer');
let hammerUtil = require('../hammerUtil');
let util = require('../util');
class ColorPicker { class ColorPicker {
constructor(pixelRatio = 1) { constructor(pixelRatio = 1) {

lib/shared/ConfigurationSystem.js → lib/shared/Configurator.js View File

@ -1,6 +1,6 @@
var util = require('../util'); var util = require('../util');
import ColorPicker from './../network/modules/components/ColorPicker'
import ColorPicker from './ColorPicker'
/** /**
* The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options. * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
@ -16,7 +16,7 @@ import ColorPicker from './../network/modules/components/ColorPicker'
* @param configureOptions | the fully configured and predefined options set found in allOptions.js * @param configureOptions | the fully configured and predefined options set found in allOptions.js
* @param pixelRatio | canvas pixel ratio * @param pixelRatio | canvas pixel ratio
*/ */
class ConfigurationSystem {
class Configurator {
constructor(parentModule, defaultContainer, configureOptions, pixelRatio = 1) { constructor(parentModule, defaultContainer, configureOptions, pixelRatio = 1) {
this.parent = parentModule; this.parent = parentModule;
this.changedOptions = []; this.changedOptions = [];
@ -35,7 +35,7 @@ class ConfigurationSystem {
this.moduleOptions = {}; this.moduleOptions = {};
this.domElements = []; this.domElements = [];
this.colorPicker = new ColorPicker(pixelRatio); this.colorPicker = new ColorPicker(pixelRatio);
this.wrapper;
this.wrapper = undefined;
} }
@ -92,25 +92,24 @@ class ConfigurationSystem {
/** /**
* Create all DOM elements * Create all DOM elements
* @param {Boolean | String} config
* @private * @private
*/ */
_create() { _create() {
this._clean(); this._clean();
this.changedOptions = []; this.changedOptions = [];
let config = this.options.filter;
let filter = this.options.filter;
let counter = 0; let counter = 0;
let show = false; let show = false;
for (let option in this.configureOptions) { for (let option in this.configureOptions) {
if (this.configureOptions.hasOwnProperty(option)) { if (this.configureOptions.hasOwnProperty(option)) {
this.allowCreation = false; this.allowCreation = false;
show = false; show = false;
if (typeof config === 'function') {
show = config(option,[]);
if (typeof filter === 'function') {
show = filter(option,[]);
show = show || this._handleObject(this.configureOptions[option], [option]); show = show || this._handleObject(this.configureOptions[option], [option]);
} }
else if (config === true || config.indexOf(option) !== -1) {
else if (filter === true || filter.indexOf(option) !== -1) {
show = true; show = true;
} }
@ -450,13 +449,16 @@ class ConfigurationSystem {
*/ */
_handleObject(obj, path = []) { _handleObject(obj, path = []) {
let show = false; let show = false;
let config = this.options.filter;
let filter = this.options.filter;
let visibleInSet = false; let visibleInSet = false;
for (let subObj in obj) { for (let subObj in obj) {
if (obj.hasOwnProperty(subObj)) { if (obj.hasOwnProperty(subObj)) {
show = false; show = false;
if (typeof config === 'function') {
show = config(subObj,path);
if (typeof filter === 'function') {
show = filter(subObj,path);
}
else if (filter === true) {
show = true;
} }
if (show !== false) { if (show !== false) {
@ -583,4 +585,4 @@ class ConfigurationSystem {
} }
export default ConfigurationSystem;
export default Configurator;

+ 3
- 4
lib/timeline/Core.js View File

@ -282,16 +282,15 @@ Core.prototype.setOptions = function (options) {
this.components.forEach(component => component.setOptions(options)); this.components.forEach(component => component.setOptions(options));
// enable/disable configure // enable/disable configure
if (this.configurationSystem) {
this.configurationSystem.setOptions(options.configure);
if (this.configurator) {
this.configurator.setOptions(options.configure);
// collect the settings of all components, and pass them to the configuration system // collect the settings of all components, and pass them to the configuration system
var appliedOptions = util.deepExtend({}, this.options); var appliedOptions = util.deepExtend({}, this.options);
this.components.forEach(function (component) { this.components.forEach(function (component) {
util.deepExtend(appliedOptions, component.options); util.deepExtend(appliedOptions, component.options);
}); });
this.configurationSystem.setModuleOptions({global: appliedOptions});
console.log(appliedOptions)
this.configurator.setModuleOptions({global: appliedOptions});
} }
// redraw everything // redraw everything

+ 16
- 8
lib/timeline/Graph2d.js View File

@ -10,11 +10,11 @@ var CurrentTime = require('./component/CurrentTime');
var CustomTime = require('./component/CustomTime'); var CustomTime = require('./component/CustomTime');
var LineGraph = require('./component/LineGraph'); var LineGraph = require('./component/LineGraph');
var ConfigurationSystem = require('../shared/ConfigurationSystem');
var Configurator = require('../shared/Configurator');
var Validator = require('../shared/Validator').default; var Validator = require('../shared/Validator').default;
var printStyle = require('../shared/Validator').printStyle; var printStyle = require('../shared/Validator').printStyle;
var allOptions = require('./graph2dOptions').allOptions;
var configureOptions = require('./graph2dOptions').configureOptions;
var allOptions = require('./optionsGraph2d').allOptions;
var configureOptions = require('./optionsGraph2d').configureOptions;
/** /**
* Create a timeline visualization * Create a timeline visualization
@ -105,13 +105,11 @@ function Graph2d (container, items, groups, options) {
me.emit('contextmenu', me.getEventProperties(event)) me.emit('contextmenu', me.getEventProperties(event))
}; };
// setup configuration system
this.configurator = new Configurator(this, container, configureOptions);
// apply options // apply options
if (options) { if (options) {
let errorFound = Validator.validate(options, allOptions);
if (errorFound === true) {
console.log('%cErrors have been found in the supplied options object.', printStyle);
}
this.setOptions(options); this.setOptions(options);
} }
@ -132,6 +130,16 @@ function Graph2d (container, items, groups, options) {
// Extend the functionality from Core // Extend the functionality from Core
Graph2d.prototype = new Core(); Graph2d.prototype = new Core();
Graph2d.prototype.setOptions = function (options) {
// validate options
let errorFound = Validator.validate(options, allOptions);
if (errorFound === true) {
console.log('%cErrors have been found in the supplied options object.', printStyle);
}
Core.prototype.setOptions.call(this, options);
};
/** /**
* Set items * Set items
* @param {vis.DataSet | Array | null} items * @param {vis.DataSet | Array | null} items

+ 8
- 6
lib/timeline/Timeline.js View File

@ -10,11 +10,11 @@ var CurrentTime = require('./component/CurrentTime');
var CustomTime = require('./component/CustomTime'); var CustomTime = require('./component/CustomTime');
var ItemSet = require('./component/ItemSet'); var ItemSet = require('./component/ItemSet');
var ConfigurationSystem = require('../shared/ConfigurationSystem');
var Configurator = require('../shared/Configurator');
var Validator = require('../shared/Validator').default; var Validator = require('../shared/Validator').default;
var printStyle = require('../shared/Validator').printStyle; var printStyle = require('../shared/Validator').printStyle;
var allOptions = require('./options').allOptions;
var configureOptions = require('./options').configureOptions;
var allOptions = require('./optionsTimeline').allOptions;
var configureOptions = require('./optionsTimeline').configureOptions;
/** /**
* Create a timeline visualization * Create a timeline visualization
@ -118,7 +118,7 @@ function Timeline (container, items, groups, options) {
}; };
// setup configuration system // setup configuration system
this.configurationSystem = new ConfigurationSystem(this, container, configureOptions);
this.configurator = new Configurator(this, container, configureOptions);
// apply options // apply options
if (options) { if (options) {
@ -168,8 +168,10 @@ Timeline.prototype.setOptions = function (options) {
// force recreation of all items // force recreation of all items
var itemsData = this.itemsData; var itemsData = this.itemsData;
if (itemsData) { if (itemsData) {
this.setItems(null); // remove all
this.setItems(itemsData); // add all
var selection = this.getSelection();
this.setItems(null); // remove all
this.setItems(itemsData); // add all
this.setSelection(selection); // restore selection
} }
} }
} }

lib/timeline/graph2dOptions.js → lib/timeline/optionsGraph2d.js View File

@ -22,9 +22,9 @@ let any = 'any';
let allOptions = { let allOptions = {
configure: { configure: {
enabled: {boolean}, enabled: {boolean},
filter: {boolean,string,array},
filter: {boolean,fn},
container: {dom}, container: {dom},
__type__: {object,boolean,string,array}
__type__: {object,boolean,fn}
}, },
//globals : //globals :
@ -155,7 +155,7 @@ let allOptions = {
zoomMax: {number}, zoomMax: {number},
zoomMin: {number}, zoomMin: {number},
__type__: {object} __type__: {object}
}
};
let configureOptions = { let configureOptions = {
global: { global: {
@ -180,7 +180,7 @@ let configureOptions = {
drawPoints: { drawPoints: {
enabled: true, enabled: true,
size: [6,2,30,1], size: [6,2,30,1],
style: 'square' // square, circle
style: ['square', 'circle'] // square, circle
}, },
dataAxis: { dataAxis: {
showMinorLabels: true, showMinorLabels: true,
@ -245,7 +245,7 @@ let configureOptions = {
maxHeight: '', maxHeight: '',
min: '', min: '',
minHeight: '', minHeight: '',
movable:true,
moveable:true,
orientation: ['both', 'bottom', 'top'], orientation: ['both', 'bottom', 'top'],
showCurrentTime: false, showCurrentTime: false,
showMajorLabels: true, showMajorLabels: true,

lib/timeline/options.js → lib/timeline/optionsTimeline.js View File

@ -22,9 +22,9 @@ let any = 'any';
let allOptions = { let allOptions = {
configure: { configure: {
enabled: {boolean}, enabled: {boolean},
filter: {boolean,string,array},
filter: {boolean,fn},
container: {dom}, container: {dom},
__type__: {object,boolean,string,array}
__type__: {object,boolean,fn}
}, },
//globals : //globals :

Loading…
Cancel
Save