Browse Source

more buxfixes n doc updates and default value tweaks and example tweaks

flowchartTest
Alex de Mulder 9 years ago
parent
commit
40c11a9e10
12 changed files with 4421 additions and 4330 deletions
  1. +4232
    -4218
      dist/vis.js
  2. +3
    -3
      docs/network/edges.html
  3. +3
    -3
      docs/network/nodes.html
  4. +0
    -45
      examples/network/categories/02_random_nodes.html
  5. +95
    -34
      examples/network/categories/data/datasets.html
  6. +3
    -3
      examples/network/categories/data/dot_language.html
  7. +2
    -2
      examples/network/categories/data/dynamic_data.html
  8. +10
    -19
      examples/network/categories/data/importing_from_gephi.html
  9. +1
    -1
      examples/network/categories/data/scaling_nodes_edges.html
  10. +70
    -0
      examples/network/exampleUtil.js
  11. +1
    -1
      lib/network/modules/EdgesHandler.js
  12. +1
    -1
      lib/network/modules/NodesHandler.js

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


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

@ -89,7 +89,7 @@
<p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined <p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p> in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p>
<p><b><i>When you have given an edge an option, you will override the global option for that property. If you then set that option to <code>undefined</code> or <code>null</code>,
<p><b><i>When you have given an edge an option, you will override the global option for that property. If you then set that option to <code>null</code>,
it will revert back to the default value.</i></b> it will revert back to the default value.</i></b>
</p> </p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p> <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
@ -138,7 +138,7 @@ var options = {
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 3
drawThreshold: 6
}, },
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>3</code></td>
<td><code>6</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.

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

@ -80,7 +80,7 @@
<h3>Options</h3> <h3>Options</h3>
<p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined <p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined
in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p> in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p>
<p><b><i>When you have given a node an option, you will override the global option for that property. If you then set that option to <code>undefined</code> or <code>null</code>,
<p><b><i>When you have given a node an option, you will override the global option for that property. If you then set that option to <code>null</code>,
it will revert back to the default value.</i></b> it will revert back to the default value.</i></b>
</p> </p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p> <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
@ -143,7 +143,7 @@ var options = {
min: 14, min: 14,
max: 30, max: 30,
maxVisible: 30, maxVisible: 30,
drawThreshold: 3
drawThreshold: 6
}, },
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>3</code></td>
<td><code>6</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
- 45
examples/network/categories/02_random_nodes.html View File

@ -32,52 +32,7 @@
function draw() { function draw() {
destroy(); 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 // create a network
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
var data = { var data = {

+ 95
- 34
examples/network/categories/data/datasets.html View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Network | Basic usage</title>
<title>Network | Dynamic Data</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script> <script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
@ -12,47 +12,75 @@
height: 400px; height: 400px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
p {
max-width:600px;
}
h4 {
margin-bottom:3px;
}
</style> </style>
</head> </head>
<body>
<p> <p>
Create a simple network with some nodes and edges.
You can change any settings you want while the network is initialized using the vis Dataset, setOptions and setData. Finally you can destroy the network and completely reinitialize it.
</p> </p>
<input type="button" onclick="addNode()" value="add node dynamically">
<input type="button" onclick="changeNode1()" value="change node 1's color dynamically">
<input type="button" onclick="removeRandomNode()" value="remove a random Node">
<h4>DataSet (change the data while it's loaded and initialzed):</h4>
<input type="button" onclick="addNode()" value="add node dynamically"> <br />
<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
<h4>setOptions (change the global options):</h4>
<input type="button" onclick="changeOptions()" value="change the global options"><br />
<h4>setData (reinitialize the data): </h4>
<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
<h4>Cleanly destroy the network and restart it:</h4>
<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
<div id="mynetwork"></div> <div id="mynetwork"></div>
<script type="text/javascript"> <script type="text/javascript">
// this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
var nodeIds = [2,3,4,5];
// 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 = {};
var network = new vis.Network(container, data, options);
var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
function startNetwork() {
// this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
nodeIds = [2, 3, 4, 5];
shadowState = false;
// create an array with nodes
nodesArray = [
{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'}
];
nodes = new vis.DataSet(nodesArray);
// create an array with edges
edgesArray = [
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
];
edges = new vis.DataSet(edgesArray);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
function addNode() { function addNode() {
var newId = (Math.random() * 1e7).toString(32); var newId = (Math.random() * 1e7).toString(32);
@ -72,6 +100,39 @@
var index = nodeIds.indexOf(randomNodeId); var index = nodeIds.indexOf(randomNodeId);
nodeIds.splice(index,1); nodeIds.splice(index,1);
} }
function changeOptions() {
shadowState = !shadowState;
network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
}
function resetAllNodes() {
nodes.clear();
edges.clear();
nodes.add(nodesArray);
edges.add(edgesArray);
}
function resetAllNodesStabilize() {
resetAllNodes();
network.stabilize();
}
function setTheData() {
nodes = new vis.DataSet(nodesArray);
edges = new vis.DataSet(edgesArray);
network.setData({nodes:nodes, edges:edges})
}
function resetAll() {
if (network !== null) {
network.destroy();
network = null;
}
startNetwork();
}
startNetwork();
</script> </script>
<script src="../../../googleAnalytics.js"></script> <script src="../../../googleAnalytics.js"></script>

+ 3
- 3
examples/network/categories/data/dot_language.html View File

@ -2,9 +2,9 @@
<head> <head>
<title>Network | DOT Language</title> <title>Network | DOT Language</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<p> <p>

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

@ -135,7 +135,7 @@
// create an array with nodes // create an array with nodes
nodes = new vis.DataSet(); nodes = new vis.DataSet();
nodes.subscribe('*', function () {
nodes.on('*', function () {
$('#nodes').html(toJSON(nodes.get())); $('#nodes').html(toJSON(nodes.get()));
}); });
nodes.add([ nodes.add([
@ -148,7 +148,7 @@
// create an array with edges // create an array with edges
edges = new vis.DataSet(); edges = new vis.DataSet();
edges.subscribe('*', function () {
edges.on('*', function () {
$('#edges').html(toJSON(edges.get())); $('#edges').html(toJSON(edges.get()));
}); });
edges.add([ edges.add([

+ 10
- 19
examples/network/categories/data/importing_from_gephi.html View File

@ -4,6 +4,8 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF8"> <meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Dynamic Data - Importing from Gephi (JSON)</title> <title>Dynamic Data - Importing from Gephi (JSON)</title>
<script type="text/javascript" src="../../exampleUtil.js"></script>
<script type="text/javascript" src="../../../../dist/vis.js"></script> <script type="text/javascript" src="../../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../../dist/vis.css"> <link type="text/css" rel="stylesheet" href="../../../../dist/vis.css">
@ -92,7 +94,7 @@
var nodeContent = document.getElementById('nodeContent'); var nodeContent = document.getElementById('nodeContent');
loadJSON('../../data/WorldCup2014.json', redrawAll);
loadJSON('../../data/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
var data = { var data = {
@ -127,6 +129,12 @@
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
network.on('click', function (params) {
if (params.nodes.length > 0) {
var data = nodes.get(params.nodes[0]); // get the data from selected node
nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
}
})
/** /**
* This function fills the DataSets. These DataSets will update the network. * This function fills the DataSets. These DataSets will update the network.
@ -154,28 +162,11 @@
nodes.add(parsed.nodes); nodes.add(parsed.nodes);
edges.add(parsed.edges); edges.add(parsed.edges);
var data = nodes.get(2); // get the data from node 2
var data = nodes.get(2); // get the data from node 2 as example
nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
network.fit(); // zoom to fit network.fit(); // zoom to fit
} }
function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText));
}
else {
error(xhr);
}
}
};
xhr.open('GET', path, true);
xhr.send();
}
</script> </script>

+ 1
- 1
examples/network/categories/data/scaling_nodes_edges.html View File

@ -72,7 +72,7 @@
</head> </head>
<body onload="draw()"> <body onload="draw()">
<p> <p>
Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
Scale nodes and edges depending on their value. Hover over the edges to get a popup with more information.
</p> </p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
</body> </body>

+ 70
- 0
examples/network/exampleUtil.js View File

@ -0,0 +1,70 @@
/**
* Created by Alex on 5/20/2015.
*/
function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText));
}
else {
error(xhr);
}
}
};
xhr.open('GET', path, true);
xhr.send();
}
function getScaleFreeNetwork(nodeCount) {
var nodes = [];
var edges = [];
var connectionCount = [];
// randomly create some nodes and edges
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]++;
}
}
return {nodes:nodes, edges:edges};
}

+ 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: 3
drawThreshold: 6
}, },
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: 3
drawThreshold: 6
}, },
customScalingFunction: function (min,max,total,value) { customScalingFunction: function (min,max,total,value) {
if (max === min) { if (max === min) {

Loading…
Cancel
Save