Browse Source

Graph now uses an id based set of nodes and edges instead of a row based array internally, and supports DataSet

css_transitions
josdejong 11 years ago
parent
commit
7c3ed40536
11 changed files with 1139 additions and 1077 deletions
  1. +9
    -0
      HISTORY.md
  2. +14
    -21
      docs/graph.html
  3. +1
    -1
      examples/graph/02_random_nodes.html
  4. +4
    -15
      examples/graph/07_selections.html
  5. +265
    -0
      examples/graph/16_dynamic_data.html
  6. +1
    -0
      src/DataSet.js
  7. +15
    -15
      src/graph/Edge.js
  8. +393
    -491
      src/graph/Graph.js
  9. +13
    -13
      src/timeline/component/ItemSet.js
  10. +418
    -515
      vis.js
  11. +6
    -6
      vis.min.js

+ 9
- 0
HISTORY.md View File

@ -2,6 +2,15 @@ vis.js history
http://visjs.org http://visjs.org
## version 0.1.0
- Graph now uses an id based set of nodes and edges instead of a row based array
internally.
- Added support for DataSet to Graph.
- Methods getSelection and setSelection of Graph now accept a list with ids
instead of rows.
## 2013-06-07, version 0.0.9 ## 2013-06-07, version 0.0.9
- First working version of the Graph imported from the old library. - First working version of the Graph imported from the old library.

+ 14
- 21
docs/graph.html View File

@ -1039,10 +1039,10 @@ var nodes = [
<tr> <tr>
<td>getSelection()</td> <td>getSelection()</td>
<td>Array of selection elements</td>
<td>Standard <code>getSelection()</code> implementation.
Returns an array with one or multiple selections. Each selection contains
the property <code>row</code>. The selections are not ordered.
<td>Array of ids</td>
<td>Returns an array with the ids of the selected nodes.
Returns an empty array if no nodes are selected.
The selections are not ordered.
</td> </td>
</tr> </tr>
@ -1055,10 +1055,11 @@ var nodes = [
<tr> <tr>
<td>setSelection(selection)</td> <td>setSelection(selection)</td>
<td>none</td> <td>none</td>
<td>Standard <code>setSelection(selection)</code> implementation.
<code>selection</code> is an array with selection elements. The visualization
accepts one or multiple selection elements, which must have the property <code>row</code>.
Example usage: <code>graph.setSelection([{"row": 3}]);</code>.
<td>Select nodes.
<code>selection</code> is an array with ids of nodes to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>graph.setSelection([3, 5]);</code> will select
nodes with id 3 and 5.
</td> </td>
</tr> </tr>
@ -1083,18 +1084,11 @@ var nodes = [
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
function onselect() {
var sel = graph.getSelection();
var info = 'selected row(s): ';
for (var i = 0; i &lt; sel.length; i++) {
info += sel[i].row + ' ';
}
alert(info);
function onSelect() {
alert('selected nodes: ' + graph.getSelection());
} }
vis.events.addListener(graph, 'select', onselect);
vis.events.addListener(graph, 'select', onSelect);
</pre> </pre>
<p> <p>
@ -1117,9 +1111,8 @@ vis.events.addListener(graph, 'select', onselect);
<td>Fired after the user selects or unselects a node by clicking it, <td>Fired after the user selects or unselects a node by clicking it,
or when selecting a number of nodes by dragging a selection area or when selecting a number of nodes by dragging a selection area
around them. Not fired when the method <code>setSelection</code> around them. Not fired when the method <code>setSelection</code>
is executed. The corresponding rows in the Array are selected.
<br>
The selected rows can be retrieved via the method <code>getSelection</code>.
is executed. The ids of the selected nodes can be retrieved via the
method <code>getSelection</code>.
</td> </td>
<td>none</td> <td>none</td>
</tr> </tr>

+ 1
- 1
examples/graph/02_random_nodes.html View File

@ -88,7 +88,7 @@
// add event listeners // add event listeners
vis.events.addListener(graph, 'select', function(params) { vis.events.addListener(graph, 'select', function(params) {
document.getElementById('selection').innerHTML = document.getElementById('selection').innerHTML =
'Selection: ' + JSON.stringify(graph.getSelection());
'Selection: ' + graph.getSelection();
}); });
} }
</script> </script>

+ 4
- 15
examples/graph/07_selections.html View File

@ -52,24 +52,13 @@
// add event listener // add event listener
function onSelect() { function onSelect() {
var selection = graph.getSelection();
var info = 'selection: ';
selection.forEach(function (s) {
info += s.row + ' ';
});
document.getElementById('info').innerHTML += info + '<br>';
document.getElementById('info').innerHTML +=
'selection: ' + graph.getSelection().join(', ') + '<br>';
} }
vis.events.addListener(graph, 'select', onSelect); vis.events.addListener(graph, 'select', onSelect);
// set initial selection (row based, zero-based)
var selection = [
{'row': 2},
{'row': 3},
{'row': 4}
];
graph.setSelection(selection);
// set initial selection (id's of some nodes)
graph.setSelection([3, 4, 5]);
</script> </script>
</body> </body>

+ 265
- 0
examples/graph/16_dynamic_data.html View File

@ -0,0 +1,265 @@
<!doctype html>
<html>
<head>
<title>Graph | DataSet</title>
<style type="text/css">
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
input[type=text], pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#graph {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript">
var nodes, edges, graph;
// convenience method to stringify a JSON object
function toJSON (obj) {
return JSON.stringify(obj, null, 4);
}
$(window).load(function () {
// attach actions to the node buttons
$('#node-add').click(function () {
try {
nodes.add({
id: $('#node-id').val(),
label: $('#node-label').val()
});
}
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()
});
}
catch (err) {
alert(err);
}
});
$('#edge-update').click(function () {
try {
edges.update({
id: $('#edge-id').val(),
from: $('#edge-from').val(),
to: $('#edge-to').val()
});
}
catch (err) {
alert(err);
}
});
$('#edge-remove').click(function () {
try {
var id = $('#edge-id').val();
edges.remove(id);
}
catch (err) {
alert(err);
}
});
// create an array with nodes
nodes = new vis.DataSet();
nodes.subscribe('*', 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'}
]);
// create an array with edges
edges = new vis.DataSet();
edges.subscribe('*', 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 graph
var container = $('#graph').get(0);
var data = {
nodes: nodes,
edges: edges
};
var options = {};
graph = new vis.Graph(container, data, options);
});
</script>
</head>
<body>
<p>
This example demonstrates dynamically adding, updating and removing nodes
using a DataSet.
</p>
<h1>Adjust</h1>
<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>
</table>
<h1>View</h1>
<table class="view">
<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>Graph</h2>
<div id="graph"></div>
</td>
</tr>
</table>
</body>
</html>

+ 1
- 0
src/DataSet.js View File

@ -34,6 +34,7 @@
* and the field type as value. * and the field type as value.
* @constructor DataSet * @constructor DataSet
*/ */
// TODO: add a DataSet constructor DataSet(data, options)
function DataSet (options) { function DataSet (options) {
this.id = util.randomUUID(); this.id = util.randomUUID();

+ 15
- 15
src/graph/Edge.js View File

@ -34,11 +34,11 @@ function Edge (properties, graph, constants) {
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
this.dash = util.extend({}, constants.edges.dash); // contains properties length, gaph, altLength
this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
this.stiffness = undefined; // depends on the length of the edge
this.color = constants.edges.color;
this.widthFixed = false;
this.stiffness = undefined; // depends on the length of the edge
this.color = constants.edges.color;
this.widthFixed = false;
this.lengthFixed = false; this.lengthFixed = false;
this.setProperties(properties, constants); this.setProperties(properties, constants);
@ -54,12 +54,12 @@ Edge.prototype.setProperties = function(properties, constants) {
return; return;
} }
if (properties.from != undefined) {this.from = this.graph._getNode(properties.from);}
if (properties.to != undefined) {this.to = this.graph._getNode(properties.to);}
if (properties.from != undefined) {this.from = this.graph.nodes[properties.from];}
if (properties.to != undefined) {this.to = this.graph.nodes[properties.to];}
if (properties.id != undefined) {this.id = properties.id;}
if (properties.style != undefined) {this.style = properties.style;}
if (properties.label != undefined) {this.label = properties.label;}
if (properties.id != undefined) {this.id = properties.id;}
if (properties.style != undefined) {this.style = properties.style;}
if (properties.label != undefined) {this.label = properties.label;}
if (this.label) { if (this.label) {
this.fontSize = constants.edges.fontSize; this.fontSize = constants.edges.fontSize;
this.fontFace = constants.edges.fontFace; this.fontFace = constants.edges.fontFace;
@ -68,17 +68,17 @@ Edge.prototype.setProperties = function(properties, constants) {
if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;} if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;}
if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;} if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;}
} }
if (properties.title != undefined) {this.title = properties.title;}
if (properties.width != undefined) {this.width = properties.width;}
if (properties.value != undefined) {this.value = properties.value;}
if (properties.length != undefined) {this.length = properties.length;}
if (properties.title != undefined) {this.title = properties.title;}
if (properties.width != undefined) {this.width = properties.width;}
if (properties.value != undefined) {this.value = properties.value;}
if (properties.length != undefined) {this.length = properties.length;}
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
if (properties.dash) { if (properties.dash) {
if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;} if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
} }

+ 393
- 491
src/graph/Graph.js
File diff suppressed because it is too large
View File


+ 13
- 13
src/timeline/component/ItemSet.js View File

@ -394,19 +394,8 @@ ItemSet.prototype.hide = function hide() {
*/ */
ItemSet.prototype.setItems = function setItems(items) { ItemSet.prototype.setItems = function setItems(items) {
var me = this, var me = this,
ids;
// unsubscribe from current dataset
var current = this.itemsData;
if (current) {
util.forEach(this.listeners, function (callback, event) {
current.unsubscribe(event, callback);
});
// remove all drawn items
ids = current.getIds();
this._onRemove(ids);
}
ids,
oldItemsData = this.itemsData;
// replace the dataset // replace the dataset
if (!items) { if (!items) {
@ -419,6 +408,17 @@ ItemSet.prototype.setItems = function setItems(items) {
throw new TypeError('Data must be an instance of DataSet'); throw new TypeError('Data must be an instance of DataSet');
} }
if (oldItemsData) {
// unsubscribe from old dataset
util.forEach(this.listeners, function (callback, event) {
oldItemsData.unsubscribe(event, callback);
});
// remove all drawn items
ids = oldItemsData.getIds();
this._onRemove(ids);
}
if (this.itemsData) { if (this.itemsData) {
// subscribe to new dataset // subscribe to new dataset
var id = this.id; var id = this.id;

+ 418
- 515
vis.js
File diff suppressed because it is too large
View File


+ 6
- 6
vis.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save