From f25d8c5f65aa782ea11b9eba397c7b4da4b44b0e Mon Sep 17 00:00:00 2001
From: josdejong
Date: Mon, 3 Jun 2013 15:11:49 +0200
Subject: [PATCH] Simplified Graph constructor
---
docs/graph.html | 102 ++++++++--------
examples/graph/01_basic_usage.html | 14 +--
examples/graph/02_random_nodes.html | 14 +--
examples/graph/03_images.html | 14 +--
examples/graph/04_shapes.html | 14 +--
examples/graph/05_social_network.html | 14 +--
examples/graph/06_groups.html | 14 +--
examples/graph/08_selections.html | 14 +--
examples/graph/16_scalable_images.html | 14 +--
examples/graph/19_dot_language.html | 12 +-
.../graph/20_dot_language_playground.html | 22 ++--
src/graph/graph.js | 112 +++++++++---------
vis.js | 112 +++++++++---------
vis.min.js | 6 +-
14 files changed, 229 insertions(+), 249 deletions(-)
diff --git a/docs/graph.html b/docs/graph.html
index 25ada445..c7bda82a 100644
--- a/docs/graph.html
+++ b/docs/graph.html
@@ -103,17 +103,17 @@
{from: 2, to: 5}
];
- // specify options
+ // create a graph
+ var container = document.getElementById('mygraph');
+ var data= {
+ nodes: nodes,
+ edges: edges,
+ };
var options = {
width: '400px',
height: '400px'
};
-
- // create a graph
- var graph = new vis.Graph(document.getElementById('mygraph'));
-
- // draw the graph with the created data and options
- graph.draw(nodes, edges, options);
+ var graph = new vis.Graph(container, data, options);
</script>
</body>
@@ -132,38 +132,41 @@
-The class name of the Graph is vis.Graph
-var graph = new vis.Graph(container);
-
-After being loaded, the graph can be drawn via the function draw()
,
-provided with data and options.
-graph.draw(nodes, edges, packages, options);
-where nodes
, edges
, and packages
are
-an Array
, and options
is a name-value map in the
-JSON format. Both edges
and packages
are optional.
-
-
+The class name of the Graph is vis.Graph
.
+var graph = new vis.Graph(container, data, options);
+The constructor accepts three parameters:
+
+ -
+
container
is the DOM element in which to create the graph.
+
+ -
+
data
is an Object containing properties nodes
and
+ edges
, which both contain an array with objects.
+ Optionally, data may contain an options
object.
+ The parameter data
is optional, data can also be set using
+ the method setData
.
+
+ -
+
options
is an optional Object containing a name-value map
+ with options. Options can also be set using the method
+ setOptions
.
+
+
Data Format
- Graph accepts the following data
+ The Graph draws nodes and edges, which are both an Array with objects.
+ This section describes the data format of nodes and edges.
-
- - Nodes. An array which defines the nodes. Required.
- - Edges. An array which defines edges between nodes. Optional.
- - Packages. An array which defines static and/or interactive packages
- moving between nodes. Required.
-
Nodes
- The node array is required for the graph visualization.
-
- The array must contain at least a property id
.
- The array can have extra properties, used to define the type and style of
- individual nodes.
+ Nodes typically have an id
and text
.
+ A node must contain at least a property id
.
+ Nodes can have extra properties, used to define the type and style the
+ nodes.
@@ -181,7 +184,7 @@ var nodes = [
- The node properties are defined as:
+ Nodes support the following properties:
@@ -372,10 +375,10 @@ var nodes = [
Edges
- The array with edges must at least contain properties from
and
- to
.
- The array can have extra properties, used to define the type and style of
- individual edges.
+ Edges are connections between nodes.
+ An edge must at least contain properties from
and
+ to
, both referring to the id
of a node.
+ Edges can have extra properties, used to define the type and style.
@@ -392,7 +395,7 @@ var edges= [
- The edge properties are defined as:
+ Edges support the following properties:
@@ -769,7 +772,7 @@ var packages = [
containing with nodes and edges in the format of Graph.
The returned object contains parameters nodes
,
edges
, and options
, which can be used
- directly to draw a graph using draw(nodes, edges, options)
.
+ directly to draw a graph using setData(data)
.
@@ -779,15 +782,12 @@ Example usage:
- // create a graph view
- var graph = new vis.Graph(container);
-
// parse data in DOT-notation
var dot = 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
- data = vis.Graph.util.DOTToGraph(dot);
+ var data = vis.Graph.util.DOTToGraph(dot);
- // draw the data
- graph.draw(data.nodes, data.edges, data.options);
+ // create a graph
+ var graph = new vis.Graph(container, data);
@@ -1219,7 +1219,7 @@ var nodes = [
Dynamic Data
- The Graph is normally rendered using the method draw
.
+ The Graph is normally rendered using the method setData
.
The graph can handle dynamic data in two ways:
@@ -1399,12 +1399,11 @@ packageTable.addRow([7, 1, 2, 'delete', undefined, undefined, new D
- draw(nodes, edges, packages, options) |
+ setData(data) |
none |
- Loads data, sets the provided options, and draws the graph.
- Parameters nodes, edges, and packages are an Array,
- and options is a name-value map in the JSON format.
- Both edges and packages are optional and can be left undefined.
+ | Loads data. Parameter data is an object containing
+ nodes, edges, and options. Parameters nodes, edges are an Array.
+ Options is a name-value map and is optional.
|
@@ -1420,8 +1419,7 @@ packageTable.addRow([7, 1, 2, 'delete', undefined, undefined, new D
redraw() |
none |
- Redraw the graph. Useful after the camera position is changed externally,
- when data is changed, or when the layout of the webpage changed. |
+ Redraw the graph. Useful when the layout of the webpage changed. |
@@ -1515,7 +1513,7 @@ vis.events.addListener(graph, 'select', onselect);
ready |
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 draw method,
+ you should set up a listener for this event before you call the setData method,
and call them only after the event was fired. |
none |
diff --git a/examples/graph/01_basic_usage.html b/examples/graph/01_basic_usage.html
index f93de782..8be0741d 100644
--- a/examples/graph/01_basic_usage.html
+++ b/examples/graph/01_basic_usage.html
@@ -28,17 +28,17 @@
{from: 2, to: 5}
];
- // specify options
+ // create a graph
+ var container = document.getElementById('mygraph');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
var options = {
width: '400px',
height: '400px'
};
-
- // create a graph
- var graph = new vis.Graph(document.getElementById('mygraph'));
-
- // draw the graph with the created data and options
- graph.draw(nodes, edges, options);
+ var graph = new vis.Graph(container, data, options);
-
+