Browse Source

added dot and gephi parser to docs, need to include examples in the docs everywhere. Added working example code at the top of the docs and link to example 1

flowchartTest
Alex de Mulder 9 years ago
parent
commit
14c4a10c9b
22 changed files with 313 additions and 186 deletions
  1. +34
    -31
      dist/vis.js
  2. +1
    -1
      dist/vis.map
  3. +5
    -5
      dist/vis.min.js
  4. +17
    -25
      docs/js/toggleTable.js
  5. +0
    -77
      docs/network.html
  6. +3
    -3
      docs/network/configure.html
  7. +3
    -3
      docs/network/edges.html
  8. +2
    -2
      docs/network/groups.html
  9. +3
    -3
      docs/network/interaction.html
  10. +3
    -3
      docs/network/layout.html
  11. +3
    -3
      docs/network/manipulation.html
  12. +216
    -7
      docs/network/new_network.html
  13. +3
    -3
      docs/network/nodes.html
  14. +0
    -0
      docs/network/old/canvas.html
  15. +0
    -0
      docs/network/old/clustering.html
  16. +0
    -0
      docs/network/old/rendering.html
  17. +0
    -0
      docs/network/old/selection.html
  18. +0
    -0
      docs/network/old/view.html
  19. +3
    -3
      docs/network/physics.html
  20. +2
    -0
      index.js
  21. +9
    -12
      lib/network/Network.js
  22. +6
    -5
      lib/network/gephiParser.js

+ 34
- 31
dist/vis.js View File

@ -143,6 +143,12 @@ return /******/ (function(modules) { // webpackBootstrap
dotparser: __webpack_require__(38),
gephiParser: __webpack_require__(39)
};
exports.network.convertDot = function (input) {
return exports.network.dotparser.DOTToGraph(input);
};
exports.network.convertGephi = function (input, options) {
return exports.network.gephiParser.parseGephi(input, options);
};
// Deprecated since v3.0.0
exports.Graph = function () {
@ -6451,8 +6457,7 @@ return /******/ (function(modules) { // webpackBootstrap
// validate options
var errorFound = Validator.validate(options, allOptions);
if (errorFound === true) {
options = {};
console.log('%cErrors have been found in the supplied options object. None of the options will be used.', printStyle);
console.log('%cErrors have been found in the supplied options object.', printStyle);
}
Core.prototype.setOptions.call(this, options);
@ -15620,15 +15625,15 @@ return /******/ (function(modules) { // webpackBootstrap
var _modulesManipulationSystem2 = _interopRequireDefault(_modulesManipulationSystem);
var _modulesConfigurationSystem = __webpack_require__(45);
var _sharedConfigurationSystem = __webpack_require__(45);
var _modulesConfigurationSystem2 = _interopRequireDefault(_modulesConfigurationSystem);
var _sharedConfigurationSystem2 = _interopRequireDefault(_sharedConfigurationSystem);
var _modulesValidator = __webpack_require__(46);
var _sharedValidator = __webpack_require__(46);
var _modulesValidator2 = _interopRequireDefault(_modulesValidator);
var _sharedValidator2 = _interopRequireDefault(_sharedValidator);
var _modulesComponentsAllOptionsJs = __webpack_require__(65);
var _optionsJs = __webpack_require__(65);
// Load custom shapes into CanvasRenderingContext2D
__webpack_require__(66);
@ -15738,7 +15743,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.canvas._create();
// setup configuration system
this.configurationSystem = new _modulesConfigurationSystem2['default'](this, this.body.container, _modulesComponentsAllOptionsJs.configureOptions, this.canvas.pixelRatio);
this.configurationSystem = new _sharedConfigurationSystem2['default'](this, this.body.container, _optionsJs.configureOptions, this.canvas.pixelRatio);
// apply options
this.setOptions(options);
@ -15757,10 +15762,9 @@ return /******/ (function(modules) { // webpackBootstrap
Network.prototype.setOptions = function (options) {
if (options !== undefined) {
var errorFound = _modulesValidator2['default'].validate(options, _modulesComponentsAllOptionsJs.allOptions);
var errorFound = _sharedValidator2['default'].validate(options, _optionsJs.allOptions);
if (errorFound === true) {
options = {};
console.log('%cErrors have been found in the supplied options object. None of the options will be used.', _modulesValidator.printStyle);
console.log('%cErrors have been found in the supplied options object.', _sharedValidator.printStyle);
}
// copy the global fields over
@ -15914,19 +15918,17 @@ return /******/ (function(modules) { // webpackBootstrap
this.setOptions(data && data.options);
// set all data
if (data && data.dot) {
console.log('The dot property has been depricated. Please use the static convertDot method to convert DOT into vis.network format and use the normal data format with nodes and edges. This converter is used like this: var data = vis.network.convertDot(dotString);');
// parse DOT file
if (data && data.dot) {
var dotData = dotparser.DOTToGraph(data.dot);
this.setData(dotData);
return;
}
var dotData = dotparser.DOTToGraph(data.dot);
this.setData(dotData);
return;
} else if (data && data.gephi) {
// parse DOT file
if (data && data.gephi) {
var gephiData = gephiParser.parseGephi(data.gephi);
this.setData(gephiData);
return;
}
console.log('The gephi property has been depricated. Please use the static convertGephi method to convert gephi into vis.network format and use the normal data format with nodes and edges. This converter is used like this: var data = vis.network.convertGephi(gephiJson);');
var gephiData = gephiParser.parseGephi(data.gephi);
this.setData(gephiData);
return;
} else {
this.nodesHandler.setData(data && data.nodes, true);
this.edgesHandler.setData(data && data.edges, true);
@ -17062,7 +17064,7 @@ return /******/ (function(modules) { // webpackBootstrap
var nodes = [];
var options = {
edges: {
inheritColor: true
inheritColor: false
},
nodes: {
fixed: false,
@ -17071,9 +17073,9 @@ return /******/ (function(modules) { // webpackBootstrap
};
if (options !== undefined) {
options.nodes['fixed'] = optionsObj.fixed !== undefined ? options.fixed : false;
options.nodes['fixed'] = optionsObj.fixed !== undefined ? options.fixed : true;
options.nodes['parseColor'] = optionsObj.parseColor !== undefined ? options.parseColor : false;
options.edges['inheritColor'] = optionsObj.inheritColor !== undefined ? options.inheritColor : true;
options.edges['inheritColor'] = optionsObj.inheritColor !== undefined ? options.inheritColor : false;
}
var gEdges = gephiJSON.edges;
@ -17087,8 +17089,9 @@ return /******/ (function(modules) { // webpackBootstrap
edge['attributes'] = gEdge.attributes;
// edge['value'] = gEdge.attributes !== undefined ? gEdge.attributes.Weight : undefined;
// edge['width'] = edge['value'] !== undefined ? undefined : edgegEdge.size;
edge['color'] = gEdge.color;
edge['inheritColor'] = edge['color'] !== undefined ? false : options.inheritColor;
if (gEdge.color && options.inheritColor === false) {
edge['color'] = gEdge.color;
}
edges.push(edge);
}
@ -18515,9 +18518,9 @@ return /******/ (function(modules) { // webpackBootstrap
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var _componentsColorPicker = __webpack_require__(72);
var _networkModulesComponentsColorPicker = __webpack_require__(72);
var _componentsColorPicker2 = _interopRequireDefault(_componentsColorPicker);
var _networkModulesComponentsColorPicker2 = _interopRequireDefault(_networkModulesComponentsColorPicker);
var util = __webpack_require__(1);
@ -18557,7 +18560,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.configureOptions = configureOptions;
this.moduleOptions = {};
this.domElements = [];
this.colorPicker = new _componentsColorPicker2['default'](pixelRatio);
this.colorPicker = new _networkModulesComponentsColorPicker2['default'](pixelRatio);
this.wrapper;
}
@ -34192,9 +34195,9 @@ return /******/ (function(modules) { // webpackBootstrap
var _nodesShapesTriangleDown2 = _interopRequireDefault(_nodesShapesTriangleDown);
var _Validator = __webpack_require__(46);
var _sharedValidator = __webpack_require__(46);
var _Validator2 = _interopRequireDefault(_Validator);
var _sharedValidator2 = _interopRequireDefault(_sharedValidator);
var util = __webpack_require__(1);

+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 5
- 5
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 17
- 25
docs/js/toggleTable.js View File

@ -57,33 +57,25 @@ function toggleTable(tableId, parent, clickedRow) {
}
}
function toggleTab(showTabId, showDOMid, hideTabId, hideDOMid, hideTabId2, hideDOMid2) {
if (hideTabId2 !== undefined) {
document.getElementById(hideTabId2).className = '';
document.getElementById(hideDOMid2).className = document.getElementById(hideDOMid2).className.replace(' hidden','');
document.getElementById(hideDOMid2).className += ' hidden';
}
if (hideTabId !== undefined) {
document.getElementById(hideTabId).className = '';
document.getElementById(hideDOMid).className = document.getElementById(hideDOMid).className.replace(' hidden','');
document.getElementById(hideDOMid).className += ' hidden';
function toggleTab(tabThis) {
var parentNode = tabThis.parentNode;
var active = tabThis.className.indexOf('active') !== -1;
for (var i = 0; i < parentNode.children.length; i++) {
var child = parentNode.children[i];
var targetNodeId = child.getAttribute('targetNode');
if (targetNodeId) {
var targetNode = document.getElementById(child.getAttribute('targetNode'));
targetNode.className = targetNode.className.replace(' hidden', '').replace('hidden', '') + ' hidden';
}
child.className = child.className.replace(' active','').replace('active','');
}
document.getElementById(showTabId).className = 'active';
document.getElementById(showDOMid).className = document.getElementById(showDOMid).className.replace(' hidden','');
}
function hideOptions(hideTabId1, hidePreId1, hideTabId2, hidePreId2) {
document.getElementById(hideTabId1).className = '';
document.getElementById(hidePreId1).className = document.getElementById(hidePreId1).className.replace(' hidden','');
document.getElementById(hidePreId1).className += ' hidden';
if (hideTabId2 !== undefined) {
document.getElementById(hideTabId2).className = '';
document.getElementById(hidePreId2).className = document.getElementById(hidePreId2).className.replace(' hidden','');
document.getElementById(hidePreId2).className += ' hidden';
// activate the tab
tabThis.className += ' active';
var ownTargetNodeId = tabThis.getAttribute('targetNode');
if (ownTargetNodeId) {
var ownTargetNode = document.getElementById(ownTargetNodeId);
ownTargetNode.className = ownTargetNode.className.replace(' hidden','').replace('hidden','');
}
}

+ 0
- 77
docs/network.html View File

@ -484,83 +484,6 @@ var network = new vis.Network(container, data);
<h3 id="Gephi_import">Gephi import (JSON)</h3>
<p>
network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
An example exists showing how to get a JSON file into Vis: <a href="../examples/network/30_importing_from_gephi.html">30_importing_from_gephi</a>.
</p>
<p>
Example usage:
</p>
<pre class="prettyprint lang-js">
// load the JSON file containing the Gephi network.
var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30
// create a data object with the gephi key:
var data = {
gephi: gephiJSON
};
// create a network
var network = new vis.Network(container, data);
</pre>
Alternatively you can use the parser manually:
<pre class="prettyprint lang-js">
// load the JSON file containing the Gephi network.
var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30
// parse the gephi file to receive an object
// containing nodes and edges in vis format.
var parsed = vis.network.gephiParser.parseGephi(gephiJSON);
// provide data in the normal fashion
var data = {
nodes: parsed.nodes,
edged: parsed.edges
};
// create a network
var network = new vis.Network(container, data);
</pre>
<h4>Gephi parser options</h4>
There are a few options you can use to tell Vis what to do with the data from Gephi.
<pre class="prettyprint lang-js">
var parserOptions = {
allowedToMove: false,
parseColor: false
}
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, parserOptions);
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>allowedToMove</td>
<td>Boolean</td>
<td>false</td>
<td>
If true, the nodes will move according to the physics model after import. If false, the nodes do not move at all.
</td>
</tr>
<tr>
<td>parseColor</td>
<td>Boolean</td>
<td>false</td>
<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.
</td>
</tr>
</table>
<h2 id="Configuration_options">Configuration options</h2>

+ 3
- 3
docs/network/configure.html View File

@ -89,9 +89,9 @@
<p>The options for the canvas have to be contained in an object titled 'configure'.</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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">

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

@ -94,9 +94,9 @@
</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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">

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

@ -88,8 +88,8 @@
<p>The options for the canvas have to be contained in an object titled 'groups'.</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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">options shown</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options hidden" id="fullOptions">

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

@ -75,9 +75,9 @@
<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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">

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

@ -76,9 +76,9 @@
<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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">

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

@ -75,9 +75,9 @@
<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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">

+ 216
- 7
docs/network/new_network.html View File

@ -50,6 +50,19 @@
}
</style>
<script>
function toggleGettingStarted(aThis) {
var gettingStartedDiv = document.getElementById('gettingStarted');
if (aThis.innerHTML.indexOf("Show") !== -1) {
gettingStartedDiv.className = '';
aThis.innerHTML = 'Hide the getting started again.';
}
else {
gettingStartedDiv.className = 'hidden';
aThis.innerHTML = 'Show the getting started!';
}
}
</script>
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head>
@ -99,15 +112,89 @@
<div class="container full">
<h1>Network</h1>
<p>Network is a visualization to display networks and networks consisting of nodes and edges. The visualization
is easy to use and supports custom shapes, styles, colors, sizes, images, and more.
The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To
handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p>
<p>As of 4.0, the network consists of individual modules which handle specific parts of the network. These modules
have their own docs, options, methods and events which you can access
by clicking on the modules in the list below.</p>
<a class="btn btn-primary" role="button" onclick="toggleGettingStarted(this)">Show the getting started!</a>
<div id="gettingStarted" class="hidden">
<h3>Creating a Network</h3>
<p>
Creating a vis network is easy. <a href="http://visjs.org/#download_install" target="_blank">It requires you to
include the vis.js and css files which you can get here</a>. If you have these
added to your application, you will need to specify your nodes and edges. You can use DOT language or export
nodes and edges from Gephi if you'd like but we will do it without these for now.
For more information on this click the tabs below. You can also use the vis.DataSets for dynamic data binding,
for instance, changing the color, label or any option after you have initialized the network.
<br><br>
Once you have the data, all you need is a container div to tell vis where to put your network. Additionally you
can use an options object to customize many aspects of the network. In code this
looks like this:</p>
<pre class="prettyprint lang-html options">
&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mynetwork"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {};
// initialize your network!
var network = new vis.Network(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><a href="http://visjs.org/examples/network/01_basic_usage.html" target="_blank">The result of the code above will be the basic example which is shown here.</a></p>
<br>
</div>
<h3>Modules</h3>
<table class="moduleTable">
<tr>
@ -155,14 +242,19 @@
<ul class="nav nav-tabs">
<li role="presentation" class="active"
onclick="toggleTab('optionsTab','optionsDiv','methodsTab','methodsDiv','eventsTab','eventsDiv');"
id="optionsTab"><a>Options</a></li>
onclick="toggleTab(this);"
targetNode="optionsDiv"><a>Options</a></li>
<li role="presentation"
onclick="toggleTab(this);"
targetNode="methodsDiv"><a>Methods</a></li>
<li role="presentation" onclick="toggleTab(this);"
targetNode="eventsDiv"><a>Events</a></li>
<li role="presentation"
onclick="toggleTab('methodsTab','methodsDiv','eventsTab','eventsDiv','optionsTab','optionsDiv');"
id="methodsTab"><a>Methods</a></li>
onclick="toggleTab(this);"
targetNode="dotParserDiv"><a>DOT language</a></li>
<li role="presentation"
onclick="toggleTab('eventsTab','eventsDiv','methodsTab','methodsDiv','optionsTab','optionsDiv');"
id="eventsTab"><a>Events</a></li>
onclick="toggleTab(this);"
targetNode="gephiDiv"><a>Importing from Gephi</a></li>
</ul>
<br>
@ -253,6 +345,7 @@ network.setOptions(options);
<br>
<br>
<h4 id="locales">Custom locales</h4>
<p>The locales object has the following format:</p>
<pre class="prettyprint lang-js">
var locales = {
@ -272,7 +365,8 @@ var locales = {
editClusterError: 'Clusters cannot be edited.'
}
}</pre>
<p>If you want to define your own locale, you can change the key ('en' here) and change all the string. You can then use your new key in the locale option.</p>
<p>If you want to define your own locale, you can change the key ('en' here) and change all the string. You can
then use your new key in the locale option.</p>
</div>
<div id="methodsDiv" class=" hidden">
<h3>All Methods</h3>
@ -1214,7 +1308,122 @@ var options = {
</table>
</div>
<div id="dotParserDiv" class=" hidden">
<p>
Network supports data in the
<a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
To use data in the DOT language, you can use the vis.network.convertDot converter to transform the DOT
language
into a vis.Network compatible nodes, edges and options objects. You can extend the options object with other
options if you'd like.
</p>
<p>
Example usage:
</p>
<pre class="prettyprint lang-js">
// provide data in the DOT language
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.network.convertDot(DOTstring);
var data = {
nodes: parsedData.nodes,
edges: parsedData.edges
}
var options = parsedData.options;
// you can extend the options like a normal JSON variable:
options.nodes = {
color: 'red'
}
// create a network
var network = new vis.Network(container, data, options);
</pre>
</div>
<div id="gephiDiv" class=" hidden">
<p>
Network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
An example exists showing how to get a JSON file into Vis: <a
href="../examples/network/30_importing_from_gephi.html">30_importing_from_gephi</a>.
</p>
<p>
Example usage:
</p>
<pre class="prettyprint lang-js">
// load the JSON file containing the Gephi network.
var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30
// you can customize the result like with these options. These are explained below.
// These are the default options.
var parserOptions = {
edges: {
inheritColors: false
},
nodes: {
fixed: true,
parseColor: false
}
}
// parse the gephi file to receive an object
// containing nodes and edges in vis format.
var parsed = vis.network.convertGephi(gephiJSON, parserOptions);
// provide data in the normal fashion
var data = {
nodes: parsed.nodes,
edged: parsed.edges
};
// create a network
var network = new vis.Network(container, data);
</pre>
<br>
<h4>Gephi parser options</h4>
There are a few options you can use to tell Vis what to do with the data from Gephi.
<table class="moduleTable">
<tr class="header">
<td>name</td>
<td>type</td>
<td>default</td>
<td>description</td>
</tr>
<tr>
<td>nodes.fixed</td>
<td class="mid">Boolean</td>
<td class="mid"><code>true</code></td>
<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
errors in the physics.
</td>
</tr>
<tr>
<td>nodes.parseColor</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<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.
</td>
</tr>
<tr>
<td>edges.inheritColor</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>When true, the color supplied by gephi is ignored and the inherit color mode is used with the global
setting.
</td>
</tr>
</table>
</div>
<br>
<br>

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

@ -85,9 +85,9 @@
</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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">

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


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


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


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


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


+ 3
- 3
docs/network/physics.html View File

@ -76,9 +76,9 @@
<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>
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">

+ 2
- 0
index.js View File

@ -58,6 +58,8 @@ exports.network = {
dotparser: require('./lib/network/dotparser'),
gephiParser: require('./lib/network/gephiParser')
};
exports.network.convertDot = function (input) {return exports.network.dotparser.DOTToGraph(input)};
exports.network.convertGephi = function (input,options) {return exports.network.gephiParser.parseGephi(input,options)};
// Deprecated since v3.0.0
exports.Graph = function () {

+ 9
- 12
lib/network/Network.js View File

@ -304,20 +304,18 @@ Network.prototype.setData = function (data) {
this.setOptions(data && data.options);
// set all data
if (data && data.dot) {
console.log('The dot property has been depricated. Please use the static convertDot method to convert DOT into vis.network format and use the normal data format with nodes and edges. This converter is used like this: var data = vis.network.convertDot(dotString);');
// parse DOT file
if (data && data.dot) {
var dotData = dotparser.DOTToGraph(data.dot);
this.setData(dotData);
return;
}
var dotData = dotparser.DOTToGraph(data.dot);
this.setData(dotData);
return;
}
else if (data && data.gephi) {
// parse DOT file
if (data && data.gephi) {
var gephiData = gephiParser.parseGephi(data.gephi);
this.setData(gephiData);
return;
}
console.log('The gephi property has been depricated. Please use the static convertGephi method to convert gephi into vis.network format and use the normal data format with nodes and edges. This converter is used like this: var data = vis.network.convertGephi(gephiJson);');
var gephiData = gephiParser.parseGephi(data.gephi);
this.setData(gephiData);
return;
}
else {
this.nodesHandler.setData(data && data.nodes, true);
@ -468,5 +466,4 @@ Network.prototype.moveTo = function() {this.view.moveTo.apply(this.
Network.prototype.focus = function() {this.view.focus.apply(this.view,arguments);};
Network.prototype.releaseNode = function() {this.view.releaseNode.apply(this.view,arguments);};
module.exports = Network;
module.exports = Network;

+ 6
- 5
lib/network/gephiParser.js View File

@ -4,7 +4,7 @@ function parseGephi(gephiJSON, optionsObj) {
var nodes = [];
var options = {
edges: {
inheritColor: true
inheritColor: false
},
nodes: {
fixed: false,
@ -13,9 +13,9 @@ function parseGephi(gephiJSON, optionsObj) {
};
if (options !== undefined) {
options.nodes['fixed'] = optionsObj.fixed !== undefined ? options.fixed : false;
options.nodes['fixed'] = optionsObj.fixed !== undefined ? options.fixed : true;
options.nodes['parseColor'] = optionsObj.parseColor !== undefined ? options.parseColor : false;
options.edges['inheritColor'] = optionsObj.inheritColor !== undefined ? options.inheritColor : true;
options.edges['inheritColor'] = optionsObj.inheritColor !== undefined ? options.inheritColor : false;
}
var gEdges = gephiJSON.edges;
@ -29,8 +29,9 @@ function parseGephi(gephiJSON, optionsObj) {
edge['attributes'] = gEdge.attributes;
// edge['value'] = gEdge.attributes !== undefined ? gEdge.attributes.Weight : undefined;
// edge['width'] = edge['value'] !== undefined ? undefined : edgegEdge.size;
edge['color'] = gEdge.color;
edge['inheritColor'] = edge['color'] !== undefined ? false : options.inheritColor;
if (gEdge.color && options.inheritColor === false) {
edge['color'] = gEdge.color;
}
edges.push(edge);
}

Loading…
Cancel
Save