jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!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>
<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. Note that unlike the  <a href="timeline.html">Timeline</a>, the Graph does not need the vis.css  file.</p>
<p>  More examples can be found in the  <a href="../examples" target="_blank">examples directory</a>.</p>
<pre class="prettyprint lang-html">&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;  &lt;title&gt;Graph | Basic usage&lt;/title&gt;
  &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;  // 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);&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;</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">&lt;script type="text/javascript" src="vis/vis.js"&gt;&lt;/script&gt;</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>color</td>    <td>String | Object</td>    <td>no</td>    <td>Color for the node.</td>  </tr>
  <tr>    <td>color.background</td>    <td>String</td>    <td>no</td>    <td>Background color for the node.</td>  </tr>
  <tr>    <td>color.border</td>    <td>String</td>    <td>no</td>    <td>Border color for the node.</td>  </tr>
  <tr>    <td>color.highlight</td>    <td>String | Object</td>    <td>no</td>    <td>Color of the node when selected.</td>  </tr>
  <tr>    <td>color.highlight.background</td>    <td>String</td>    <td>no</td>    <td>Background color of the node when selected.</td>  </tr>
  <tr>    <td>color.highlight.border</td>    <td>String</td>    <td>no</td>    <td>Border color of the node when selected.</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>no</td>    <td>Font color for label in the node.</td>  </tr>
  <tr>    <td>fontFace</td>    <td>String</td>    <td>no</td>    <td>Font face for label in the node, for example "verdana" or "arial".</td>  </tr>
  <tr>    <td>fontSize</td>    <td>Number</td>    <td>no</td>    <td>Font size in pixels for label in the node.</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>box</code>,      <code>circle</code>, <code>ellipse</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>ellipse</code> (default), <code>circle</code>, <code>box</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>box</code>, <code>circle</code>, <code>ellipse</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>color</td>    <td>string</td>    <td>no</td>    <td>A HTML color for the edge.</td>  </tr>
  <tr>    <td>dash</td>    <td>Object</td>    <td>no</td>    <td>      Object containing properties for dashed lines.      Available properties: <code>length</code>, <code>gap</code>,      <code>altLength</code>.    </td>  </tr>
  <tr>    <td>dash.altLength</td>    <td>number</td>    <td>no</td>    <td>Length of the alternated dash in pixels on a dashed line.      Specifying <code>dash.altLength</code> allows for creating      a dashed line with a dash-dot style, for example when      <code>dash.length=10</code> and <code>dash.altLength=5</code>.      See also the option <code>dahs.length</code>.      Only applicable when the line style is <code>dash-line</code>.</td>  </tr>
  <tr>    <td>dash.length</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>dash.gap</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>no</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>no</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>no</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 languagevar data = {  dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'};
// create a graphvar 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>edges.color</td>  <td>String</td>  <td>"#2B7CE9"</td>  <td>The default color of a edge.</td></tr>
<tr>  <td>edges.dash</td>  <td>Object</td>  <td>Object</td>  <td>    Object containing default properties for dashed lines.    Available properties: <code>length</code>, <code>gap</code>,    <code>altLength</code>.  </td></tr>
<tr>  <td>edges.dash.altLength</td>  <td>number</td>  <td>none</td>  <td>Default length of the alternated dash in pixels on a dashed line.    Specifying <code>dash.altLength</code> allows for creating    a dashed line with a dash-dot style, for example when    <code>dash.length=10</code> and <code>dash.altLength=5</code>.    See also the option <code>dahs.length</code>.    Only applicable when the line style is <code>dash-line</code>.</td></tr>
<tr>  <td>edges.dash.length</td>  <td>number</td>  <td>10</td>  <td>Default 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.dash.gap</td>  <td>number</td>  <td>5</td>  <td>Default 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>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>nodes.color</td>  <td>String | Object</td>  <td>Object</td>  <td>Default color of the nodes. When color is a string, the color is applied    to both background as well as the border of the node.</td></tr><tr>  <td>nodes.color.background</td>  <td>String</td>  <td>"#97C2FC"</td>  <td>Default background color of the nodes</td></tr><tr>  <td>nodes.color.border</td>  <td>String</td>  <td>"#2B7CE9"</td>  <td>Default border color of the nodes</td></tr><tr>  <td>nodes.color.highlight</td>  <td>String | Object</td>  <td>Object</td>  <td>Default color of the node when the node is selected. Applied to    both border and background of the node.</td></tr><tr>  <td>nodes.color.highlight.background</td>  <td>String</td>  <td>"#D2E5FF"</td>  <td>Default background color of the node when selected.</td></tr><tr>  <td>nodes.color.highlight.border</td>  <td>String</td>  <td>"#2B7CE9"</td>  <td>Default border color of the node when 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>"ellipse"</td>  <td>The default shape for all nodes.    Choose from    <code>ellipse</code> (default), <code>circle</code>, <code>box</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>.    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.    Long press can be used to select multiple nodes.</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',      color: {        border: 'black',        background: 'white',        highlight: {          border: 'yellow',          background: 'orange'        }      }      fontColor: 'red',      fontSize: 18    }    // 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>color</td>    <td>String | Object</td>    <td>Object</td>    <td>Color of the node</td>  </tr>
  <tr>    <td>color.border</td>    <td>String</td>    <td>"#2B7CE9"</td>    <td>Border color of the node</td>  </tr>
  <tr>    <td>color.background</td>    <td>String</td>    <td>"#97C2FC"</td>    <td>Background color of the node</td>  </tr>  <tr>    <td>color.highlight</td>    <td>String</td>    <td>"#D2E5FF"</td>    <td>Color of the node when selected.</td>  </tr>  <tr>    <td>color.highlight.background</td>    <td>String</td>    <td>"#D2E5FF"</td>    <td>Background color of the node when selected.</td>  </tr>  <tr>    <td>color.highlight.border</td>    <td>String</td>    <td>"#D2E5FF"</td>    <td>Border color of the node when 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>"ellipse"</td>    <td>Choose from      <code>ellipse</code> (default), <code>circle</code>, <code>box</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>.      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>box</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 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>  </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>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>  </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() {  alert('selected nodes: ' + graph.getSelection());}
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 ids of the selected nodes 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 is processed and rendered in the browser.  No data is sent to any server.</p>
</div></body></html>