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: +

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

- 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: