Browse Source

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

flowchartTest
jos 9 years ago
parent
commit
0f35f54cc2
12 changed files with 462 additions and 478 deletions
  1. +12
    -4
      dist/vis.js
  2. +2
    -2
      docs/network/edges.html
  3. +2
    -2
      docs/network/nodes.html
  4. +0
    -156
      examples/network/categories/23_hierarchical_layout.html
  5. +220
    -221
      examples/network/categories/data/dynamic_data.html
  6. +3
    -8
      examples/network/categories/layout/hierarchica_layout_methods.html
  7. +114
    -0
      examples/network/categories/layout/hierarchical_layout.html
  8. +36
    -81
      examples/network/categories/layout/hierarchical_layout_userdefined.html
  9. +60
    -0
      examples/network/categories/layout/randomSeed.html
  10. +1
    -1
      lib/network/modules/EdgesHandler.js
  11. +1
    -1
      lib/network/modules/NodesHandler.js
  12. +11
    -2
      lib/shared/Validator.js

+ 12
- 4
dist/vis.js View File

@ -19398,7 +19398,9 @@ return /******/ (function(modules) { // webpackBootstrap
var localSearchThreshold = 8; var localSearchThreshold = 8;
var globalSearchThreshold = 4; var globalSearchThreshold = 4;
if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
if (localSearch.indexMatch !== undefined) {
console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option, '') + 'Perhaps it was incomplete? Did you mean: "' + localSearch.indexMatch + '"?\n\n', printStyle);
} else if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option, '') + 'Perhaps it was misplaced? Matching option found at: ' + Validator.printLocation(globalSearch.path, globalSearch.closestMatch, ''), printStyle); console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option, '') + 'Perhaps it was misplaced? Matching option found at: ' + Validator.printLocation(globalSearch.path, globalSearch.closestMatch, ''), printStyle);
} else if (localSearch.distance <= localSearchThreshold) { } else if (localSearch.distance <= localSearchThreshold) {
console.log('%cUnknown option detected: "' + option + '". Did you mean "' + localSearch.closestMatch + '"?' + Validator.printLocation(localSearch.path, option), printStyle); console.log('%cUnknown option detected: "' + option + '". Did you mean "' + localSearch.closestMatch + '"?' + Validator.printLocation(localSearch.path, option), printStyle);
@ -19426,6 +19428,8 @@ return /******/ (function(modules) { // webpackBootstrap
var min = 1000000000; var min = 1000000000;
var closestMatch = ''; var closestMatch = '';
var closestMatchPath = []; var closestMatchPath = [];
var lowerCaseOption = option.toLowerCase();
var indexMatch = undefined;
for (var op in options) { for (var op in options) {
var type = Validator.getType(options[op]); var type = Validator.getType(options[op]);
var distance = undefined; var distance = undefined;
@ -19435,8 +19439,12 @@ return /******/ (function(modules) { // webpackBootstrap
closestMatch = result.closestMatch; closestMatch = result.closestMatch;
closestMatchPath = result.path; closestMatchPath = result.path;
min = result.distance; min = result.distance;
indexMatch = result.indexMatch;
} }
} else { } else {
if (op.toLowerCase().indexOf(lowerCaseOption) !== -1) {
indexMatch = op;
}
distance = Validator.levenshteinDistance(option, op); distance = Validator.levenshteinDistance(option, op);
if (min > distance) { if (min > distance) {
closestMatch = op; closestMatch = op;
@ -19445,7 +19453,7 @@ return /******/ (function(modules) { // webpackBootstrap
} }
} }
} }
return { closestMatch: closestMatch, path: closestMatchPath, distance: min };
return { closestMatch: closestMatch, path: closestMatchPath, distance: min, indexMatch: indexMatch };
} }
}, { }, {
key: 'printLocation', key: 'printLocation',
@ -20951,7 +20959,7 @@ return /******/ (function(modules) { // webpackBootstrap
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 6
drawThreshold: 5
}, },
customScalingFunction: function customScalingFunction(min, max, total, value) { customScalingFunction: function customScalingFunction(min, max, total, value) {
if (max === min) { if (max === min) {
@ -21409,7 +21417,7 @@ return /******/ (function(modules) { // webpackBootstrap
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 6
drawThreshold: 5
}, },
customScalingFunction: function customScalingFunction(min, max, total, value) { customScalingFunction: function customScalingFunction(min, max, total, value) {
if (max === min) { if (max === min) {

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

@ -138,7 +138,7 @@ var options = {
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 6
drawThreshold: 5
}, },
customScalingFunction: function (min,max,total,value) { customScalingFunction: function (min,max,total,value) {
if (max === min) { if (max === min) {
@ -480,7 +480,7 @@ var options: {
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.drawThreshold</td> <td class="indent2">scaling.label.drawThreshold</td>
<td>Number</td> <td>Number</td>
<td><code>6</code></td>
<td><code>5</code></td>
<td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
When using font scaling, you can use this together with the maxVisible to first show labels of important When using font scaling, you can use this together with the maxVisible to first show labels of important
edges when zoomed out and only show the rest when zooming in. edges when zoomed out and only show the rest when zooming in.

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

@ -143,7 +143,7 @@ var options = {
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 6
drawThreshold: 5
}, },
customScalingFunction: function (min,max,total,value) { customScalingFunction: function (min,max,total,value) {
if (max === min) { if (max === min) {
@ -507,7 +507,7 @@ network.setOptions(options);
<tr parent="scaling" class="hidden"> <tr parent="scaling" class="hidden">
<td class="indent2">scaling.label.drawThreshold</td> <td class="indent2">scaling.label.drawThreshold</td>
<td>Number</td> <td>Number</td>
<td><code>6</code></td>
<td><code>5</code></td>
<td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
When using font scaling, you can use this together with the maxVisible to first show labels of important When using font scaling, you can use this together with the maxVisible to first show labels of important
nodes when zoomed out and only show the rest when zooming in. nodes when zoomed out and only show the rest when zooming in.

+ 0
- 156
examples/network/categories/23_hierarchical_layout.html View File

@ -1,156 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Hierarchical layout</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var directionInput = document.getElementById("direction").value;
var options = {
layout: {
hierarchical:{
direction: directionInput
}
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<p>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
</p>
<script language="javascript">
var directionInput = document.getElementById("direction");
var btnUD = document.getElementById("btn-UD");
btnUD.onclick = function() {
directionInput.value = "UD";
draw();
}
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function() {
directionInput.value = "DU";
draw();
};
var btnLR = document.getElementById("btn-LR");
btnLR.onclick = function() {
directionInput.value = "LR";
draw();
};
var btnRL = document.getElementById("btn-RL");
btnRL.onclick = function() {
directionInput.value = "RL";
draw();
};
</script>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 220
- 221
examples/network/categories/data/dynamic_data.html View File

@ -1,266 +1,265 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Network | DataSet</title>
<title>Network | DataSet</title>
<style type="text/css">
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
<style type="text/css">
html, body {
font: 11pt arial;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
table.view {
width: 100%;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table td {
vertical-align: top;
}
table.view {
width: 100%;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table td {
vertical-align: top;
}
table table td {
vertical-align: middle;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
input[type=text], pre {
border: 1px solid lightgray;
}
table table td {
vertical-align: middle;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
input[type=text], pre {
border: 1px solid lightgray;
}
#network {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
#network {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript">
var nodes, edges, network;
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
// convenience method to stringify a JSON object
function toJSON (obj) {
return JSON.stringify(obj, null, 4);
}
<script type="text/javascript">
var nodes, edges, network;
$(window).load(function () {
// attach actions to the node buttons
$('#node-add').click(function () {
try {
nodes.add({
id: $('#node-id').val(),
label: $('#node-label').val()
});
// convenience method to stringify a JSON object
function toJSON(obj) {
return JSON.stringify(obj, null, 4);
} }
catch (err) {
alert(err);
}
});
$('#node-update').click(function () {
try {
nodes.update({
id: $('#node-id').val(),
label: $('#node-label').val()
});
}
catch (err) {
alert(err);
}
});
$('#node-remove').click(function () {
try {
var id = $('#node-id').val();
nodes.remove(id);
}
catch (err) {
alert(err);
}
});
// attach actions to the edge buttons
$('#edge-add').click(function () {
try {
edges.add({
id: $('#edge-id').val(),
from: $('#edge-from').val(),
to: $('#edge-to').val()
});
function addNode() {
try {
nodes.add({
id: document.getElementById('node-id').value,
label: document.getElementById('node-label').value
});
}
catch (err) {
alert(err);
}
} }
catch (err) {
alert(err);
function updateNode() {
try {
nodes.update({
id: document.getElementById('node-id').value,
label: document.getElementById('node-label').value
});
}
catch (err) {
alert(err);
}
} }
});
$('#edge-update').click(function () {
try {
edges.update({
id: $('#edge-id').val(),
from: $('#edge-from').val(),
to: $('#edge-to').val()
});
function removeNode() {
try {
nodes.remove({id: document.getElementById('node-id').value});
}
catch (err) {
alert(err);
}
} }
catch (err) {
alert(err);
function addEdge() {
try {
edges.add({
id: document.getElementById('edge-id').value,
from: document.getElementById('edge-from').value,
to: document.getElementById('edge-to').value
});
}
catch (err) {
alert(err);
}
} }
});
$('#edge-remove').click(function () {
try {
var id = $('#edge-id').val();
edges.remove(id);
function updateEdge() {
try {
edges.update({
id: document.getElementById('edge-id').value,
from: document.getElementById('edge-from').value,
to: document.getElementById('edge-to').value
});
}
catch (err) {
alert(err);
}
} }
catch (err) {
alert(err);
function removeEdge() {
try {
edges.remove({id: document.getElementById('edge-id').value});
}
catch (err) {
alert(err);
}
} }
});
// create an array with nodes
nodes = new vis.DataSet();
nodes.on('*', function () {
$('#nodes').html(toJSON(nodes.get()));
});
nodes.add([
{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'}
]);
function draw() {
// create an array with nodes
nodes = new vis.DataSet();
nodes.on('*', function () {
document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
});
nodes.add([
{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
edges = new vis.DataSet();
edges.on('*', function () {
document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
});
edges.add([
{id: '1', from: '1', to: '2'},
{id: '2', from: '1', to: '3'},
{id: '3', from: '2', to: '4'},
{id: '4', from: '2', to: '5'}
]);
// create an array with edges
edges = new vis.DataSet();
edges.on('*', function () {
$('#edges').html(toJSON(edges.get()));
});
edges.add([
{id: '1', from: '1', to: '2'},
{id: '2', from: '1', to: '3'},
{id: '3', from: '2', to: '4'},
{id: '4', from: '2', to: '5'}
]);
// create a network
var container = document.getElementById('network');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
// create a network
var container = $('#network').get(0);
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
});
</script>
<script src="../../../googleAnalytics.js"></script>
}
</script>
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body>
<body onload="draw();">
<p> <p>
This example demonstrates dynamically adding, updating and removing nodes
and edges using a DataSet.
This example demonstrates dynamically adding, updating and removing nodes
and edges using a DataSet.
</p> </p>
<h1>Adjust</h1> <h1>Adjust</h1>
<table> <table>
<tr>
<td>
<h2>Node</h2>
<table>
<tr>
<td></td>
<td><label for="node-id">Id</label></td>
<td><input id="node-id" type="text" value="6"></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" value="Node 6"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="node-add">Add</button>
<button id="node-update">Update</button>
<button id="node-remove">Remove</button>
</td>
</tr>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tr>
<td></td>
<td><label for="edge-id">Id</label></td>
<td><input id="edge-id" type="text" value="5"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-from">From</label></td>
<td><input id="edge-from" type="text" value="3"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To</label></td>
<td><input id="edge-to" type="text" value="4"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="edge-add">Add</button>
<button id="edge-update">Update</button>
<button id="edge-remove">Remove</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<h2>Node</h2>
<table>
<tr>
<td></td>
<td><label for="node-id">Id</label></td>
<td><input id="node-id" type="text" value="6"></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" value="Node 6"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="node-add" onclick="addNode();">Add</button>
<button id="node-update" onclick="updateNode();">Update</button>
<button id="node-remove" onclick="removeNode();">Remove</button>
</td>
</tr>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tr>
<td></td>
<td><label for="edge-id">Id</label></td>
<td><input id="edge-id" type="text" value="5"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-from">From</label></td>
<td><input id="edge-from" type="text" value="3"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To</label></td>
<td><input id="edge-to" type="text" value="4"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="edge-add" onclick="addEdge();">Add</button>
<button id="edge-update" onclick="updateEdge();">Update</button>
<button id="edge-remove" onclick="removeEdge();">Remove</button>
</td>
</tr>
</table>
</td>
</tr>
</table> </table>
<h1>View</h1> <h1>View</h1>
<table class="view"> <table class="view">
<colgroup>
<col width="25%">
<col width="25%">
<col width="50%">
</colgroup>
<tr>
<td>
<h2>Nodes</h2>
<pre id="nodes"></pre>
</td>
<colgroup>
<col width="25%">
<col width="25%">
<col width="50%">
</colgroup>
<tr>
<td>
<h2>Nodes</h2>
<pre id="nodes"></pre>
</td>
<td>
<h2>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Network</h2>
<td>
<h2>Network</h2>
<div id="network"></div>
</td>
</tr>
<div id="network"></div>
</td>
</tr>
</table> </table>
</body> </body>

examples/network/categories/32_hierarchicaLayoutMethods.html → examples/network/categories/layout/hierarchica_layout_methods.html View File

@ -14,8 +14,8 @@
} }
</style> </style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> <script type="text/javascript">
var network = null; var network = null;
@ -74,15 +74,10 @@
} }
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
} }
</script> </script>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body onload="draw();"> <body onload="draw();">

+ 114
- 0
examples/network/categories/layout/hierarchical_layout.html View File

@ -0,0 +1,114 @@
<!doctype html>
<html>
<head>
<title>Network | Hierarchical layout</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../exampleUtil.js"></script>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
var data = getScaleFreeNetwork(nodeCount)
// create a network
var container = document.getElementById('mynetwork');
var directionInput = document.getElementById("direction").value;
var options = {
layout: {
hierarchical: {
direction: directionInput
}
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function (params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div>
<br/>
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<p>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
</p>
<script language="javascript">
var directionInput = document.getElementById("direction");
var btnUD = document.getElementById("btn-UD");
btnUD.onclick = function () {
directionInput.value = "UD";
draw();
}
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function () {
directionInput.value = "DU";
draw();
};
var btnLR = document.getElementById("btn-LR");
btnLR.onclick = function () {
directionInput.value = "LR";
draw();
};
var btnRL = document.getElementById("btn-RL");
btnRL.onclick = function () {
directionInput.value = "RL";
draw();
};
</script>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

examples/network/categories/24_hierarchical_layout_userdefined.html → examples/network/categories/layout/hierarchical_layout_userdefined.html View File

@ -13,9 +13,9 @@
border: 1px solid lightgray; border: 1px solid lightgray;
} }
</style> </style>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> <script type="text/javascript">
var nodes = null; var nodes = null;
@ -36,84 +36,39 @@
edges = []; edges = [];
var connectionCount = []; var connectionCount = [];
// randomly create some nodes and edges
for (var i = 0; i < 15; i++) {
nodes.push({
id: i,
label: String(i)
});
}
edges.push({
from: 0,
to: 1
});
edges.push({
from: 0,
to: 6
});
edges.push({
from: 0,
to: 13
});edges.push({
from: 0,
to: 11
});
edges.push({
from: 1,
to: 2
});
edges.push({
from: 2,
to: 3
});
edges.push({
from: 2,
to: 4
});
edges.push({
from: 3,
to: 5
});
edges.push({
from: 1,
to: 10
});
edges.push({
from: 1,
to: 7
});
edges.push({
from: 2,
to: 8
});
edges.push({
from: 2,
to: 9
});
edges.push({
from: 3,
to: 14
});
edges.push({
from: 1,
to: 12
});
nodes[0]["level"] = 0;
nodes[1]["level"] = 1;
nodes[2]["level"] = 3;
nodes[3]["level"] = 4;
nodes[4]["level"] = 4;
nodes[5]["level"] = 5;
nodes[6]["level"] = 1;
nodes[7]["level"] = 2;
nodes[8]["level"] = 4;
nodes[9]["level"] = 4;
nodes[10]["level"] = 2;
nodes[11]["level"] = 1;
nodes[12]["level"] = 2;
nodes[13]["level"] = 1;
nodes[14]["level"] = 5;
// randomly create some nodes and edges
for (var i = 0; i < 15; i++) {
nodes.push({id: i,label: String(i)});
}
edges.push({from: 0, to: 1 });
edges.push({from: 0, to: 6 });
edges.push({from: 0, to: 13});
edges.push({from: 0, to: 11});
edges.push({from: 1, to: 2 });
edges.push({from: 2, to: 3 });
edges.push({from: 2, to: 4 });
edges.push({from: 3, to: 5 });
edges.push({from: 1, to: 10});
edges.push({from: 1, to: 7 });
edges.push({from: 2, to: 8 });
edges.push({from: 2, to: 9 });
edges.push({from: 3, to: 14});
edges.push({from: 1, to: 12});
nodes[0]["level"] = 0;
nodes[1]["level"] = 1;
nodes[2]["level"] = 3;
nodes[3]["level"] = 4;
nodes[4]["level"] = 4;
nodes[5]["level"] = 5;
nodes[6]["level"] = 1;
nodes[7]["level"] = 2;
nodes[8]["level"] = 4;
nodes[9]["level"] = 4;
nodes[10]["level"] = 2;
nodes[11]["level"] = 1;
nodes[12]["level"] = 2;
nodes[13]["level"] = 1;
nodes[14]["level"] = 5;
// create a network // create a network
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
@ -141,7 +96,7 @@
} }
</script> </script>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body onload="draw();"> <body onload="draw();">

+ 60
- 0
examples/network/categories/layout/randomSeed.html View File

@ -0,0 +1,60 @@
<!doctype html>
<html>
<head>
<title>Network | Setting the random seed</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges but with a fixed seed. This means the layout will be the same every time the nodes
are settled.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// 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');
var data = {
nodes: nodes,
edges: edges
};
var options = {layout:{randomSeed:2}};
var network = new vis.Network(container, data, options);
</script>
<script src="../../../googleAnalytics.js"></script>
</body>
</html>

+ 1
- 1
lib/network/modules/EdgesHandler.js View File

@ -57,7 +57,7 @@ class EdgesHandler {
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 6
drawThreshold: 5
}, },
customScalingFunction: function (min,max,total,value) { customScalingFunction: function (min,max,total,value) {
if (max === min) { if (max === min) {

+ 1
- 1
lib/network/modules/NodesHandler.js View File

@ -72,7 +72,7 @@ class NodesHandler {
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 6
drawThreshold: 5
}, },
customScalingFunction: function (min,max,total,value) { customScalingFunction: function (min,max,total,value) {
if (max === min) { if (max === min) {

+ 11
- 2
lib/shared/Validator.js View File

@ -170,7 +170,10 @@ class Validator {
let localSearchThreshold = 8; let localSearchThreshold = 8;
let globalSearchThreshold = 4; let globalSearchThreshold = 4;
if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
if (localSearch.indexMatch !== undefined) {
console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option,'') + 'Perhaps it was incomplete? Did you mean: "' + localSearch.indexMatch + '"?\n\n', printStyle);
}
else if (globalSearch.distance <= globalSearchThreshold && localSearch.distance > globalSearch.distance) {
console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option,'') + 'Perhaps it was misplaced? Matching option found at: ' + Validator.printLocation(globalSearch.path, globalSearch.closestMatch,''), printStyle); console.log('%cUnknown option detected: "' + option + '" in ' + Validator.printLocation(localSearch.path, option,'') + 'Perhaps it was misplaced? Matching option found at: ' + Validator.printLocation(globalSearch.path, globalSearch.closestMatch,''), printStyle);
} }
else if (localSearch.distance <= localSearchThreshold) { else if (localSearch.distance <= localSearchThreshold) {
@ -196,6 +199,8 @@ class Validator {
let min = 1e9; let min = 1e9;
let closestMatch = ''; let closestMatch = '';
let closestMatchPath = []; let closestMatchPath = [];
let lowerCaseOption = option.toLowerCase();
let indexMatch = undefined;
for (let op in options) { for (let op in options) {
let type = Validator.getType(options[op]); let type = Validator.getType(options[op]);
let distance; let distance;
@ -205,9 +210,13 @@ class Validator {
closestMatch = result.closestMatch; closestMatch = result.closestMatch;
closestMatchPath = result.path; closestMatchPath = result.path;
min = result.distance; min = result.distance;
indexMatch = result.indexMatch;
} }
} }
else { else {
if (op.toLowerCase().indexOf(lowerCaseOption) !== -1) {
indexMatch = op;
}
distance = Validator.levenshteinDistance(option, op); distance = Validator.levenshteinDistance(option, op);
if (min > distance) { if (min > distance) {
closestMatch = op; closestMatch = op;
@ -216,7 +225,7 @@ class Validator {
} }
} }
} }
return {closestMatch:closestMatch, path:closestMatchPath, distance:min}
return {closestMatch:closestMatch, path:closestMatchPath, distance:min, indexMatch: indexMatch}
} }
static printLocation(path, option, prefix = 'Problem value found at: \n') { static printLocation(path, option, prefix = 'Problem value found at: \n') {

Loading…
Cancel
Save