Alex de Mulder
10 years ago
37 changed files with 3319 additions and 1199 deletions
Split View
Diff Options
-
+0 -228docs/css/newdocs.css
-
+83 -0docs/css/old_style.css
-
+165 -55docs/css/style.css
-
+1002 -0docs/dataset/dataset.html
-
+392 -0docs/dataset/dataview.html
-
+222 -209docs/graph2d/index.html
-
+732 -0docs/graph3d/index.html
-
+2 -2docs/index.html
-
+14 -15docs/network/configure.html
-
+108 -108docs/network/edges.html
-
+10 -10docs/network/groups.html
-
+91 -88docs/network/index.html
-
+19 -19docs/network/interaction.html
-
+9 -9docs/network/layout.html
-
+12 -12docs/network/manipulation.html
-
+118 -118docs/network/nodes.html
-
+46 -48docs/network/physics.html
-
+1 -1docs/old/dataset.html
-
+1 -1docs/old/dataview.html
-
+4 -4docs/old/graph3d.html
-
+3 -3docs/old/old_network/canvas.html
-
+2 -2docs/old/old_network/clustering.html
-
+3 -3docs/old/old_network/rendering.html
-
+2 -2docs/old/old_network/selection.html
-
+2 -2docs/old/old_network/view.html
-
+209 -208docs/timeline/index.html
-
+1 -1examples/index.html
-
+1 -1examples/timeline/index.html
-
+8 -4lib/DataSet.js
-
+6 -6lib/network/Network.js
-
+3 -3lib/shared/ColorPicker.js
-
+14 -12lib/shared/Configurator.js
-
+3 -4lib/timeline/Core.js
-
+16 -8lib/timeline/Graph2d.js
-
+8 -6lib/timeline/Timeline.js
-
+5 -5lib/timeline/optionsGraph2d.js
-
+2 -2lib/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 { | |||
| 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.<String, String></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[ ] | Object.<String, String></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 [, options] [, 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"> | |||
| <!DOCTYPE HTML> | |||
| <html> | |||
| <head> | |||
| <title>Graph 3D demo</title> | |||
| <style> | |||
| body {font: 10pt arial;} | |||
| </style> | |||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||
| <script type="text/javascript"> | |||
| 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 < axisMax; x+=axisStep) { | |||
| for (var y = 0; y < 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); | |||
| } | |||
| </script> | |||
| </head> | |||
| <body onload="drawVisualization();"> | |||
| <div id="mygraph"></div> | |||
| </body> | |||
| </html> | |||
| </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: 1.0, vertical: 0.5, distance: 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: 1.0, vertical: 0.5, distance: 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
+ 14
- 15
docs/network/configure.html
View File
+ 108
- 108
docs/network/edges.html
View File
+ 10
- 10
docs/network/groups.html
View File
+ 91
- 88
docs/network/index.html
View File
+ 19
- 19
docs/network/interaction.html
View File
+ 9
- 9
docs/network/layout.html
View File
+ 12
- 12
docs/network/manipulation.html
View File
+ 118
- 118
docs/network/nodes.html
View File
+ 46
- 48
docs/network/physics.html
View File
docs/dataset.html → docs/old/dataset.html
View File
docs/dataview.html → docs/old/dataview.html
View File
docs/graph3d.html → docs/old/graph3d.html
View File
docs/network/old/canvas.html → docs/old/old_network/canvas.html
View File
docs/network/old/clustering.html → docs/old/old_network/clustering.html
View File
docs/network/old/rendering.html → docs/old/old_network/rendering.html
View File
docs/network/old/selection.html → docs/old/old_network/selection.html
View File
docs/network/old/view.html → docs/old/old_network/view.html
View File
+ 209
- 208
docs/timeline/index.html
File diff suppressed because it is too large
View File
+ 1
- 1
examples/index.html
View File
+ 1
- 1
examples/timeline/index.html
View File
+ 8
- 4
lib/DataSet.js
View File
+ 6
- 6
lib/network/Network.js
View File
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 { | |||
| constructor(pixelRatio = 1) { | |||