jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Improved Graph constructor and method setData

css_transitions
josdejong 11 years ago
parent
287cfa1446
commit
aab9e38ed3
6 changed files with 66 additions and 74 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -1
      HISTORY.md
  2. +11
    -3
      README.md
  3. +0
    -9
      docs/graph.html
  4. +22
    -28
      src/graph/Graph.js
  5. +22
    -28
      vis.js
  6. +5
    -5
      vis.min.js

+ 6
- 1
HISTORY.md View File

@ -2,6 +2,11 @@ vis.js history
http://visjs.org http://visjs.org
## version 0.0.9
- First working version of the Graph imported from the old library.
## 2013-05-03, version 0.0.8 ## 2013-05-03, version 0.0.8
- Performance improvements: only visible items are rendered. - Performance improvements: only visible items are rendered.
@ -22,5 +27,5 @@ http://visjs.org
## 2013-04-16, version 0.0.5 ## 2013-04-16, version 0.0.5
- First working version of the Timeline
- First working version of the Timeline.
- Website created. - Website created.

+ 11
- 3
README.md View File

@ -4,7 +4,15 @@ vis.js
Vis.js is a dynamic, browser based visualization library. Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, to handle large amounts The library is designed to be easy to use, to handle large amounts
of dynamic data, and to enable manipulation of the data. of dynamic data, and to enable manipulation of the data.
The library consists of Timeline, LineChart, LineChart3d, Graph, and Treegrid.
The library consists of the following components:
- Timeline. Display different types of data on a timeline.
The timeline and the items on the timeline can be interactively moved,
zoomed, and manipulated.
- Graph. Display a graph of network with nodes and edges.
- DataSet and DataView. A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
Filter, order, and cast data.
Vis.js Library is part of [CHAP](http://chap.almende.com), Vis.js Library is part of [CHAP](http://chap.almende.com),
the Common Hybrid Agent Platform, developed by [Almende B.V](http://almende.com). the Common Hybrid Agent Platform, developed by [Almende B.V](http://almende.com).
@ -27,7 +35,7 @@ Or download the library from the github project:
## Load ## Load
To use a component, include the javascript file of vis in your webpage:
To use a component, include the javascript file of vis in your web page:
```html ```html
<!DOCTYPE HTML> <!DOCTYPE HTML>
@ -60,7 +68,7 @@ require(['vis'], function (math) {
A timeline can be instantiated as: A timeline can be instantiated as:
```js ```js
var timeline = new Timeline(container, data, options);
var timeline = new vis.Timeline(container, data, options);
``` ```
Where `container` is an HTML element, `data` is an Array with data or a DataSet, Where `container` is an HTML element, `data` is an Array with data or a DataSet,

+ 0
- 9
docs/graph.html View File

@ -1044,15 +1044,6 @@ vis.events.addListener(graph, 'select', onselect);
</td> </td>
<td>none</td> <td>none</td>
</tr> </tr>
<tr>
<td>ready</td>
<td>The graph is loaded and ready for external method calls.
If you want to interact with the graph, and call methods after you draw it,
you should set up a listener for this event before you call the setData method,
and call them only after the event was fired.</td>
<td>none</td>
</tr>
</table> </table>

+ 22
- 28
src/graph/Graph.js View File

@ -57,10 +57,15 @@ function Graph (container, data, options) {
"maxIterations": 1000 // maximum number of iteration to stabilize "maxIterations": 1000 // maximum number of iteration to stabilize
}; };
var graph = this;
this.nodes = []; // array with Node objects this.nodes = []; // array with Node objects
this.edges = []; // array with Edge objects this.edges = []; // array with Edge objects
this.images = new Images(); // object with images
this.groups = new Groups(); // object with groups this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images
this.images.setOnloadCallback(function () {
graph._redraw();
});
// properties of the data // properties of the data
this.moving = false; // True if any of the nodes have an undefined position this.moving = false; // True if any of the nodes have an undefined position
@ -79,39 +84,25 @@ function Graph (container, data, options) {
} }
/** /**
* Main drawing logic. This is the function that needs to be called
* in the html page, to draw the Graph.
* Set nodes and edges, and optionally options as well.
* *
* A data table with the events must be provided, and an options table.
* @param {Object} data Object containing parameters: * @param {Object} data Object containing parameters:
* {Array} nodes Array with nodes * {Array} nodes Array with nodes
* {Array} edges Array with edges * {Array} edges Array with edges
* {Options} [options] Object with options * {Options} [options] Object with options
*/ */
Graph.prototype.setData = function(data) { Graph.prototype.setData = function(data) {
if (data.options) {
this.setOptions(data.options);
}
this.setOptions(data && data.options);
// set all data // set all data
this.setNodes(data.nodes);
this.setEdges(data.edges);
this._setNodes(data && data.nodes);
this._setEdges(data && data.edges);
this._reposition(); // TODO: bad solution
// find a stable position or start animating to a stable position
if (this.stabilize) { if (this.stabilize) {
this._doStabilize(); this._doStabilize();
} }
this.start(); this.start();
// create an onload callback method for the images
var graph = this;
var callback = function () {
graph._redraw();
};
this.images.setOnloadCallback(callback);
// fire the ready event
this.trigger('ready');
}; };
/** /**
@ -190,7 +181,7 @@ Graph.prototype.setOptions = function (options) {
/** /**
* fire an event * fire an event
* @param {String} event The name of an event, for example "select" or "ready"
* @param {String} event The name of an event, for example "select"
* @param {Object} params Optional object with event parameters * @param {Object} params Optional object with event parameters
*/ */
Graph.prototype.trigger = function (event, params) { Graph.prototype.trigger = function (event, params) {
@ -1020,17 +1011,17 @@ Graph.prototype._setSize = function(width, height) {
}; };
/** /**
* Load all nodes by reading the data table nodesTable
* @param {Array} nodes The data containing the nodes.
* Set a data set with nodes for the graph
* @param {Array} nodes The data containing the nodes.
* @private
*/ */
Graph.prototype.setNodes = function(nodes) {
Graph.prototype._setNodes = function(nodes) {
this.selection = []; this.selection = [];
this.nodes = []; this.nodes = [];
this.moving = false; this.moving = false;
if (!nodes) { if (!nodes) {
return; return;
} }
this.nodesTable = nodes;
var hasValues = false; var hasValues = false;
var rowCount = nodes.length; var rowCount = nodes.length;
@ -1050,6 +1041,9 @@ Graph.prototype.setNodes = function(nodes) {
if (hasValues) { if (hasValues) {
this._updateValueRange(this.nodes); this._updateValueRange(this.nodes);
} }
// give the nodes some first (random) position
this._reposition(); // TODO: bad solution
}; };
/** /**
@ -1184,13 +1178,13 @@ Graph.prototype._findNodeByRow = function (row) {
/** /**
* Load edges by reading the data table * Load edges by reading the data table
* @param {Array} edges The data containing the edges. * @param {Array} edges The data containing the edges.
* @private
*/ */
Graph.prototype.setEdges = function(edges) {
Graph.prototype._setEdges = function(edges) {
this.edges = []; this.edges = [];
if (!edges) { if (!edges) {
return; return;
} }
this.edgesTable = edges;
var hasValues = false; var hasValues = false;
var rowCount = edges.length; var rowCount = edges.length;
@ -1599,7 +1593,7 @@ Graph.prototype._doStabilize = function() {
var end = new Date(); var end = new Date();
//console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
// console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
}; };
/** /**

+ 22
- 28
vis.js View File

@ -8948,10 +8948,15 @@ function Graph (container, data, options) {
"maxIterations": 1000 // maximum number of iteration to stabilize "maxIterations": 1000 // maximum number of iteration to stabilize
}; };
var graph = this;
this.nodes = []; // array with Node objects this.nodes = []; // array with Node objects
this.edges = []; // array with Edge objects this.edges = []; // array with Edge objects
this.images = new Images(); // object with images
this.groups = new Groups(); // object with groups this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images
this.images.setOnloadCallback(function () {
graph._redraw();
});
// properties of the data // properties of the data
this.moving = false; // True if any of the nodes have an undefined position this.moving = false; // True if any of the nodes have an undefined position
@ -8970,39 +8975,25 @@ function Graph (container, data, options) {
} }
/** /**
* Main drawing logic. This is the function that needs to be called
* in the html page, to draw the Graph.
* Set nodes and edges, and optionally options as well.
* *
* A data table with the events must be provided, and an options table.
* @param {Object} data Object containing parameters: * @param {Object} data Object containing parameters:
* {Array} nodes Array with nodes * {Array} nodes Array with nodes
* {Array} edges Array with edges * {Array} edges Array with edges
* {Options} [options] Object with options * {Options} [options] Object with options
*/ */
Graph.prototype.setData = function(data) { Graph.prototype.setData = function(data) {
if (data.options) {
this.setOptions(data.options);
}
this.setOptions(data && data.options);
// set all data // set all data
this.setNodes(data.nodes);
this.setEdges(data.edges);
this._setNodes(data && data.nodes);
this._setEdges(data && data.edges);
this._reposition(); // TODO: bad solution
// find a stable position or start animating to a stable position
if (this.stabilize) { if (this.stabilize) {
this._doStabilize(); this._doStabilize();
} }
this.start(); this.start();
// create an onload callback method for the images
var graph = this;
var callback = function () {
graph._redraw();
};
this.images.setOnloadCallback(callback);
// fire the ready event
this.trigger('ready');
}; };
/** /**
@ -9081,7 +9072,7 @@ Graph.prototype.setOptions = function (options) {
/** /**
* fire an event * fire an event
* @param {String} event The name of an event, for example "select" or "ready"
* @param {String} event The name of an event, for example "select"
* @param {Object} params Optional object with event parameters * @param {Object} params Optional object with event parameters
*/ */
Graph.prototype.trigger = function (event, params) { Graph.prototype.trigger = function (event, params) {
@ -9911,17 +9902,17 @@ Graph.prototype._setSize = function(width, height) {
}; };
/** /**
* Load all nodes by reading the data table nodesTable
* @param {Array} nodes The data containing the nodes.
* Set a data set with nodes for the graph
* @param {Array} nodes The data containing the nodes.
* @private
*/ */
Graph.prototype.setNodes = function(nodes) {
Graph.prototype._setNodes = function(nodes) {
this.selection = []; this.selection = [];
this.nodes = []; this.nodes = [];
this.moving = false; this.moving = false;
if (!nodes) { if (!nodes) {
return; return;
} }
this.nodesTable = nodes;
var hasValues = false; var hasValues = false;
var rowCount = nodes.length; var rowCount = nodes.length;
@ -9941,6 +9932,9 @@ Graph.prototype.setNodes = function(nodes) {
if (hasValues) { if (hasValues) {
this._updateValueRange(this.nodes); this._updateValueRange(this.nodes);
} }
// give the nodes some first (random) position
this._reposition(); // TODO: bad solution
}; };
/** /**
@ -10075,13 +10069,13 @@ Graph.prototype._findNodeByRow = function (row) {
/** /**
* Load edges by reading the data table * Load edges by reading the data table
* @param {Array} edges The data containing the edges. * @param {Array} edges The data containing the edges.
* @private
*/ */
Graph.prototype.setEdges = function(edges) {
Graph.prototype._setEdges = function(edges) {
this.edges = []; this.edges = [];
if (!edges) { if (!edges) {
return; return;
} }
this.edgesTable = edges;
var hasValues = false; var hasValues = false;
var rowCount = edges.length; var rowCount = edges.length;
@ -10490,7 +10484,7 @@ Graph.prototype._doStabilize = function() {
var end = new Date(); var end = new Date();
//console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
// console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
}; };
/** /**

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


Write Preview
Loading…
Cancel
Save