Browse Source

Released v3.5.0

gh-pages
jos 10 years ago
parent
commit
2bc07d3183
11 changed files with 4703 additions and 4463 deletions
  1. +4476
    -4423
      dist/vis.js
  2. +1
    -1
      dist/vis.map
  3. +11
    -11
      dist/vis.min.js
  4. +1
    -11
      docs/graph2d.html
  5. +22
    -8
      docs/network.html
  6. BIN
      download/vis.zip
  7. +4
    -5
      examples/network/02_random_nodes.html
  8. +184
    -0
      examples/network/ex.html
  9. +2
    -2
      examples/timeline/03_performance.html
  10. +1
    -1
      examples/timeline/05_groups.html
  11. +1
    -1
      index.html

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


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


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


+ 1
- 11
docs/graph2d.html View File

@ -853,17 +853,7 @@ Graph2d.clear({options: true}); // clear options only
</p>
<p>
Here an example on how to listen for a <code>rangeChanged</code> event.
</p>
<pre class="prettyprint lang-js">
Graph2d.on('select', function (properties) {
alert('selected items: ' + properties.nodes);
});
</pre>
<p>
A listener can be removed via the function <code>off</code>:
Here an example on how to listen for a <code>rangeChanged</code> event. A listener can be removed via the function <code>off</code>:
</p>
<pre class="prettyprint lang-js">

+ 22
- 8
docs/network.html View File

@ -280,17 +280,13 @@ When using a DataSet, the network is automatically updating to changes in the Da
<td>allowedToMoveX</td>
<td>Boolean</td>
<td>no</td>
<td>If allowedToMoveX is false, then the node will not move from its supplied position.
If an X position has been supplied, it is fixed in the X-direction.
If no X value has been supplied, this argument will not do anything.</td>
<td>If allowedToMoveX is false, then the node will not move in the X direction from its position.</td>
</tr>
<tr>
<td>allowedToMoveY</td>
<td>Boolean</td>
<td>no</td>
<td>If allowedToMoveY is false, then the node will not move from its supplied position.
If an Y position has been supplied, it is fixed in the Y-direction.
If no Y value has been supplied, this argument will not do anything.</td>
<td>If allowedToMoveY is false, then the node will not move in the Y direction from its position.</td>
</tr>
<tr>
@ -344,7 +340,7 @@ When using a DataSet, the network is automatically updating to changes in the Da
<td>number</td>
<td>no</td>
<td>Horizontal position in pixels.
The horizontal position of the node will be fixed.
The horizontal position of the node will be fixed unless combined with the allowedToMoveX:true option.
The vertical position y may remain undefined.</td>
</tr>
<tr>
@ -352,7 +348,7 @@ When using a DataSet, the network is automatically updating to changes in the Da
<td>number</td>
<td>no</td>
<td>Vertical position in pixels.
The vertical position of the node will be fixed.
The vertical position of the node will be fixed unless combined with the allowedToMoveY:true option.
The horizontal position x may remain undefined.</td>
</tr>
</table>
@ -2423,6 +2419,24 @@ network.off('select', onSelect);
</ul>
</td>
</tr>
<tr>
<td>dragStart</td>
<td>Fired when a node is being dragged.</td>
<td>
<ul>
<li><code>nodeIds</code>: Array of ids of the nodes that are being dragged</li>
</ul>
</td>
</tr>
<tr>
<td>dragEnd</td>
<td>Fired when the dragging of a node(s) has ended.</td>
<td>
<ul>
<li><code>nodeIds</code>: Array of ids of the nodes that were being dragged</li>
</ul>
</td>
</tr>
<tr>
<td>stabilized</td>
<td>Fired every time the network has been stabilized. This event can be used to trigger the .storePosition() function after stabilization. Fired with an object having the following properties:</td>

BIN
download/vis.zip View File


+ 4
- 5
examples/network/02_random_nodes.html View File

@ -30,7 +30,7 @@
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
nodes.push({
id: i,
label: String(i)
});
@ -69,26 +69,25 @@
connectionCount[to]++;
}
}
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var options = {stabilization:false};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
console.log(params)
});
network.on('stabilized', function (params) {
document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
doFocus = false;
});
}
</script>
</head>

+ 184
- 0
examples/network/ex.html View File

@ -0,0 +1,184 @@
<!doctype html>
<html>
<head>
<title>Network | Random nodes</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 draw() {
nodes = new vis.DataSet([{
id: '1001',
value: '1'
}, {
id: '1009',
value: '2'
}, {
id: '1061',
value: '3'
}, {
id: '1226',
value: '4'
}]);
edges = new vis.DataSet([{
id: '1001_1061',
from: '1001',
to: '1061',
value: '1'
}, {
id: '1001_1226',
from: '1001',
to: '1226',
value: '1'
}, {
id: '1009_1061',
from: '1009',
to: '1061',
value: '2'
}, {
id: '1009_1226',
from: '1009',
to: '1226',
value: '1'
}, {
id: '1061_1226',
from: '1061',
to: '1226',
value: '1'
}]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var nodeNormalColor = { // For 'normal' nodes
background: '#92bbc7',
border: '#5d93a6',
borderWidth: 2,
highlight: {
background: '#5d93a6',
border: '#537286'
}
};
var nodeBlurColor = { // For 'blurred' nodes
background: '#f0f0f0',
border: '#f0f0f0'
};
var edgeNormalColor = {
color: '#5d93a6',
highlight: '#28132b'
};
var edgeBlurColor = {
color: '#f0f0f0',
highlight: '#f0f0f0'
};
var options = {
nodes: {
shape: 'dot',
color: nodeNormalColor
},
edges: {
inheritColor: false,
color: edgeNormalColor,
widthSelectionMultiplier: 1
},
physics: {
'barnesHut': {
centralGravity: 0.5,
springLength: 150,
springConstant: 0.03,
damping: 0.2
}
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function (params) {
console.log(params.edges);
var nodesData = {};
var edgesData = {};
var nodeResetQuery = [];
var edgeResetQuery = [];
var allEdges = edges.get();
var allNodes = nodes.get();
for (var i = 0; i < allNodes.length; i++) {
nodesData[allNodes[i].id] = {id:allNodes[i].id, color: nodeBlurColor};
nodeResetQuery.push({id:allNodes[i].id, color: nodeNormalColor});
}
for (var i = 0; i < allEdges.length; i++) {
edgesData[allEdges[i].id] = {id:allEdges[i].id, color: edgeBlurColor};
edgeResetQuery.push({id:allEdges[i].id, color: edgeNormalColor});
}
// deselect
if (params.nodes.length == 0 && params.edges.length == 0) {
nodes.update(nodeResetQuery);
edges.update(edgeResetQuery);
return;
}
// paint nodes and edges.
for (var i = 0; i < params.nodes.length; i++) {
nodesData[params.nodes[i]].color = nodeNormalColor;
}
for (var i = 0; i < params.edges.length; i++) {
edgesData[params.edges[i]].color = edgeNormalColor;
var selEdge = edges.get(params.edges[i]);
nodesData[selEdge.to].color = nodeNormalColor;
nodesData[selEdge.from].color = nodeNormalColor;
}
var nodeUpdateQuery = [];
var edgeUpdateQuery = [];
for (var nodeId in nodesData) {
if (nodesData.hasOwnProperty(nodeId)) {
nodeUpdateQuery.push(nodesData[nodeId]);
}
}
for (var edgeId in edgesData) {
if (edgesData.hasOwnProperty(edgeId)) {
edgeUpdateQuery.push(edgesData[edgeId]);
}
}
nodes.update(nodeUpdateQuery);
edges.update(edgeUpdateQuery);
// nodes.update(nodeResetQuery);
// edges.update(edgeResetQuery);
// nodes.update(nodeUpdateQuery);
// edges.update(edgeUpdateQuery);
});}
</script>
</head>
<body onload="draw();">
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 2
- 2
examples/timeline/03_performance.html View File

@ -52,8 +52,8 @@
var container = document.getElementById('visualization');
var options = {
editable: true,
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
start: now.clone().add(-3, 'days'),
end: now.clone().add(11, 'days'),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300,

+ 1
- 1
examples/timeline/05_groups.html View File

@ -45,7 +45,7 @@
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var start = now.clone().add(Math.random() * 200, 'hours');
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,

+ 1
- 1
index.html View File

@ -74,7 +74,7 @@ bower install vis
<h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">3.4.2</span>)
(version <span class="version">3.5.0</span>)
<h2 id="example">Example</h2>

Loading…
Cancel
Save