|
|
- <!doctype html>
- <html>
-
- <head>
- <title>vis.js | graph documentation</title>
-
- <link href="css/prettify.css" type="text/css" rel="stylesheet" />
- <link href='css/style.css' type='text/css' rel='stylesheet'>
-
- <script type="text/javascript" src="lib/prettify/prettify.js"></script>
- </head>
-
- <body onload="prettyPrint();">
- <div id="container">
-
- <h1>Graph documentation</h1>
-
- <table>
- <tr>
- <td>Author</td>
- <td>Jos de Jong, <a href="http://www.almende.com" target="_blank">Almende B.V.</a></td>
- </tr>
- <tr>
- <td>Webpage</td>
- <td><a href="http://visjs.org" target="_blank">http://visjs.org</a></td>
- </tr>
- <tr>
- <td>License</td>
- <td> <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a></td>
- </tr>
- </table>
-
-
- <h2><a name="Contents"></a>Contents</h2>
- <ul>
- <li><a href="#Overview">Overview</a></li>
- <li><a href="#Example">Example</a></li>
- <li><a href="#Loading">Loading</a></li>
- <li>
- <a href="#Data_Format">Data Format</a>
- <ul>
- <li><a href="#Nodes">Nodes</a></li>
- <li><a href="#Edges">Edges</a></li>
- <li><a href="#DOT_language">DOT_language</a></li>
- </ul>
- </li>
- <li><a href="#Configuration_Options">Configuration Options</a></li>
- <li><a href="#Methods">Methods</a></li>
- <li><a href="#Events">Events</a></li>
- <li><a href="#Data_Policy">Data Policy</a></li>
- </ul>
-
- <h2 id="Overview">Overview</h2>
- <p>
- Graph is a visualization to display graphs and networks consisting of nodes
- and edges. The visualization is easy to use and supports custom shapes,
- styles, colors, sizes, images, and more.
- </p>
-
- <p>
- The graph visualization works smooth on any modern browser for up to a
- few hundred nodes and edges.
- </p>
-
- <p>
- To get started with Graph, install or download the
- <a href="http://visjs.org" target="_blank">vis.js</a> library.
- </p>
-
- <h2 id="Example">Example</h2>
- <p>
- Here a basic graph example. More examples can be found in the
- <a href="../examples" target="_blank">examples directory</a>.
- </p>
-
- <pre class="prettyprint lang-html"><!doctype html>
- <html>
- <head>
- <title>Graph | Basic usage</title>
-
- <script type="text/javascript" src="../../vis.js"></script>
- </head>
-
- <body>
-
- <div id="mygraph"></div>
-
- <script type="text/javascript">
- // create an array with nodes
- var nodes = [
- {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
- var edges = [
- {from: 1, to: 2},
- {from: 1, to: 3},
- {from: 2, to: 4},
- {from: 2, to: 5}
- ];
-
- // create a graph
- var container = document.getElementById('mygraph');
- var data= {
- nodes: nodes,
- edges: edges,
- };
- var options = {
- width: '400px',
- height: '400px'
- };
- var graph = new vis.Graph(container, data, options);
- </script>
-
- </body>
- </html>
- </pre>
-
-
- <h2 id="Loading">Loading</h2>
- <p>
- Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
- in a subfolder of your project. Include the library script in the head of your html code:
- </p>
-
- <pre class="prettyprint lang-html">
- <script type="text/javascript" src="vis/vis.js"></script>
- </pre>
-
-
- The constructor of the Graph is <code>vis.Graph</code>.
- <pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
-
- The constructor accepts three parameters:
- <ul>
- <li>
- <code>container</code> is the DOM element in which to create the graph.
- </li>
- <li>
- <code>data</code> is an Object containing properties <code>nodes</code> and
- <code>edges</code>, which both contain an array with objects.
- Optionally, data may contain an <code>options</code> object.
- The parameter <code>data</code> is optional, data can also be set using
- the method <code>setData</code>. Section <a href="#Data_Format">Data Format</a>
- describes the data object.
- </li>
- <li>
- <code>options</code> is an optional Object containing a name-value map
- with options. Options can also be set using the method
- <code>setOptions</code>.
- Section <a href="#Configuration_Options">Configuration Options</a>
- describes the available options.
- </li>
- </ul>
-
- <h2 id="Data_Format">Data Format</h2>
- <p>
- The <code>data</code> parameter of the Graph constructor is an object
- which can contain different types of data.
- The following properties are supported in the <code>data</code> object:
- </p>
-
- <ul>
- <li>
- <span style="font-weight: bold;">A property pair <code>nodes</code> and <code>edges</code></span>,
- both containing an Array with objects. The data formats are described
- in the sections <a href="#Nodes">Nodes</a> and <a href="#Edges">Edges</a>.
- Example:
- <pre class="prettyprint lang-js">
- var data = {
- nodes: [...],
- edges: [...]
- };
- </pre>
- </li>
- <li>
- <span style="font-weight: bold;">A property <code>dot</code></span>,
- containing a string with data in the
- <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
- DOT support is described in section <a href="#DOT_language">DOT_language</a>.
-
- Example:
- <pre class="prettyprint lang-js">
- var data = {
- dot: '...'
- };
- </pre>
- </li>
- <li>
- <span style="font-weight: bold;">A property <code>options</code></span>,
- containing an object with global options.
- Options can be provided as third parameter in the graph constructor
- as well. Section <a href="#Configuration_Options">Configuration Options</a>
- describes the available options.
-
- </li>
- </ul>
-
- <h3 id="Nodes">Nodes</h3>
-
- <p>
- Nodes typically have an <code>id</code> and <code>label</code>.
- A node must contain at least a property <code>id</code>.
- Nodes can have extra properties, used to define the shape and style of the
- nodes.
- </p>
-
- <p>
- A JavaScript Array with nodes is constructed like:
- </p>
- <pre class="prettyprint lang-js">
- var nodes = [
- {
- id: 1,
- label: 'Node 1'
- },
- // ... more nodes
- ];
- </pre>
-
-
- <p>
- Nodes support the following properties:
- </p>
-
- <table>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Required</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td>backgroundColor</td>
- <td>String</td>
- <td>"#97C2FC"</td>
- <td>Background color for the node.</td>
- </tr>
-
- <tr>
- <td>borderColor</td>
- <td>String</td>
- <td>"#2B7CE9"</td>
- <td>Border color for the node.</td>
- </tr>
-
- <tr>
- <td>group</td>
- <td>Number | String</td>
- <td>no</td>
- <td>A group number or name. The type can be <code>number</code>,
- <code>string</code>, or an other type. All nodes with the same group get
- the same color schema.</td>
- </tr>
-
- <tr>
- <td>fontColor</td>
- <td>String</td>
- <td>"black"</td>
- <td>Font color for label in the node.</td>
- </tr>
-
- <tr>
- <td>fontFace</td>
- <td>String</td>
- <td>"sans"</td>
- <td>Font face for label in the node, for example "verdana" or "arial".</td>
- </tr>
-
- <tr>
- <td>fontSize</td>
- <td>Number</td>
- <td>14</td>
- <td>Font size in pixels for label in the node.</td>
- </tr>
-
- <tr>
- <td>highlightColor</td>
- <td>String</td>
- <td>"#D2E5FF"</td>
- <td>Background color of the node when selected.</td>
- </tr>
-
- <tr>
- <td>id</td>
- <td>Number | String</td>
- <td>yes</td>
- <td>A unique id for this node.
- Nodes may not have duplicate id's.
- Id's do not need to be consecutive.
- An id is normally a number, but may be any type.</td>
- </tr>
-
- <tr>
- <td>image</td>
- <td>string</td>
- <td>no</td>
- <td>Url of an image. Only applicable when the shape of the node is
- <code>image</code>.</td>
- </tr>
-
- <tr>
- <td>radius</td>
- <td>number</td>
- <td>no</td>
- <td>Radius for the node. Applicable for all shapes except <code>rect</code>,
- <code>circle</code>, and <code>database</code>.
- The value of <code>radius</code> will override a value in
- property <code>value</code>.</td>
- </tr>
-
- <tr>
- <td>shape</td>
- <td>string</td>
- <td>no</td>
- <td>Define the shape for the node.
- Choose from <code>rect</code> (default), <code>circle</code>,
- <code>database</code>, <code>image</code>, <code>label</code>,
- <code>dot</code>, <code>star</code>, <code>triangle</code>,
- <code>triangleDown</code>, and <code>square</code>.
- <br><br>
-
- In case of <code>image</code>, a property with name <code>image</code> must
- be provided, containing image urls.
- <br><br>
-
- The shapes <code>dot</code>, <code>star</code>, <code>triangle</code>,
- <code>triangleDown</code>, and <code>square</code>, are scalable.
- The size is determined by the properties <code>radius</code> or
- <code>value</code>.
- <br><br>
-
- When a property <code>label</code> is provided,
- this label will be displayed inside the shape in case of shapes
- <code>rect</code>, <code>circle</code>, and <code>database</code>.
- For all other shapes, the label will be displayed right below the shape.
-
- </td>
- </tr>
-
- <tr>
- <td>label</td>
- <td>string</td>
- <td>no</td>
- <td>Text label to be displayed in the node or under the image of the node.
- Multiple lines can be separated by a newline character <code>\n</code> .</td>
- </tr>
-
- <tr>
- <td>title</td>
- <td>string</td>
- <td>no</td>
- <td>Title to be displayed when the user hovers over the node.
- The title can contain HTML code.</td>
- </tr>
-
- <tr>
- <td>value</td>
- <td>number</td>
- <td>no</td>
- <td>A value for the node.
- The radius of the nodes will be scaled automatically from minimum to
- maximum value.
- Only applicable when the shape of the node is <code>dot</code>.
- If a <code>radius</code> is provided for the node too, it will override the
- radius calculated from the value.</td>
- </tr>
-
- <tr>
- <td>x</td>
- <td>number</td>
- <td>no</td>
- <td>Horizontal position in pixels.
- The horizontal position of the node will be fixed.
- The vertical position y may remain undefined.</td>
- </tr>
- <tr>
- <td>y</td>
- <td>number</td>
- <td>no</td>
- <td>Vertical position in pixels.
- The vertical position of the node will be fixed.
- The horizontal position x may remain undefined.</td>
- </tr>
-
- </table>
-
-
- <h3 id="Edges">Edges</h3>
-
- <p>
- Edges are connections between nodes.
- An edge must at least contain properties <code>from</code> and
- <code>to</code>, both referring to the <code>id</code> of a node.
- Edges can have extra properties, used to define the type and style.
- </p>
-
- <p>
- A JavaScript Array with edges is constructed as:
- </p>
- <pre class="prettyprint lang-js">
- var edges = [
- {
- from: 1,
- to: 3
- },
- // ... more edges
- ];
- </pre>
-
- <p>
- Edges support the following properties:
- </p>
-
- <table>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Required</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td>altdashlength</td>
- <td>number</td>
- <td>no</td>
- <td>Length of the alternated dash in pixels on a dashed line.
- Specifying <code>altdashlength</code> allows for creating
- a dashed line with a dash-dot style, for example when
- <code>dashlength=10</code> and <code>altdashlength=5</code>.
- See also the option <code>dashlength</code>.
- Only applicable when the line style is <code>dash-line</code>.</td>
- </tr>
-
- <tr>
- <td>color</td>
- <td>string</td>
- <td>no</td>
- <td>A HTML color for the edge.</td>
- </tr>
-
- <tr>
- <td>dashlength</td>
- <td>number</td>
- <td>no</td>
- <td>Length of a dash in pixels on a dashed line.
- Only applicable when the line style is <code>dash-line</code>.</td>
- </tr>
-
- <tr>
- <td>dashgap</td>
- <td>number</td>
- <td>no</td>
- <td>Length of a gap in pixels on a dashed line.
- Only applicable when the line style is <code>dash-line</code>.</td>
- </tr>
-
- <tr>
- <td>fontColor</td>
- <td>String</td>
- <td>"black"</td>
- <td>Font color for the text label of the edge.
- Only applicable when property <code>label</code> is defined.</td>
- </tr>
-
- <tr>
- <td>fontFace</td>
- <td>String</td>
- <td>"sans"</td>
- <td>Font face for the text label of the edge,
- for example "verdana" or "arial".
- Only applicable when property <code>label</code> is defined.</td>
- </tr>
-
- <tr>
- <td>fontSize</td>
- <td>Number</td>
- <td>14</td>
- <td>Font size in pixels for the text label of the edge.
- Only applicable when property <code>label</code> is defined.</td>
- </tr>
-
- <tr>
- <td>from</td>
- <td>Number | String</td>
- <td>yes</td>
- <td>The id of a node where the edge starts. The type must correspond with
- the type of the node id's. This is normally a number, but can be any
- type.</td>
- </tr>
-
- <tr>
- <td>length</td>
- <td>number</td>
- <td>no</td>
- <td>The length of the edge in pixels.</td>
- </tr>
-
- <tr>
- <td>style</td>
- <td>string</td>
- <td>no</td>
- <td>Define a line style for the edge.
- Choose from <code>line</code> (default), <code>arrow</code>,
- <code>arrow-center</code>, or <code>dash-line</code>.
- </td>
- </tr>
-
- <tr>
- <td>label</td>
- <td>string</td>
- <td>no</td>
- <td>Text label to be displayed halfway the edge.</td>
- </tr>
-
- <tr>
- <td>title</td>
- <td>string</td>
- <td>no</td>
- <td>Title to be displayed when the user hovers over the edge.
- The title can contain HTML code.</td>
- </tr>
-
- <tr>
- <td>to</td>
- <td>Number | String</td>
- <td>yes</td>
- <td>The id of a node where the edge ends. The type must correspond with
- the type of the node id's. This is normally a number, but can be any
- type.</td>
- </tr>
- <tr>
- <td>value</td>
- <td>number</td>
- <td>no</td>
- <td>A value for the edge.
- The width of the edges will be scaled automatically from minimum to
- maximum value.
- If a <code>width</code> is provided for the edge too, it will override the
- width calculated from the value.</td>
- </tr>
-
- <tr>
- <td>width</td>
- <td>number</td>
- <td>no</td>
- <td>Width of the line in pixels. The <code>width</code> will
- override a specified <code>value</code>, if a <code>value</code> is
- specified too.</td>
- </tr>
- </table>
-
-
-
- <h3 id="DOT_language">DOT language</h3>
-
- <p>
- Graph supports data in the
- <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
- To provide data in the DOT language, the <code>data</code> object must contain
- a property <code>dot</code> with a String containing the data.
- </p>
-
- <p>
- Example usage:
- </p>
-
- <pre class="prettyprint lang-js">
- // provide data in the DOT language
- var data = {
- dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
- };
-
- // create a graph
- var graph = new vis.Graph(container, data);
- </pre>
-
-
-
- <h2 id="Configuration_Options">Configuration Options</h2>
-
- <p>
- Options can be used to customize the graph. Options are defined as a JSON object.
- All options are optional.
- </p>
-
- <pre class="prettyprint lang-js">
- var options = {
- width: '100%',
- height: '400px',
- edges: {
- color: 'red',
- width: 2
- }
- };
- </pre>
-
- <p>
- The following options are available.
- </p>
-
- <table>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Default</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td>backgroundColor</td>
- <td>String or Object</td>
- <td>"white"</td>
- <td>The background color for the main area of the chart.
- Can be either a simple HTML color string, for example: 'red' or '#00cc00',
- or an object with optional properties stroke, strokeWidth, and fill.</td>
- </tr>
- <tr>
- <td>backgroundColor.stroke</td>
- <td>String</td>
- <td>"#666"</td>
- <td>The color of the chart border, as an HTML color string.</td>
- </tr>
- <tr>
- <td>backgroundColor.strokeWidth</td>
- <td>Number</td>
- <td>1</td>
- <td>The border width, in pixels.</td>
- </tr>
- <tr>
- <td>backgroundColor.fill</td>
- <td>String</td>
- <td>"white"</td>
- <td>The chart fill color, as an HTML color string.</td>
- </tr>
-
- <tr>
- <td>groups</td>
- <td>Object</td>
- <td>none</td>
- <td>It is possible to specify custom styles for groups.
- Each node assigned a group gets the specified style.
- See <a href="#Groups">Groups</a> for an overview of the available styles
- and an example.
- </td>
- </tr>
-
- <tr>
- <td>height</td>
- <td>String</td>
- <td>"400px"</td>
- <td>The height of the graph in pixels or as a percentage.</td>
- </tr>
-
- <tr>
- <td>edges.altdashlength</td>
- <td>number</td>
- <td>none</td>
- <td>Length of the alternated dash in pixels on a dashed line.
- Specifying <code>altdashlength</code> allows for creating
- a dashed line with a dash-dot style, for example when
- <code>dashlength=10</code> and <code>altdashlength=5</code>.
- See also the option <code>dashlength</code>.
- Only applicable when the line style is <code>dash-line</code>.</td>
- </tr>
-
- <tr>
- <td>edges.color</td>
- <td>String</td>
- <td>"#2B7CE9"</td>
- <td>The default color of a edge.</td>
- </tr>
-
- <tr>
- <td>edges.dashlength</td>
- <td>number</td>
- <td>10</td>
- <td>Length of a dash in pixels on a dashed line.
- Only applicable when the line style is <code>dash-line</code>.</td>
- </tr>
-
- <tr>
- <td>edges.dashgap</td>
- <td>number</td>
- <td>5</td>
- <td>Length of a gap in pixels on a dashed line.
- Only applicable when the line style is <code>dash-line</code>.</td>
- </tr>
-
- <tr>
- <td>edges.length</td>
- <td>Number</td>
- <td>100</td>
- <td>The default length of a edge.</td>
- </tr>
- <tr>
- <td>edges.style</td>
- <td>String</td>
- <td>"line"</td>
- <td>The default style of a edge.
- Choose from <code>line</code> (default), <code>arrow</code>,
- <code>arrow-center</code>, <code>dash-line</code>.</td>
- </tr>
- <tr>
- <td>edges.width</td>
- <td>Number</td>
- <td>1</td>
- <td>The default width of a edge.</td>
- </tr>
-
- <tr>
- <td>nodes.borderColor</td>
- <td>String</td>
- <td>"#2B7CE9"</td>
- <td>Default border color of the nodes</td>
- </tr>
-
- <tr>
- <td>nodes.backgroundColor</td>
- <td>String</td>
- <td>"#97C2FC"</td>
- <td>Default background color of the nodes</td>
- </tr>
- <tr>
- <td>nodes.highlightColor</td>
- <td>String</td>
- <td>"#D2E5FF"</td>
- <td>Default background color of the node when the node is selected.</td>
- </tr>
-
- <tr>
- <td>nodes.fontColor</td>
- <td>String</td>
- <td>"black"</td>
- <td>Default font color for the text label in the nodes.</td>
- </tr>
- <tr>
- <td>nodes.fontFace</td>
- <td>String</td>
- <td>"sans"</td>
- <td>Default font face for the text label in the nodes, for example "verdana" or "arial".</td>
- </tr>
- <tr>
- <td>nodes.fontSize</td>
- <td>Number</td>
- <td>14</td>
- <td>Default font size in pixels for the text label in the nodes.</td>
- </tr>
- <tr>
- <td>nodes.group</td>
- <td>String</td>
- <td>none</td>
- <td>Default group for the nodes.</td>
- </tr>
- <tr>
- <td>nodes.image</td>
- <td>String</td>
- <td>none</td>
- <td>Default image url for the nodes. only applicable with shape <code>image</code>.</td>
- </tr>
-
- <tr>
- <td>nodes.widthMin</td>
- <td>Number</td>
- <td>16</td>
- <td>The minimum width for a scaled image. Only applicable with shape <code>image</code>.</td>
- </tr>
- <tr>
- <td>nodes.widthMax</td>
- <td>Number</td>
- <td>64</td>
- <td>The maximum width for a scaled image. Only applicable with shape <code>image</code>.</td>
- </tr>
-
- <tr>
- <td>nodes.shape</td>
- <td>String</td>
- <td>"rect"</td>
- <td>The default shape for all nodes.
- Choose from <code>rect</code> (default), <code>circle</code>,
- <code>database</code>, <code>image</code>, <code>label</code>, <code>dot</code>.
- This shape can be overridden by a group shape, or by a shape of an individual node.</td>
- </tr>
- <tr>
- <td>nodes.radius</td>
- <td>Number</td>
- <td>5</td>
- <td>The default radius for a node. Only applicable with shape <code>dot</code>.</td>
- </tr>
- <tr>
- <td>nodes.radiusMin</td>
- <td>Number</td>
- <td>5</td>
- <td>The minimum radius for a scaled node. Only applicable with shape <code>dot</code>.</td>
- </tr>
- <tr>
- <td>nodes.radiusMax</td>
- <td>Number</td>
- <td>20</td>
- <td>The maximum radius for a scaled node. Only applicable with shape <code>dot</code>.</td>
- </tr>
-
- <tr>
- <td>selectable</td>
- <td>Boolean</td>
- <td>true</td>
- <td>If true, nodes in the graph can be selected by clicking them, or
- by keeping the <code>Shift</code> key down and dragging a selection area around them.
- When the <code>Ctrl</code> key is down, the new selection is appended to the
- previous selection. If not, the new selection replaces the previous selection.</td>
- </tr>
-
- <tr>
- <td>stabilize</td>
- <td>Boolean</td>
- <td>true</td>
- <td>If true, the graph is stabilized before displaying it. If false,
- the nodes move to a stabe position visibly in an animated way.</td>
- </tr>
-
- <tr>
- <td>width</td>
- <td>String</td>
- <td>"400px"</td>
- <td>The width of the graph in pixels or as a percentage.</td>
- </tr>
-
- </table>
-
- <br>
-
- <h3 id="Groups">Groups</h3>
-
- <p>It is possible to specify custom styles for groups of nodes.
- Each node having assigned to this group gets the specified style.
- The options <code>groups</code> is an object containing one or multiple groups,
- identified by a unique string, the groupname.
- </p>
- <p>
- A group can have the following styles:
- </p>
-
- <pre class="prettyprint lang-js">
- var options = {
- // ...
-
- groups: {
- mygroup: {
- shape: 'circle',
- borderColor: 'black',
- backgroundColor: 'white',
- fontColor: 'red',
- fontSize: 18,
- highlightColor: 'yellow'
- }
- // add more groups here
- }
- };
-
- var nodes = [
- {id: 1, label: 'Node 1'}, // will get the default style
- {id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
- // ... more nodes
- ];
- </pre>
-
-
- <p>The following styles are available for groups:</p>
- <table>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Default</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td>borderColor</td>
- <td>String</td>
- <td>"#2B7CE9"</td>
- <td>Border color of the node</td>
- </tr>
-
- <tr>
- <td>backgroundColor</td>
- <td>String</td>
- <td>"#97C2FC"</td>
- <td>Background color of the node</td>
- </tr>
- <tr>
- <td>highlightColor</td>
- <td>String</td>
- <td>"#D2E5FF"</td>
- <td>Background color of the node when the node is selected.</td>
- </tr>
- <tr>
- <td>image</td>
- <td>String</td>
- <td>none</td>
- <td>Default image for the nodes. Only applicable in combination with
- shape <code>image</code>.</td>
- </tr>
-
- <tr>
- <td>fontColor</td>
- <td>String</td>
- <td>"black"</td>
- <td>Font color of the node.</td>
- </tr>
- <tr>
- <td>fontFace</td>
- <td>String</td>
- <td>"sans"</td>
- <td>Font name of the node, for example "verdana" or "arial".</td>
- </tr>
- <tr>
- <td>fontSize</td>
- <td>Number</td>
- <td>14</td>
- <td>Font size for the node in pixels.</td>
- </tr>
- <tr>
- <td>shape</td>
- <td>String</td>
- <td>"rect"</td>
- <td>Choose from <code>rect</code> (default), <code>circle</code>,
- <code>database</code>, <code>image</code>, <code>label</code>,
- <code>dot</code>.
- In case of image, a property with name image must be provided, containing
- image urls.</td>
- </tr>
- <tr>
- <td>radius</td>
- <td>Number</td>
- <td>5</td>
- <td>Default radius for the node. Only applicable in combination with
- shapes <code>rect</code> and <code>dot</code>.</td>
- </tr>
-
- </table>
-
-
- <h2 id="Methods">Methods</h2>
- <p>
- Graph supports the following methods.
- </p>
-
- <table>
- <tr>
- <th>Method</th>
- <th>Return Type</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td>setData(data)</td>
- <td>none</td>
- <td>Loads data. Parameter <code>data</code> is an object containing
- nodes, edges, and options. Parameters nodes, edges are an Array.
- Options is a name-value map and is optional.
- </td>
- </tr>
-
- <tr>
- <td>setOptions(options)</td>
- <td>none</td>
- <td>Set options for the graph. The available options are described in
- the section <a href="#Configuration_Options">Configuration Options</a>.
- </td>
- </tr>
-
- <tr>
- <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>
- </tr>
-
- <tr>
- <td>redraw()</td>
- <td>none</td>
- <td>Redraw the graph. Useful when the layout of the webpage changed.</td>
- </tr>
-
- <tr>
- <td>setSelection(selection)</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>
- </tr>
-
- <tr>
- <td>setSize(width, height)</td>
- <td>none</td>
- <td>Parameters <code>width</code> and <code>height</code> are strings,
- containing a new size for the visualization. Size can be provided in pixels
- or in percentages.</td>
- </tr>
-
- </table>
-
- <h2 id="Events">Events</h2>
- <p>
- Graph fires events after one or multiple nodes are selected.
- The event can be catched by creating a listener.
- </p>
-
- <p>
- Here an example on how to catch a <code>select</code> event.
- </p>
-
- <pre class="prettyprint lang-js">
- function onselect() {
- var sel = graph.getSelection();
-
- var info = 'selected row(s): ';
- for (var i = 0; i < sel.length; i++) {
- info += sel[i].row + ' ';
- }
-
- alert(info);
- }
-
- vis.events.addListener(graph, 'select', onselect);
- </pre>
-
- <p>
- The following events are available.
- </p>
-
- <table>
- <col width="10%">
- <col width="60%">
- <col width="30%">
-
- <tr>
- <th>name</th>
- <th>Description</th>
- <th>Properties</th>
- </tr>
-
- <tr>
- <td>select</td>
- <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
- 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>.
- </td>
- <td>none</td>
- </tr>
- </table>
-
-
- <h2 id="Data_Policy">Data Policy</h2>
- <p>
- All code and data are processed and rendered in the browser. No data is sent to any server.
- </p>
-
- </div>
- </body>
- </html>
|