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

unified the docs a bit

flowchartTest
Alex de Mulder 9 years ago
parent
85931ba623
commit
b825e3f119
9 changed files with 378 additions and 56 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      docs/network/edges.html
  2. +46
    -8
      docs/network/interaction.html
  3. +39
    -1
      docs/network/layout.html
  4. +55
    -5
      docs/network/manipulation.html
  5. +113
    -17
      docs/network/nodes.html
  6. +66
    -5
      docs/network/physics.html
  7. +25
    -8
      docs/network/rendering.html
  8. +26
    -5
      docs/network/selection.html
  9. +7
    -6
      docs/network/view.html

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

@ -87,7 +87,7 @@
<h3>Options</h3> <h3>Options</h3>
<p>The options for the canvas have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
<p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p> in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p> <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">

+ 46
- 8
docs/network/interaction.html View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en"><head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -18,21 +19,18 @@
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
</script> </script>
<style>
</style>
<script type="text/javascript" src="../js/toggleTable.js"></script> <script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div class="container"> <div class="container">
@ -71,6 +69,46 @@
<p>Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.</p> <p>Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.</p>
<h3>Options</h3> <h3>Options</h3>
<p>The options for the interaction module have to be contained in an object titled 'interaction'.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
interaction:{
dragNodes:true,
dragView: true,
zoomView: true,
hoverEnabled: false,
navigationButtons: false,
tooltipDelay: 300,
keyboard: {
enabled: false,
speed: {x: 10, y: 10, zoom: 0.02},
bindToWindow: true
}
}
}
network.setOptions(options);
</pre>
<pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
interaction:{
keyboard: false
}
}
network.setOptions(options);
</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"> <table class="moduleTable" id="optionTable">
<tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr> <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>

+ 39
- 1
docs/network/layout.html View File

@ -17,7 +17,9 @@
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <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> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
@ -26,6 +28,7 @@
<script type="text/javascript" src="../js/toggleTable.js"></script> <script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<body onload="prettyPrint();">
<!-- NAVBAR <!-- NAVBAR
================================================== --> ================================================== -->
<body> <body>
@ -67,6 +70,41 @@
<p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p> <p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>
<h3>Options</h3> <h3>Options</h3>
<p>The options for the layout module have to be contained in an object titled 'layout'.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
layout: {
randomSeed: undefined,
hierarchical: {
enabled:false,
levelSeparation: 150,
direction: 'UD', // UD, DU, LR, RL
sortMethod: 'hubsize' // hubsize, directed
}
}
}
network.setOptions(options);
</pre>
<pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
layout:{
hierarchical: true
}
}
network.setOptions(options);
</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"> <table class="moduleTable" id="optionTable">
<tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr> <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>

+ 55
- 5
docs/network/manipulation.html View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en"><head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -19,6 +19,10 @@
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
@ -26,9 +30,7 @@
<script type="text/javascript" src="../js/toggleTable.js"></script> <script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div class="container"> <div class="container">
@ -67,7 +69,55 @@
<p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p> <p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>
<h3>Options</h3> <h3>Options</h3>
<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>The options for the manipulation module have to be contained in an object titled 'manipulation'.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
manupulation: {
enabled: false,
initiallyActive: false,
locale: 'en',
locales: locales,
functionality:{
addNode: true,
addEdge: true,
editNode: true,
editEdge: true,
deleteNode: true,
deleteEdge: true
},
handlerFunctions: {
addNode: undefined,
addEdge: undefined,
editNode: undefined,
editEdge: undefined,
deleteNode: undefined,
deleteEdge: undefined
},
controlNodeStyle:{
// all node options are valid.
}
}
}
network.setOptions(options);
</pre>
<pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
manipulation: false
}
network.setOptions(options);
</pre>
<table class="moduleTable" id="optionTable"> <table class="moduleTable" id="optionTable">
<tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr> <tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">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>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>

+ 113
- 17
docs/network/nodes.html View File

@ -1,19 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<script>(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-61231638-1', 'auto');
ga('send', 'pageview');</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -33,6 +20,10 @@
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
@ -40,9 +31,7 @@
<script type="text/javascript" src="../js/toggleTable.js"></script> <script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div class="container"> <div class="container">
@ -90,8 +79,115 @@
<p>Handles the creation and deletion of nodes and contains the global node options and styles.</p> <p>Handles the creation and deletion of nodes and contains the global node options and styles.</p>
<h3>Options</h3> <h3>Options</h3>
<p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined
in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
nodes:{
borderWidth: 1,
borderWidthSelected: undefined,
brokenImage:undefined,
color: {
border: '#2B7CE9',
background: '#97C2FC',
highlight: {
border: '#2B7CE9',
background: '#D2E5FF'
},
hover: {
border: '#2B7CE9',
background: '#D2E5FF'
}
},
fixed: {
x:false,
y:false
},
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
stroke: 0, // px
strokeColor: '#ffffff',
align: 'horizontal'
},
group: undefined,
hidden: false,
icon: {
face: 'FontAwesome',
code: undefined,
size: 50, //50,
color:'#2B7CE9'
},
image: undefined,
label: undefined,
level: undefined,
mass: 1,
physics: true,
scaling: {
min: 10,
max: 30,
label: {
enabled: false,
min: 14,
max: 30,
maxVisible: 30,
drawThreshold: 3
},
customScalingFunction: function (min,max,total,value) {
if (max === min) {
return 0.5;
}
else {
let scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
}
},
shadow:{
enabled: false,
size:10,
x:5,
y:5
},
shape: 'ellipse',
size: 25,
title: undefined,
value: undefined,
x: undefined,
y: undefined
}
}
network.setOptions(options);
</pre>
<pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
nodes:{
color: '#ff0000',
fixed: false,
font: '12px arial red',
scaling: {
label: true
},
shadow: true
}
}
network.setOptions(options);
</pre>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</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="moduleTable" id="optionTable">
<tr class="header"> <tr class="header">
<td class="name">name</td> <td class="name">name</td>

+ 66
- 5
docs/network/physics.html View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en"><head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -20,6 +20,10 @@
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
@ -27,9 +31,7 @@
<script type="text/javascript" src="../js/toggleTable.js"></script> <script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div class="container"> <div class="container">
@ -68,7 +70,66 @@
<p>Handles the HTML part of the canvas.</p> <p>Handles the HTML part of the canvas.</p>
<h3>Options</h3> <h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<p>The options for the physics have to be contained in an object titled 'physics'.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
physics:{
barnesHut: {
gravitationalConstant: -2000,
centralGravity: 0.3,
springLength: 95,
springConstant: 0.04,
damping: 0.09
},
repulsion: {
centralGravity: 0.2,
springLength: 200,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
hierarchicalRepulsion: {
centralGravity: 0.0,
springLength: 100,
springConstant: 0.01,
nodeDistance: 120,
damping: 0.09
},
maxVelocity: 50,
minVelocity: 0.1,
solver: 'barnesHut',
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 100,
onlyDynamicEdges: false,
fit: true
},
timestep: 0.5
}
}
network.setOptions(options);
</pre>
<pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
physics:{
stabilization: false
}
}
network.setOptions(options);
</pre>
<p>All of the individual options are explained here:</p>
<table class="moduleTable" id="optionTable"> <table class="moduleTable" id="optionTable">
<tr class="header"><td class="name">name</td><td class="type">type</td><td>default</td><td>description</td></tr> <tr class="header"><td class="name">name</td><td class="type">type</td><td>default</td><td>description</td></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 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>

+ 25
- 8
docs/network/rendering.html View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en"><head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -19,18 +19,18 @@
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
</script> </script>
<style>
</style>
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div class="container"> <div class="container">
@ -69,7 +69,24 @@
<p>Handles the rendering aspect of vis. It governs the render loop, it draws the nodes and edges and provides events to allow users to hook into the drawing.</p> <p>Handles the rendering aspect of vis. It governs the render loop, it draws the nodes and edges and provides events to allow users to hook into the drawing.</p>
<h3>Options</h3> <h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<p>The options for the rendering have to be contained in an object titled 'rendering'.</p>
<p>Click on the options shown to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options hidden" id="fullOptions">
var options = {
rendering:{
hideEdgesOnDrag: true,
hideNodesOnDrag: false
}
}
network.setOptions(options);
</pre>
<p>All of the individual options are explained here:</p>
<table class="moduleTable"> <table class="moduleTable">
<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>

+ 26
- 5
docs/network/selection.html View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en">
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -19,15 +20,18 @@
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
</script> </script>
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div class="container"> <div class="container">
@ -66,7 +70,24 @@
<p>Handles the selection of nodes and edges.</p> <p>Handles the selection of nodes and edges.</p>
<h3>Options</h3> <h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<p>The options for the selection have to be contained in an object titled 'selection'.</p>
<p>Click on the options shown to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options hidden" id="fullOptions">
var options = {
selection:{
select: true,
selectConnectedEdges: false
}
}
network.setOptions(options);
</pre>
<p>All of the individual options are explained here:</p>
<table class="moduleTable"> <table class="moduleTable">
<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>select</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>select</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>

+ 7
- 6
docs/network/view.html View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en"><head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -19,16 +19,18 @@
<![endif]--> <![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 src="../js/smooth-scroll.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
</script> </script>
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head> </head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<div class="container"> <div class="container">
@ -69,7 +71,6 @@
<h3>Options</h3> <h3>Options</h3>
<p>The view has no options.</p> <p>The view has no options.</p>
<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 class="moduleTable">

Write Preview
Loading…
Cancel
Save