# Ogma {#ogma}

## `ogma.constructor([parameters])` {#ogma-constructor}



**Arguments**
  * <span class="name">parameters</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">container</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string|HTMLElement</code> HTML element to use as a container.
If a string is specified, the element will be lookup with `document.getElementById()`. 
      * <span class="name">dimensions</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Size](/api/types/size)</code><code class="default-value">[={ width: 300, height: 300 }]</code> Dimensions of the canvas. If unspecified, the container's dimensions will be used. 
      * <span class="name">graph</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[RawGraph](/api/types/rawgraph)</code> Graph to initialize Ogma with 
      * <span class="name">imgCrossOrigin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[CrossOriginValue](/api/types/crossoriginvalue)</code><code class="default-value">[=&quot;anonymous&quot;]</code> Indicates the value of the `crossOrigin` field for DOM images.
This is an alias for `ogma.setOptions({imgCrossOrigin: value})` 
      * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Options](/api/types/options)</code> Settings for all the modules. 
      * <span class="name">renderer</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"webgl"|"canvas"|"svg"|null</code><code class="default-value">[=&quot;webgl&quot;]</code> Rendering type. If WebGL is selected and not available, Ogma
fallback on Canvas. If no renderer is available (e.g in Node.js), Ogma will fallback on headless mode (`null`).
This field is an alias for `ogma.setOptions({renderer: value})` 




## `ogma.addEdge(edge[, options])` {#ogma-addedge}

Add the specified edge to the graph

**Arguments**
  * <span class="name">edge</span> <code class="type format ">[RawEdge](/api/types/rawedge)</code> Edge to add. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">AddItemOptions</code>  
      * <span class="name">ignoreInvalid</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the method quietly
skip the edges whose extremities are not in the visualisation. 





**Returns**
  * <span class="name"></span> <code class="type format ">[Edge](/api/edge)</code> Edge that has just been added. 


## `ogma.addEdges(edges[, options])` {#ogma-addedges}

Add the specified edges to the graph

**Arguments**
  * <span class="name">edges</span> <code class="type format ">Array\<[RawEdge](/api/types/rawedge)\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">batchSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> If specified, the graph will be
                                    imported progressively (`batchSize`
                                    nodes/edges at a time). It will
                                    effectively increase the total loading
                                    time, but the construction of the graph
                                    will be shown and the thread will not
                                    be frozen. 
      * <span class="name">ignoreInvalid</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the method quietly
skip the edges whose extremities are not in the visualisation. 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code> Edges added to the graph. 


## `ogma.addGraph(graph[, options])` {#ogma-addgraph}

Add the specified nodes and edges to the graph. If your visualisation is empty, it will also
automatically center the view on the graph.

**Arguments**
  * <span class="name">graph</span> <code class="type format ">[RawGraph](/api/types/rawgraph)</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">batchSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> If specified, the graph will be
imported progressively (`batchSize` nodes/edges at a time). It will
effectively increase the total loading time, but the construction of the
graph will be shown and the thread will not be frozen. 
      * <span class="name">ignoreInvalid</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the method quietly
skip the edges whose extremities are not in the visualisation. 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<{nodes: [NodeList](/api/nodelist), edges: [EdgeList](/api/edgelist)}\></code>  


## `ogma.addNode(node[, options])` {#ogma-addnode}

Add the specified node to the graph

**Arguments**
  * <span class="name">node</span> <code class="type format ">[RawNode](/api/types/rawnode)</code> Node to add. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">AddItemOptions</code> Unused for now. 



**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)</code> Node that has just been added. 


## `ogma.addNodes(nodes[, options])` {#ogma-addnodes}

Add the specified nodes to the graph. Ignores nodes that have the same id
as a node in the graph.

**Arguments**
  * <span class="name">nodes</span> <code class="type format ">Array\<[RawNode](/api/types/rawnode)\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">batchSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> If specified, the graph will be
                                    imported progressively (`batchSize`
                                    nodes/edges at a time). It will
                                    effectively increase the total loading
                                    time, but the construction of the graph
                                    will be shown and the thread will not
                                    be frozen. 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code> Nodes added to the graph. 


## `ogma.clearGraph()` {#ogma-cleargraph}

Removes all the nodes and edges from the graph.

**Returns**
  * <span class="name"></span> <code class="type format ">void</code>  


## `ogma.clearSelection()` {#ogma-clearselection}

Clear the selection.
## `ogma.createEdgeList()` {#ogma-createedgelist}

Returns a new empty EdgeList.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `ogma.createNodeList()` {#ogma-createnodelist}

Returns a new empty NodeList.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `ogma.destroy()` {#ogma-destroy}

Release the memory used and removes all connections between Ogma and the
DOM. After this method is called, Ogma's container will not contain any DOM
element  created by Ogma. Global DOM elements such as `window` and
`document`'s event listeners added by Ogma will be removed. All
`setTimeout` created by Ogma will be cleared.

**Returns**
  * <span class="name"></span> <code class="type format ">void</code>  


## `ogma.getConnectedComponentByNode(node[, options])` {#ogma-getconnectedcomponentbynode}



**Arguments**
  * <span class="name">node</span> <code class="type format ">[Node](/api/node)|[NodeId](/api/types/nodeid)</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code><code class="default-value">[=&#039;visible&#039;]</code>  
      * <span class="name">returnIds</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Return node ids instead of Nodes 





**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `ogma.getConnectedComponents([options])` {#ogma-getconnectedcomponents}

Returns weakly connected components of the graph.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code><code class="default-value">[=&#039;visible&#039;]</code>  
      * <span class="name">returnIds</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Return node ids instead of Nodes 





**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[NodeList](/api/nodelist)\></code>  


## `ogma.getContainer()` {#ogma-getcontainer}

Returns the DOM element used by this Ogma instance.

**Returns**
  * <span class="name"></span> <code class="type format ">HTMLElement|null</code>  


## `ogma.getEdge(edgeId)` {#ogma-getedge}

Return the specified edge, or `undefined` if it doesn't exist.

**Arguments**
  * <span class="name">edgeId</span> <code class="type format ">[EdgeId](/api/types/edgeid)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Edge](/api/edge)|undefined</code>  


## `ogma.getEdgeFilters()` {#ogma-getedgefilters}

Retrieve all edge filters.

Same as
```js
const edgeFilters = ogma.transformations.getEdgeFilters();
```

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[Transformation](/api/transformation)\></code>  


## `ogma.getEdges([selector])` {#ogma-getedges}

Return the specified edges.

**Arguments**
  * <span class="name">selector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[EdgeId](/api/types/edgeid)\>|[Filter](/api/types/filter)|Array\<[Edge](/api/edge)\></code><code class="default-value">[=&quot;visible&quot;]</code> If it's an
array of ids, returns the edges that match the specified ids.
If it's "visible", return all the visible edges. If it's "raw", returns all
edges except the ones that are the result of a transformation (e.g. grouping).
If it's "all", returns all the edges. 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `ogma.getEdgesByClassName(className[, filter])` {#ogma-getedgesbyclassname}

Returns the edges that have the specified class.
Same effect as [`StyleClass.update`](#StyleClass-getEdges).

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code> Filter to apply to edges 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `ogma.getHoveredElement()` {#ogma-gethoveredelement}

Returns the element that is currently hovered.

**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)|[Edge](/api/edge)|null</code>  


## `ogma.getNode(nodeId)` {#ogma-getnode}

Return the specified node, or `undefined` if it doesn't exist.

**Arguments**
  * <span class="name">nodeId</span> <code class="type format ">[NodeId](/api/types/nodeid)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)|undefined</code>  


## `ogma.getNodeFilters()` {#ogma-getnodefilters}

Retrieve all node filters.

Same as
```js
const nodeFilters = ogma.transformations.getNodeFilters();
```

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[Transformation](/api/transformation)\></code>  


## `ogma.getNodes([selector])` {#ogma-getnodes}

Return the specified nodes.

**Arguments**
  * <span class="name">selector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[NodeId](/api/types/nodeid)\>|[Filter](/api/types/filter)|Array\<[Node](/api/node)\></code><code class="default-value">[=&quot;visible&quot;]</code> If it's an
      array of ids, returns the nodes that match the specified ids.
If it's "visible", return all the visible nodes. If it's "raw", returns all
nodes except the ones that are the result of a transformation
(e.g. grouping). If it's "all", returns all the nodes. 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `ogma.getNodesByClassName(className[, filter])` {#ogma-getnodesbyclassname}

Returns the nodes that have the specified class.
Same effect as [`StyleClass.update`](#StyleClass-getNodes).

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code> Filter to apply to nodes 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `ogma.getNonSelectedEdges()` {#ogma-getnonselectededges}

Returns all edges that are not selected.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `ogma.getNonSelectedNodes()` {#ogma-getnonselectednodes}

Returns all nodes that are not selected.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `ogma.getOptions()` {#ogma-getoptions}

Get options of the Ogma instance.

**Returns**
  * <span class="name"></span> <code class="type format ">[Options](/api/types/options)</code>  


## `ogma.getPointerInformation()` {#ogma-getpointerinformation}

Returns information on the cursor.

**Returns**
  * <span class="name"></span> <code class="type format ">{x: number, y: number, target: [Node](/api/node)|[Edge](/api/edge)|null}</code>  


## `ogma.getSelectedEdges()` {#ogma-getselectededges}

Returns all edges that are selected.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `ogma.getSelectedNodes()` {#ogma-getselectednodes}

Returns all nodes that are selected.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `ogma.isDestroyed()` {#ogma-isdestroyed}



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `ogma.reloadFonts()` {#ogma-reloadfonts}

Indicates that the DOM has finished loading fonts. If you use an external font (like FontAwesome) and the font
is not displayed correctly on your nodes and edges (e.g squares instead of the actual characters), call this
method once you know the font has been loaded.
## `ogma.removeEdge(edge)` {#ogma-removeedge}

Remove the specified edge from the graph.

**Arguments**
  * <span class="name">edge</span> <code class="type format ">[Edge](/api/edge)|[EdgeId](/api/types/edgeid)</code>  


## `ogma.removeEdges(edges)` {#ogma-removeedges}

Remove the specified edges from the graph

**Arguments**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)|Array\<[Edge](/api/edge)|[EdgeId](/api/types/edgeid)\></code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `ogma.removeNode(node)` {#ogma-removenode}

Remove the specified node from the graph.

**Arguments**
  * <span class="name">node</span> <code class="type format ">[Node](/api/node)|[NodeId](/api/types/nodeid)</code>  


## `ogma.removeNodes(nodes)` {#ogma-removenodes}

Remove the specified nodes from the graph

**Arguments**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)|Array\<[Node](/api/node)|[NodeId](/api/types/nodeid)\></code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `ogma.reset()` {#ogma-reset}

Reset Ogma to its initial state. Doing `ogma.reset();` has the same effect as
`ogma.destroy(); ogma = new Ogma(params);`, with `params` being the parameters used the
first time Ogma was instantiated.

**Returns**
  * <span class="name"></span> <code class="type format ">void</code>  


## `ogma.setContainer(elt)` {#ogma-setcontainer}

Set the DOM element used by this Ogma instance. If a string is specified,
the element will be looked up with `document.getElementById()`.
If the argument is `null`, then Ogma is removed from the current container.

**Arguments**
  * <span class="name">elt</span> <code class="type format ">HTMLElement|string|null</code>  


## `ogma.setGraph(graph[, options])` {#ogma-setgraph}

Clear the graph, then add the specified nodes and edges to the graph.

**Arguments**
  * <span class="name">graph</span> <code class="type format ">[RawGraph](/api/types/rawgraph)</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">batchSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> If specified, the graph will be
imported progressively (`batchSize` nodes/edges at a time). It will
effectively increase the total loading time, but the construction of the
graph will be shown and the thread will not be frozen. 
      * <span class="name">ignoreInvalid</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the method quietly
skip the edges whose extremities are not in the visualisation. 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<{nodes: [NodeList](/api/nodelist), edges: [EdgeList](/api/edgelist)}\></code>  


## `ogma.setOptions(options)` {#ogma-setoptions}

Update the options of Ogma.

**Arguments**
  * <span class="name">options</span> <code class="type format ">[Options](/api/types/options)</code>  


  * [Ogma.algorithms]()
  * [Ogma.events]()
  * [Ogma.export]()
  * [Ogma.generate]()
  * [Ogma.geo]()
  * [Ogma.keyboard]()
  * [Ogma.layers]()
  * [Ogma.layouts]()
  * [Ogma.parse]()
  * [Ogma.rules]()
  * [Ogma.schema]()
  * [Ogma.styles]()
  * [Ogma.tools]()
  * [Ogma.transformations]()
  * [Ogma.view]()
  * [Ogma.geometry]()
# Edge {#edge}

Ogma edge entity class. Use this class to manipulate edges, change data, attributes, etc.
 * ## `edge.isNode` {#edge-isnode}

Read-only property that is always `false`.
## `edge.addClass(className[, options])` {#edge-addclass}

Add the specified class to the edge.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.addClasses(classNames[, options])` {#edge-addclasses}

Add the specified classes to the edge.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.getAdjacentElements()` {#edge-getadjacentelements}

Retrieves the list of edges parallel to the edge, excluding the source edge plus the extremities of the edge.

**Returns**
  * <span class="name"></span> <code class="type format ">[SubGraph](/api/types/subgraph)</code>  


## `edge.getAttribute(attributeName)` {#edge-getattribute}

Returns the value of the specified attribute for the edge.

**Arguments**
  * <span class="name">attributeName</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code> Attribute to retrieve. 



**Returns**
  * <span class="name"></span> <code class="type format ">any</code>  


## `edge.getAttributes([attributeNames])` {#edge-getattributes}

Returns an object containing the specified attributes for the edge.

**Arguments**
  * <span class="name">attributeNames</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes to include in the object. If not specified, includes all the edge attributes. 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeAttributes](/api/types/edgeattributes)</code>  


## `edge.getBoundingBox([options])` {#edge-getboundingbox}

Returns the bounding box of the edge, in graph coordinates.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">ignoreCurvature</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Use it if you want to only take into
                                         account the edge sources and targets. 
      * <span class="name">includeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Wether or not take texts in account in the bouding box 





**Returns**
  * <span class="name"></span> <code class="type format ">[BoundingBox](/api/types/boundingbox)</code>  


## `edge.getClassList()` {#edge-getclasslist}

Returns the list of classes that the edge has.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<string\></code>  


## `edge.getData([property])` {#edge-getdata}

Retrieve the specified data property of the edge. If no property is specified, retrieve the whole data object.
This method method returns the internal data object; modifying it could cause unexpected behavior.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">any</code>  


## `edge.getExtremities()` {#edge-getextremities}

Returns a `NodeList` containing the source and the target of the edge.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `edge.getId()` {#edge-getid}

Returns the id of the edge.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeId](/api/types/edgeid)</code>  


## `edge.getMetaEdge()` {#edge-getmetaedge}

If the edge is grouped inside a meta-edge, returns this meta-edge. Otherwise, returns null.

**Returns**
  * <span class="name"></span> <code class="type format ">[Edge](/api/edge)|null</code>  


## `edge.getParallelEdges([options])` {#edge-getparalleledges}

Retrieves the list of edges parallel to the edge, including the source edge itself.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code><code class="default-value">[=&quot;visible&quot;]</code> Indicates which edges to take into account 





**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edge.getSource()` {#edge-getsource}

Returns the source node of the edge

**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)</code>  


## `edge.getSubEdges()` {#edge-getsubedges}

If the edge is a meta-edge (result of a grouping), returns the list of edges that are part of the group
it represents. If it's not a meta-edge, returns `null`.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)|null</code>  


## `edge.getTarget()` {#edge-gettarget}

Returns the target node of the edge

**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)</code>  


## `edge.getTransformation()` {#edge-gettransformation}

Returns the transformation that created the edge, if it is virtual. Otherwise returns `null`.

**Returns**
  * <span class="name"></span> <code class="type format ">[Transformation](/api/transformation)|null</code>  


## `edge.hasClass(className)` {#edge-hasclass}

Indicates if the edge has the specified class.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edge.isInView([options])` {#edge-isinview}

Indicates if the edge is visible in the current view.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">margin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Tolerance in pixels. 





**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edge.isSelected()` {#edge-isselected}

Indicates if the edge is currently selected.

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edge.isVirtual()` {#edge-isvirtual}

Indicates if the edge was created by a transformation (`true`) or not (`false`).

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edge.isVisible()` {#edge-isvisible}

Indicates if the edge is visible. A edge is not visible if it has been filtered out, or if it is used in a
transformation.
/!\ A edge with an opacity of 0 is considered visible!

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edge.locate([options])` {#edge-locate}

Centers the view on the edge.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[LocateOptions](/api/types/locateoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `edge.pulse([options])` {#edge-pulse}

Highlights the edge. It's a shorthand for the case when you
want the elements pulse for `number * (interval - 1) + duration` milliseconds.
It will also update the pulse attributes of the items with the one provided
in the `.pulse()` call.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1000]</code> Duration of a pulse (milliseconds) 
      * <span class="name">endColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.0)&quot;]</code> Ending color of the pulse 
      * <span class="name">endRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> Where the pulse ends, relative to the edge siz (1 = at the edge's border) 
      * <span class="name">interval</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=800]</code> Interval between two pulses (milliseconds) 
      * <span class="name">number</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Number of pulses 
      * <span class="name">startColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.6)&quot;]</code> Starting color of the pulse 
      * <span class="name">startRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Where the pulse starts, relative to the edge siz (1 = at the edge's border) 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=10]</code> Width of the pulse in pixels 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.removeClass(className[, options])` {#edge-removeclass}

Remove the specified class from the edge.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.removeClasses(classNames[, options])` {#edge-removeclasses}

Remove the specified class from the edge.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.resetAttributes([attributeNames][, options])` {#edge-resetattributes}

Remove all attributes that have been applied through `setAttributes`.
Original attributes or attributes applied by the rules are not affected.

**Arguments**
  * <span class="name">attributeNames</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes to clear.
If no attribute is specified, clear all of them. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.setAttribute(attribute, value[, options])` {#edge-setattribute}

Set the specified attribute of the edge.

**Arguments**
  * <span class="name">attribute</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  
  * <span class="name">value</span> <code class="type format ">any</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.setAttributes(attributes[, options])` {#edge-setattributes}

Set the individual attributes of the edge.

**Arguments**
  * <span class="name">attributes</span> <code class="type format ">[EdgeAttributesValue](/api/types/edgeattributesvalue)</code> Attributes to update 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Edge](/api/edge)\></code>  


## `edge.setData([property], value)` {#edge-setdata}

Set the specified data property of the edge. If no property is specified, update the whole data object.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  
  * <span class="name">value</span> <code class="type format ">any|function(edge: [Edge](/api/edge)): any</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Edge](/api/edge)</code>  


## `edge.setSelected(active)` {#edge-setselected}

Add or remove the edge to/from the selection.

**Arguments**
  * <span class="name">active</span> <code class="type format ">boolean</code> Whether to select or unselect the edge. 


## `edge.setSource(source)` {#edge-setsource}

Set the source node of the edge.

**Arguments**
  * <span class="name">source</span> <code class="type format ">[Node](/api/node)|[NodeId](/api/types/nodeid)</code>  


## `edge.setTarget(target)` {#edge-settarget}

Set the target node of the edge.

**Arguments**
  * <span class="name">target</span> <code class="type format ">[Node](/api/node)|[NodeId](/api/types/nodeid)</code>  


## `edge.setVisible(value)` {#edge-setvisible}

Hide or show the edge.

**Arguments**
  * <span class="name">value</span> <code class="type format ">boolean</code> Whether to show or hide the edge. 


## `edge.toJSON([options])` {#edge-tojson}

Returns an object containing the id, source id, target id, attributes and data of the edge.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\>|"all"</code><code class="default-value">[=[]]</code> List of attributes to retrieve. By default, retrieve all attributes. 
      * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function (data: any): any</code> Function that takes the edge's data in input and return
the data to retrieve. By default return the whole object. 





**Returns**
  * <span class="name"></span> <code class="type format ">[RawEdge](/api/types/rawedge)</code>  


## `edge.toList()` {#edge-tolist}

Returns a new EdgeList that contains only the edge.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


# EdgeList {#edgelist}

Ogma edge list class. Use this class to manipulate a list of edges, change data, attributes, etc.
 * ## `edgeList.isNode` {#edgelist-isnode}

Read-only property that is always `false`.
 * ## `edgeList.size` {#edgelist-size}

Read-only property that indicates the number of edges in the list.
## `edgeList.addClass(className[, options])` {#edgelist-addclass}

Add the specified class to the edges.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.addClasses(classNames[, options])` {#edgelist-addclasses}

Add the specified classes to the edges.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.concat(edges)` {#edgelist-concat}



**Arguments**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.dedupe()` {#edgelist-dedupe}

Returns a new EdgeList which does not contain any duplicate edge.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.every(callback)` {#edgelist-every}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(edge: [Edge](/api/edge), index: number, list: [EdgeList](/api/edgelist)): boolean</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edgeList.fillData([property], value)` {#edgelist-filldata}

Set the specified data property of the edges with the same value.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)|any</code> Path of the data property to update. If no property is specified, update the whole data object. 
  * <span class="name">value</span> <code class="type format ">any</code> Value that will be assigned to all the edges. 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.filter(callback)` {#edgelist-filter}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(edge: [Edge](/api/edge), index: number, list: [EdgeList](/api/edgelist)): boolean</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.find(callback)` {#edgelist-find}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(edge: [Edge](/api/edge), index: number, list: [EdgeList](/api/edgelist)): boolean</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Edge](/api/edge)</code>  


## `edgeList.forEach(callback)` {#edgelist-foreach}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(edge: [Edge](/api/edge), index: number, list: [EdgeList](/api/edgelist))</code>  


## `edgeList.get(index)` {#edgelist-get}

Returns the edge at the specified index.

**Arguments**
  * <span class="name">index</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Edge](/api/edge)</code>  


## `edgeList.getAdjacentElements()` {#edgelist-getadjacentelements}

Retrieves the list of edges parallel to the edges, excluding the source edges themselves plus the extremities of the edges.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.getAttribute(attributeName)` {#edgelist-getattribute}

Returns an array containing the value of the specified attribute for each edge.

**Arguments**
  * <span class="name">attributeName</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code> Attribute to retrieve. 



**Returns**
  * <span class="name"></span> <code class="type format ">any[]</code>  


## `edgeList.getAttributes([attributes])` {#edgelist-getattributes}

Returns an array of objects containing the specified attributes for each edge.

**Arguments**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)[]</code> List of attributes to include in the object. If not specified, includes all the edge attributes. 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeAttributes](/api/types/edgeattributes)[]</code>  


## `edgeList.getBoundingBox([options])` {#edgelist-getboundingbox}

Returns the bounding box of the edges, in graph coordinates.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">ignoreCurvature</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Use it if you want to only take into
                                         account the edge sources and targets. 
      * <span class="name">includeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Wether or not take texts in account in the bouding box 





**Returns**
  * <span class="name"></span> <code class="type format ">[BoundingBox](/api/types/boundingbox)</code>  


## `edgeList.getClassList()` {#edgelist-getclasslist}

Returns the list of classes that each edge has.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<Array\<string\>\></code>  


## `edgeList.getData([property])` {#edgelist-getdata}

Retrieve the specified data property. If no property is specified, retrieve the whole data object.
This method method returns the internal data object; modifying it could cause unexpected behavior.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Array\<any\></code>  


## `edgeList.getExtremities()` {#edgelist-getextremities}

Returns a `NodeList` containing the sources and targets of the edges. Duplicate nodes are not removed.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `edgeList.getId()` {#edgelist-getid}

Returns the id of each edge.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[EdgeId](/api/types/edgeid)\></code>  


## `edgeList.getMetaEdge()` {#edgelist-getmetaedge}

Run `getMetaEdge` on each edge in the list and returns the array of results.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[Edge](/api/edge)|null\></code>  


## `edgeList.getParallelEdges([options])` {#edgelist-getparalleledges}

Retrieves the list of edges parallel to the edges, including the source edges themselves.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code><code class="default-value">[=&quot;visible&quot;]</code> Indicates which edges to take into account 





**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.getSource()` {#edgelist-getsource}

Returns the list of source nodes of the edges

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `edgeList.getSubEdges()` {#edgelist-getsubedges}

Run `getSubEdges` on all the edges in the list and returns the array of results

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[EdgeList](/api/edgelist)|null\></code>  


## `edgeList.getTarget()` {#edgelist-gettarget}

Returns the list of target nodes of the edges

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `edgeList.includes(edge)` {#edgelist-includes}

Indicates if the `EdgeList` contains the specified edge.

**Arguments**
  * <span class="name">edge</span> <code class="type format ">[Edge](/api/edge)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edgeList.inverse()` {#edgelist-inverse}

Returns a new EdgeList containing all the visible edges that are not in the list.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.isSelected()` {#edgelist-isselected}

Indicates if the edges are currently selected.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<boolean\></code>  


## `edgeList.isVisible()` {#edgelist-isvisible}

Call [`isVisible`](#Edge-isVisible) on each edge in the list, and returns the array of results.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<boolean\></code>  


## `edgeList.locate([options])` {#edgelist-locate}

Centers the view on the edges.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[LocateOptions](/api/types/locateoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `edgeList.map(callback)` {#edgelist-map}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(edge: [Edge](/api/edge), index: number, list: [EdgeList](/api/edgelist)): any</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Array\<any\></code>  


## `edgeList.pulse([options])` {#edgelist-pulse}

Highlights the edges. It's a shorthand for the case when you
want the elements pulse for `number * (interval - 1) + duration` milliseconds.
It will also update the pulse attributes of the items with the one provided
in the `.pulse()` call

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1000]</code> Duration of a pulse (milliseconds) 
      * <span class="name">endColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.0)&quot;]</code> Ending color of the pulse 
      * <span class="name">endRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> Where the pulse ends, relative to the edge siz (1 = at the edge's border) 
      * <span class="name">interval</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=800]</code> Interval between two pulses (milliseconds) 
      * <span class="name">number</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Number of pulses 
      * <span class="name">startColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.6)&quot;]</code> Starting color of the pulse 
      * <span class="name">startRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Where the pulse starts, relative to the edge siz (1 = at the edge's border) 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=10]</code> Width of the pulse in pixels 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.reduce(callback, initialValue)` {#edgelist-reduce}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(accumulator: any, currentValue: [Edge](/api/edge), index: number): any</code>  
  * <span class="name">initialValue</span> <code class="type format ">any</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">any</code>  


## `edgeList.removeClass(className[, options])` {#edgelist-removeclass}

Remove the specified class from the edges.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.removeClasses(classNames[, options])` {#edgelist-removeclasses}

Remove the specified class from the edges.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.resetAttributes([attributes][, options])` {#edgelist-resetattributes}

Remove all attributes that have been applied through `setAttributes` of all the edges in the list.
Original attributes or attributes applied by the rules are not affected.

**Arguments**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes to clear. If no attribute is specified, clear all of them. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.setAttribute(attribute, value[, options])` {#edgelist-setattribute}

Set the specified attribute of all the edges in the list.

**Arguments**
  * <span class="name">attribute</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  
  * <span class="name">value</span> <code class="type format ">any|Array\<any\></code> If it is an array, the values will be spread across the edges of the list.
Otherwise the value will be assigned to all edges. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.setAttributes(attributes[, options])` {#edgelist-setattributes}

Set the individual attributes of all the edges in the list.

**Arguments**
  * <span class="name">attributes</span> <code class="type format ">[EdgeAttributesValue](/api/types/edgeattributesvalue)|Array\<[EdgeAttributesValue](/api/types/edgeattributesvalue)\></code> If a single attribute is specified, it is applied to all edges.
If an array is specified, each index of the array is assigned to the corresponding edge. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[EdgeList](/api/edgelist)\></code>  


## `edgeList.setData([property], values)` {#edgelist-setdata}

Set the specified data property of the edges. If no property is specified, update the whole data object.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code> Path of the data property to update. 
  * <span class="name">values</span> <code class="type format ">Array\<any\>|function(edge: [Edge](/api/edge)): any</code> If it's an array, each value is assigned to the corresponding edge,
meaning the array must have the same length as the EdgeList. If it's a function, it will be applied to each edge to 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code> Determine which value to assign. 


## `edgeList.setSelected(active)` {#edgelist-setselected}



**Arguments**
  * <span class="name">active</span> <code class="type format ">boolean|Array\<boolean\></code> Whether to select or unselect the edges. 


## `edgeList.setVisible()` {#edgelist-setvisible}

Call [`setVisible`](#Edge-setVisible) on each edge in the list.
## `edgeList.slice([start][, end])` {#edgelist-slice}

Returns a new EdgeList which contains only the edges from index `start` to `end` (excluding `end`).

**Arguments**
  * <span class="name">start</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code>  
  * <span class="name">end</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.some(callback)` {#edgelist-some}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(edge: [Edge](/api/edge), index: number, list: [EdgeList](/api/edgelist)): boolean</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `edgeList.subtract([list])` {#edgelist-subtract}



**Arguments**
  * <span class="name">list</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeList](/api/edgelist)</code> Returns a new EdgeList which does not contain any element from list 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `edgeList.toArray()` {#edgelist-toarray}

Returns an array of edges from the EdgeList.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[Edge](/api/edge)\></code>  


## `edgeList.toJSON([options])` {#edgelist-tojson}

Runs `toJSON` on all the edges in the list and returns the list of objects.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\>|"all"</code><code class="default-value">[=[]]</code>  
      * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function (data: any): any</code>  





**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[RawEdge](/api/types/rawedge)\></code>  


## `edgeList.toList()` {#edgelist-tolist}

Returns itself.

**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


# Node {#node}

Ogma node entity class. Use this class to manipulate nodes, change data, attributes, etc.
 * ## `node.isNode` {#node-isnode}

Read-only property that is always `true`.
## `node.addClass(className[, options])` {#node-addclass}

Add the specified class to the node.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.addClasses(classNames[, options])` {#node-addclasses}

Add the specified classes to the node.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.get(index)` {#node-get}

Convenience method to make Nodes and NodeLists more uniform

**Arguments**
  * <span class="name">index</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)|undefined</code>  


## `node.getAdjacentEdges([options])` {#node-getadjacentedges}

Returns the list of adjacent edges of the node.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AdjacencyOptions](/api/types/adjacencyoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `node.getAdjacentElements([options])` {#node-getadjacentelements}

Returns the list of adjacent nodes of the node and the edges connected to it.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AdjacencyOptions](/api/types/adjacencyoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[SubGraph](/api/types/subgraph)</code>  


## `node.getAdjacentNodes([options])` {#node-getadjacentnodes}

Returns the list of adjacent nodes of the node.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AdjacencyOptions](/api/types/adjacencyoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `node.getAttribute(attributeName)` {#node-getattribute}

Returns the value of the specified attribute for the node.

**Arguments**
  * <span class="name">attributeName</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code> Attribute to retrieve. 



**Returns**
  * <span class="name"></span> <code class="type format ">any</code>  


## `node.getAttributes([attributeNames])` {#node-getattributes}

Returns an object containing the specified attributes for the node.

**Arguments**
  * <span class="name">attributeNames</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes to include in the object. If not specified,  includes all the node attributes. 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeAttributes](/api/types/nodeattributes)</code>  


## `node.getBoundingBox([options])` {#node-getboundingbox}

Returns the bounding box of the node, in graph coordinates.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">includeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Wether or not take texts in account in the bouding box 





**Returns**
  * <span class="name"></span> <code class="type format ">[BoundingBox](/api/types/boundingbox)</code>  


## `node.getClassList()` {#node-getclasslist}

Returns the list of classes that the node has.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<string\></code>  


## `node.getConnectedComponent([options])` {#node-getconnectedcomponent}



**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code><code class="default-value">[=&#039;visible&#039;]</code>  
      * <span class="name">returnIds</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Return node ids instead of Nodes 





**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `node.getData([property])` {#node-getdata}

Retrieve the specified data property of the node. If no property is
specified, retrieve the whole data object. This method method returns the
internal data object; modifying it could cause unexpected behavior.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">any</code>  


## `node.getDegree([options])` {#node-getdegree}

Retrieve the number of neighbors of the node.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[EdgeDirection](/api/types/edgedirection)</code>  
      * <span class="name">direction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeDirection](/api/types/edgedirection)</code><code class="default-value">[=&quot;both&quot;]</code> Direction of the edges to follow. 
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code><code class="default-value">[=&quot;visible&quot;]</code> Indicates which edges to take into account 





**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `node.getGeoCoordinates()` {#node-getgeocoordinates}

Returns node's geographical coordinate

**Returns**
  * <span class="name"></span> <code class="type format ">[GeoCoordinate](/api/types/geocoordinate)</code>  


## `node.getId()` {#node-getid}

Returns the id of the node.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeId](/api/types/nodeid)</code>  


## `node.getMetaNode()` {#node-getmetanode}

If the node is grouped inside a meta-node, returns this meta-node.
Otherwise, returns null.

**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)|null</code>  


## `node.getPosition()` {#node-getposition}

Retrieve the position of the node. This is strictly equivalent to `node.getAttributes(['x', 'y'])`.

**Returns**
  * <span class="name"></span> <code class="type format ">{x: number, y: number}</code>  


## `node.getSubNodes()` {#node-getsubnodes}

If the node is a meta-node (result of a grouping), returns the list of
nodes that are part of the group
it represents. If it's not a meta-node, returns `null`.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)|null</code>  


## `node.getTransformation()` {#node-gettransformation}

Returns the transformation that created the node, if it is virtual.
Otherwise returns `null`.

**Returns**
  * <span class="name"></span> <code class="type format ">[Transformation](/api/transformation)|null</code>  


## `node.hasClass(className)` {#node-hasclass}

Indicates if the node has the specified class.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `node.isInView([options])` {#node-isinview}

Indicates if the node is visible in the current view.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">margin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Tolerance in pixels. 





**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `node.isSelected()` {#node-isselected}

Indicates if the node is currently selected.

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `node.isVirtual()` {#node-isvirtual}

Indicates if the node was created by a transformation (`true`) or not
(`false`).

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `node.isVisible()` {#node-isvisible}

Indicates if the node is visible. A node is not visible if it has been filtered out, or if it is used in a
transformation.
/!\ A node with an opacity of 0 is considered visible!

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `node.locate([options])` {#node-locate}

Centers the view on the node.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[LocateOptions](/api/types/locateoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `node.pulse([options])` {#node-pulse}

Highlights the node. It's a shorthand for the case when you
want the elements pulse for `number * (interval - 1) + duration` milliseconds.
It will also update the pulse attributes of the items with the one provided
in the `.pulse()` call.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1000]</code> Duration of a pulse (milliseconds) 
      * <span class="name">endColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.0)&quot;]</code> Ending color of the pulse 
      * <span class="name">endRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> Where the pulse ends, relative to the node siz (1 = at the node's border) 
      * <span class="name">interval</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=800]</code> Interval between two pulses (milliseconds) 
      * <span class="name">number</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Number of pulses 
      * <span class="name">startColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.6)&quot;]</code> Starting color of the pulse 
      * <span class="name">startRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Where the pulse starts, relative to the node siz (1 = at the node's border) 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=50]</code> Width of the pulse in pixels 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.removeClass(className[, options])` {#node-removeclass}

Remove the specified class from the node.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.removeClasses(classNames[, options])` {#node-removeclasses}

Remove the specified class from the node.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.resetAttributes([attributeNames][, options])` {#node-resetattributes}

Remove all attributes that have been applied through `setAttributes`. Original attributes or attributes applied by  the rules are not affected.

**Arguments**
  * <span class="name">attributeNames</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes to clear. If no attribute is specified, clear all  of them. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.setAttribute(attribute, value[, options])` {#node-setattribute}

Set the specified attribute of the node.

**Arguments**
  * <span class="name">attribute</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  
  * <span class="name">value</span> <code class="type format ">any</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.setAttributes(attributes[, options])` {#node-setattributes}

Set the individual attributes of the node.

**Arguments**
  * <span class="name">attributes</span> <code class="type format ">[NodeAttributesValue](/api/types/nodeattributesvalue)</code> Attributes to update 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.setData([property], value)` {#node-setdata}

Set the specified data property of the node. If no property is specified,
update the whole data object.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  
  * <span class="name">value</span> <code class="type format ">any|function(node: [Node](/api/node)): any</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)</code>  


## `node.setGeoCoordinates(coords)` {#node-setgeocoordinates}

Set geographical position of the node. Passing null will erase the
coordinates and remove the node from the visualisation in geo mode.

**Arguments**
  * <span class="name">coords</span> <code class="type format ">[GeoCoordinate](/api/types/geocoordinate)|null</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[Node](/api/node)\></code>  


## `node.setSelected(active)` {#node-setselected}

Add or remove the node to/from the selection.

**Arguments**
  * <span class="name">active</span> <code class="type format ">boolean</code> Whether to select or unselect the node. 


## `node.setVisible(value)` {#node-setvisible}

Hide or show the node.

**Arguments**
  * <span class="name">value</span> <code class="type format ">boolean</code> Whether to show or hide the node. 


## `node.toJSON([options])` {#node-tojson}

Returns an object containing the id, attributes and data of the node.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\>|"all"</code><code class="default-value">[=[]]</code> List of
attributes to retrieve. By default, retrieve all attributes. 
      * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function (data: any): any</code> Function that takes the
node's data in input and return the data to retrieve. By default return
the whole object. 





**Returns**
  * <span class="name"></span> <code class="type format ">[RawNode](/api/types/rawnode)</code>  


## `node.toList()` {#node-tolist}

Returns a new NodeList that contains only the node.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


# NodeList {#nodelist}

Ogma node list class. Use this class to manipulate a list of nodes, change data, attributes, etc.
 * ## `nodeList.isNode` {#nodelist-isnode}

Read-only property that is always `true`.
 * ## `nodeList.size` {#nodelist-size}

Read-only property that indicates the number of nodes in the list.
## `nodeList.addClass(className[, options])` {#nodelist-addclass}

Add the specified class to the nodes.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.addClasses(classNames[, options])` {#nodelist-addclasses}

Add the specified classes to the nodes.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.concat(nodes)` {#nodelist-concat}



**Arguments**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.dedupe()` {#nodelist-dedupe}

Returns a new NodeList which does not contain any duplicate node.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.fillData([property], value)` {#nodelist-filldata}

Set the specified data property of the nodes with the same value.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)|any</code> Path of the data property to update. If no property is specified, update the whole data object. 
  * <span class="name">value</span> <code class="type format ">any</code> Value that will be assigned to all the nodes. 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.filter(callback)` {#nodelist-filter}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(node: [Node](/api/node), index: number): boolean</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.find(callback)` {#nodelist-find}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(node: [Node](/api/node), index: number, list: [NodeList](/api/nodelist)): boolean</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)|undefined</code>  


## `nodeList.forEach(callback)` {#nodelist-foreach}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(node: [Node](/api/node), index: number)</code>  


## `nodeList.get(index)` {#nodelist-get}

Returns the node at the specified index.

**Arguments**
  * <span class="name">index</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Node](/api/node)</code>  


## `nodeList.getAdjacentEdges([options])` {#nodelist-getadjacentedges}

Returns the list of adjacent edges of the nodes.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AdjacencyOptions](/api/types/adjacencyoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `nodeList.getAdjacentElements([options])` {#nodelist-getadjacentelements}

Returns the list of adjacent nodes of the nodeList and the edges connected to it.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AdjacencyOptions](/api/types/adjacencyoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[SubGraph](/api/types/subgraph)</code>  


## `nodeList.getAdjacentNodes([options])` {#nodelist-getadjacentnodes}

Returns the list of adjacent nodes of the nodes.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AdjacencyOptions](/api/types/adjacencyoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.getAttribute(attributeName)` {#nodelist-getattribute}

Returns an array containing the value of the specified attribute for each node.

**Arguments**
  * <span class="name">attributeName</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code> Attribute to retrieve. 



**Returns**
  * <span class="name"></span> <code class="type format ">Array\<any\></code>  


## `nodeList.getAttributes([attributes])` {#nodelist-getattributes}

Returns an array of objects containing the specified attributes for each node.

**Arguments**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes to include in the object. If not specified, includes all the node attributes. 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeAttributes](/api/types/nodeattributes)[]</code>  


## `nodeList.getBoundingBox([options])` {#nodelist-getboundingbox}

Returns the bounding box of the nodes, in graph coordinates.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">includeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Wether or not take texts in account in the bouding box 





**Returns**
  * <span class="name"></span> <code class="type format ">[BoundingBox](/api/types/boundingbox)</code>  


## `nodeList.getClassList()` {#nodelist-getclasslist}

Returns the list of classes that each node has.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<Array\<string\>\></code>  


## `nodeList.getConnectedComponents([options])` {#nodelist-getconnectedcomponents}

Returns weakly connected components of the list of nodes.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code><code class="default-value">[=&#039;visible&#039;]</code>  
      * <span class="name">returnIds</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Return node ids instead of Nodes 





**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[NodeList](/api/nodelist)\></code>  


## `nodeList.getData([property])` {#nodelist-getdata}

Retrieve the specified data property. If no property is specified, retrieve the whole data object.
This method method returns the internal data object; modifying it could cause unexpected behavior.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Array\<any\></code>  


## `nodeList.getDegree()` {#nodelist-getdegree}

Runs `getDegree` on each node in the list and returns the array of results.
## `nodeList.getGeoCoordinates()` {#nodelist-getgeocoordinates}

Returns geographical coordinates of all the nodes in the collection

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[GeoCoordinate](/api/types/geocoordinate)\></code>  


## `nodeList.getId()` {#nodelist-getid}

Returns the id of each node.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[NodeId](/api/types/nodeid)\></code>  


## `nodeList.getMetaNode()` {#nodelist-getmetanode}

Run `getMetaNode` on each node in the list and returns the array of results.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[Node](/api/node)|null\></code>  


## `nodeList.getPosition()` {#nodelist-getposition}

Retrieve the position of each node in the list. This is strictly equivalent to `nodeList.getAttributes(['x', 'y'])`.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<{x: number, y: number}\></code>  


## `nodeList.getSubNodes()` {#nodelist-getsubnodes}

Run `getSubNodes` on all the nodes in the list and returns the array of results

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[NodeList](/api/nodelist)|null\></code>  


## `nodeList.includes(node)` {#nodelist-includes}

Indicates if the `NodeList` contains the specified node.

**Arguments**
  * <span class="name">node</span> <code class="type format ">[Node](/api/node)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `nodeList.inverse()` {#nodelist-inverse}

Returns a new NodeList containing all the visible nodes that are not in the list.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.isSelected()` {#nodelist-isselected}

Indicates for each node if it is selected.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<boolean\></code>  


## `nodeList.isVisible()` {#nodelist-isvisible}

Call [`isVisible`](#Node-isVisible) on each node in the list, and returns the array of results.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<boolean\></code>  


## `nodeList.locate([options])` {#nodelist-locate}

Centers the view on the nodes.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[LocateOptions](/api/types/locateoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `nodeList.map(callback)` {#nodelist-map}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(node: [Node](/api/node), index: number, list: [NodeList](/api/nodelist)): any</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Array\<any\></code>  


## `nodeList.pulse([options])` {#nodelist-pulse}

Highlights the nodes with a pulse. It's a shorthand for the case when you
want the elements pulse for `number * (interval - 1) + duration` milliseconds.
It will also update the pulse attributes of the items with the one provided
in the `.pulse()` call.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1000]</code> Duration of a pulse (milliseconds) 
      * <span class="name">endColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.0)&quot;]</code> Ending color of the pulse 
      * <span class="name">endRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> Where the pulse ends, relative to the node siz (1 = at the node's border) 
      * <span class="name">interval</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=800]</code> Interval between two pulses (milliseconds) 
      * <span class="name">number</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Number of pulses 
      * <span class="name">startColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;rgb(0,0,0,0.6)&quot;]</code> Starting color of the pulse 
      * <span class="name">startRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Where the pulse starts, relative to the node siz (1 = at the node's border) 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=50]</code> Width of the pulse in pixels 





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.reduce(callback, initialValue)` {#nodelist-reduce}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(accumulator: any, currentValue: [Node](/api/node), index: number): any</code>  
  * <span class="name">initialValue</span> <code class="type format ">any</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">any</code>  


## `nodeList.removeClass(className[, options])` {#nodelist-removeclass}

Remove the specified class from the nodes.

**Arguments**
  * <span class="name">className</span> <code class="type format ">string</code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.removeClasses(classNames[, options])` {#nodelist-removeclasses}

Remove the specified class from the nodes.

**Arguments**
  * <span class="name">classNames</span> <code class="type format ">Array\<string\></code>  
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.resetAttributes([attributes][, options])` {#nodelist-resetattributes}

Remove all attributes that have been applied through `setAttributes` of all the nodes in the list.
Original attributes or attributes applied by the rules are not affected.

**Arguments**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes to clear. If no attribute is specified, clear all of them. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.setAttribute(attribute, values[, options])` {#nodelist-setattribute}

Set the specified attribute of all the nodes in the list.

**Arguments**
  * <span class="name">attribute</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code>  
  * <span class="name">values</span> <code class="type format ">any|Array\<any\></code> If it is an array, the values will be spread across the nodes of the list.
Otherwise the value will be assigned to all nodes. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.setAttributes(attributes[, options])` {#nodelist-setattributes}

Set the individual attributes of all the nodes in the list.

**Arguments**
  * <span class="name">attributes</span> <code class="type format ">[NodeAttributesValue](/api/types/nodeattributesvalue)|Array\<[NodeAttributesValue](/api/types/nodeattributesvalue)\></code> If a single attribute is specified, it is applied to all nodes.
If an array is specified, each index of the array is assigned to the corresponding node. 
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[AttributeAnimationOptions](/api/types/attributeanimationoptions)</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.setData([property], values)` {#nodelist-setdata}

Set the specified data property of the nodes. If no property is specified, update the whole data object.

**Arguments**
  * <span class="name">property</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code> Path of the data property to update. 
  * <span class="name">values</span> <code class="type format ">Array\<any\>|function(node: [Node](/api/node)): any</code> If it's an array, each value is assigned to the corresponding node,
meaning the array must have the same length as the NodeList. If it's a function, it will be applied to each node to
determine which value to assign. 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.setGeoCoordinates(coordinates[, duration])` {#nodelist-setgeocoordinates}

Assign geographical coordinates to the nodes in collection

**Arguments**
  * <span class="name">coordinates</span> <code class="type format ">Array\<[GeoCoordinate](/api/types/geocoordinate)|null\>|null</code>  
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> Animation duration 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[NodeList](/api/nodelist)\></code>  


## `nodeList.setSelected(active)` {#nodelist-setselected}

Add or remove the nodes from the selection.

**Arguments**
  * <span class="name">active</span> <code class="type format ">boolean|Array\<boolean\></code> Whether to select or unselect the nodes. 


## `nodeList.setVisible()` {#nodelist-setvisible}

Call [`setVisible`](#Node-setVisible) on each node in the list.
## `nodeList.slice([start][, end])` {#nodelist-slice}

Returns a new NodeList which contains only the nodes from index `start` to `end` (excluding `end`).

**Arguments**
  * <span class="name">start</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code>  
  * <span class="name">end</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.some(callback)` {#nodelist-some}



**Arguments**
  * <span class="name">callback</span> <code class="type format ">function(node: [Node](/api/node), index: number, list: [NodeList](/api/nodelist)): boolean</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `nodeList.sort(fn)` {#nodelist-sort}



**Arguments**
  * <span class="name">fn</span> <code class="type format ">(a: [Node](/api/node), b: [Node](/api/node)): number</code> Sort function 


## `nodeList.subtract([list])` {#nodelist-subtract}



**Arguments**
  * <span class="name">list</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeList](/api/nodelist)</code> Returns a new NodeList which does not contain any element from list 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `nodeList.toArray()` {#nodelist-toarray}

Returns an array of nodes from the NodeList.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[Node](/api/node)\></code>  


## `nodeList.toJSON([options])` {#nodelist-tojson}

Runs `toJSON` on all the nodes in the list and returns the list of objects.

**Arguments**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">Array\<[PropertyPath](/api/types/propertypath)\>|"all"</code><code class="default-value">[=[]]</code>  
      * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function (data: any): any</code>  





**Returns**
  * <span class="name"></span> <code class="type format ">Array\<[RawNode](/api/types/rawnode)\></code>  


## `nodeList.toList()` {#nodelist-tolist}

Returns itself.

**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


# geometry {#geometry}

Ogma static toolbox for geometry purposes

## `geometry.computeCentroid(points)` {#geometry-computecentroid}

Returns the average of the specified points.

**Arguments**
  * <span class="name">points</span> <code class="type format ">[Point](/api/types/point)[]</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[Point](/api/types/point)</code>  


## `geometry.distance(x1, y1, x2, y2)` {#geometry-distance}

Compute the distance between two points (x1, y1) and (x2, y2).

**Arguments**
  * <span class="name">x1</span> <code class="type format ">number</code>  
  * <span class="name">y1</span> <code class="type format ">number</code>  
  * <span class="name">x2</span> <code class="type format ">number</code>  
  * <span class="name">y2</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">number</code> Distance between the two points. 


## `geometry.getNormalOnEdge(edge, t)` {#geometry-getnormalonedge}

Returns the normal vector of the edge at t.
Returns the normal at the source of the edge for t = 0 and at the target for t = 1

**Arguments**
  * <span class="name">edge</span> <code class="type format ">[Edge](/api/edge)</code> An edge 
  * <span class="name">t</span> <code class="type format ">number</code> The interpolation value bounded in [0;1]. 



**Returns**
  * <span class="name"></span> <code class="type format ">object</code> {x,y} The normal to the edge at t 


## `geometry.getPointOnEdge(edge, t)` {#geometry-getpointonedge}

Returns the point of the edge at t.
Returns the source of the edge for t = 0 and at the target for t = 1

**Arguments**
  * <span class="name">edge</span> <code class="type format ">[Edge](/api/edge)</code> An edge 
  * <span class="name">t</span> <code class="type format ">number</code> The interpolation value bounded in [0;1]. 



**Returns**
  * <span class="name"></span> <code class="type format ">object</code> {x,y} The position on the edge at t 


## `geometry.getQuadraticCurveControlPoint(x1, y1, x2, y2, curvature, dest?)` {#geometry-getquadraticcurvecontrolpoint}

Returns the control point used to draw a curved edge.

**Arguments**
  * <span class="name">x1</span> <code class="type format ">number</code> X position of the source 
  * <span class="name">y1</span> <code class="type format ">number</code> Y position of the source 
  * <span class="name">x2</span> <code class="type format ">number</code> X position of the target 
  * <span class="name">y2</span> <code class="type format ">number</code> Y position of the target 
  * <span class="name">curvature</span> <code class="type format ">number</code> The curvature factor of the edge 
  * <span class="name">dest?</span> <code class="type format ">[Point](/api/types/point)</code> A Point to write in the result 



**Returns**
  * <span class="name"></span> <code class="type format ">[Point](/api/types/point)</code> The control point used to draw a curved edge. 


## `geometry.getTangentOnEdge(edge, t)` {#geometry-gettangentonedge}

Returns the tangent vector of the edge at t.
Returns the tangent at the source of the edge for t = 0 and at the target for t = 1

**Arguments**
  * <span class="name">edge</span> <code class="type format ">[Edge](/api/edge)</code> An edge 
  * <span class="name">t</span> <code class="type format ">number</code> The interpolation value bounded in [0;1]. 



**Returns**
  * <span class="name"></span> <code class="type format ">object</code> {x,y} The tangent to the edge at t 


  * [geometry.lines]()
# parse {#parse}

Ogma static toolbox for data imports, use as `Ogma.parse.*`.

## `parse.gexf(content)` {#parse-gexf}

Parse a GEXF string and return the raw graph.

**Arguments**
  * <span class="name">content</span> <code class="type format ">string</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.gexfFromUrl(url)` {#parse-gexffromurl}

Fetch and parse a GEXF file and return the raw graph.

**Arguments**
  * <span class="name">url</span> <code class="type format ">string</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.graphml(content[, xmlparser])` {#parse-graphml}

Parse a GraphML string and return the raw graph.

**Arguments**
  * <span class="name">content</span> <code class="type format ">string</code> GraphML string
to transform custom JSON format into Ogma's `RawGraph` 
  * <span class="name">xmlparser</span><span class="tag--is-optional">(optional)</span> <code class="type format ">DOMParser</code> DOMParser instance to use for parsing the XML 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.graphmlFromUrl(url[, xmlparser])` {#parse-graphmlfromurl}

Fetch and parse a GraphML file and return the raw graph.

**Arguments**
  * <span class="name">url</span> <code class="type format ">string</code>  
  * <span class="name">xmlparser</span><span class="tag--is-optional">(optional)</span> <code class="type format ">DOMParser</code> DOMParser instance to use for parsing the XML 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.janus(content)` {#parse-janus}

Parse the result of a JanusGraph query into an Ogma graph.

**Arguments**
  * <span class="name">content</span> <code class="type format ">object</code> Response of the gremlin-client library ("gremlin-client") 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.json(content[, transform])` {#parse-json}

Parse a JSON string and return the raw graph.

**Arguments**
  * <span class="name">content</span> <code class="type format ">string</code>  
  * <span class="name">transform</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(json: object | unknown[]): [RawGraph](/api/types/rawgraph)</code> Function
to transform custom JSON format into Ogma's `RawGraph` 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.jsonFromUrl(url[, transform])` {#parse-jsonfromurl}

Fetch and parse a JSON file and return the raw graph.

**Arguments**
  * <span class="name">url</span> <code class="type format ">string</code>  
  * <span class="name">transform</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(json: object | unknown[]): [RawGraph](/api/types/rawgraph)</code> Function
to transform custom JSON format into Ogma's `RawGraph` 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.mtx(content)` {#parse-mtx}

Parse a Matrix Market file (.mtx)

**Arguments**
  * <span class="name">content</span> <code class="type format ">string</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.mtxFromUrl(url)` {#parse-mtxfromurl}

Loads and parses a Matrix Market file (.mtx)

**Arguments**
  * <span class="name">url</span> <code class="type format ">string</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


## `parse.neo4j(content)` {#parse-neo4j}



**Arguments**
  * <span class="name">content</span> <code class="type format ">object</code> Response of the Neo4j Bolt driver ("neo4j-javascript-driver") 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[RawGraph](/api/types/rawgraph)\></code>  


# StyleClass {#styleclass}

Represents a visual class that can be applied to nodes and edges.

## `styleClass.add(elements)` {#styleclass-add}

Add the class to the specified node(s)/edge(s). Equivalent to to `elements.addClass(myClass.getName())`.

**Arguments**
  * <span class="name">elements</span> <code class="type format ">[Node](/api/node)|[Edge](/api/edge)|[NodeList](/api/nodelist)|[EdgeList](/api/edgelist)</code>  


## `styleClass.clearEdges([filter])` {#styleclass-clearedges}

Remove the class from all edges.

**Arguments**
  * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code> Filter to apply to edges 


## `styleClass.clearNodes([filter])` {#styleclass-clearnodes}

Remove the class from all nodes.

**Arguments**
  * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code> Filter to apply to nodes 


## `styleClass.destroy()` {#styleclass-destroy}

Remove the class from all nodes and edges and delete it.

**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `styleClass.getDefinition()` {#styleclass-getdefinition}

Returns the node and edge attributes associated with the class.

**Returns**
  * <span class="name"></span> <code class="type format ">[StyleClassDefinition](/api/types/styleclassdefinition)</code>  


## `styleClass.getEdges([filter])` {#styleclass-getedges}

Returns the list of edges that have the class. Does not include filtered edges.

**Arguments**
  * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code> Filter to apply to edges 



**Returns**
  * <span class="name"></span> <code class="type format ">[EdgeList](/api/edgelist)</code>  


## `styleClass.getIndex()` {#styleclass-getindex}

Returns the index of the class in the internal class array. A higher index class is applied after a lower
index class.

**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `styleClass.getName()` {#styleclass-getname}

Returns the name of the class.

**Returns**
  * <span class="name"></span> <code class="type format ">string</code>  


## `styleClass.getNodes(Filter)` {#styleclass-getnodes}

Returns the list of nodes that have the class. Does not include filtered nodes.

**Arguments**
  * <span class="name">Filter</span> [filter] filter to apply to nodes 



**Returns**
  * <span class="name"></span> <code class="type format ">[NodeList](/api/nodelist)</code>  


## `styleClass.remove(elements)` {#styleclass-remove}

Remove the class from the specified node(s)/edge(s). Equivalent to to `elements.removeClass(myClass.getName())`.

**Arguments**
  * <span class="name">elements</span> <code class="type format ">[Node](/api/node)|[Edge](/api/edge)|[NodeList](/api/nodelist)|[EdgeList](/api/edgelist)</code>  


## `styleClass.setIndex(index)` {#styleclass-setindex}

Set the index of the class in the internal class array. A higher index class is applied after a lower
index class.

**Arguments**
  * <span class="name">index</span> <code class="type format ">number</code>  


## `styleClass.update(options)` {#styleclass-update}

Updates the attributes assigned to nodes and edges that have that class.

**Arguments**
  * <span class="name">options</span> <code class="type format ">object</code>  
      * <span class="name">edgeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributesValue](/api/types/edgeattributesvalue)</code>  
      * <span class="name">edgeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeDependencies](/api/types/edgedependencies)</code>  
      * <span class="name">edgeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeOutput](/api/types/edgeoutput)</code>  
      * <span class="name">fullOverwrite</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the specified attributes should be merge with current
ones (false) or if the specified attributes should entirely replace the current ones. 
      * <span class="name">nodeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributesValue](/api/types/nodeattributesvalue)</code>  
      * <span class="name">nodeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeDependencies](/api/types/nodedependencies)</code>  
      * <span class="name">nodeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeOutput](/api/types/nodeoutput)</code>  




# StyleRule {#stylerule}

Controller class for a style rule, used to update and manage the attributes and selectors associated with the rule.

## `styleRule.destroy()` {#stylerule-destroy}

Delete the rule. After this is called, a call to any method on this object
will throw an error.

**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `styleRule.getId()` {#stylerule-getid}

Returns the unique positive integer rule id associated with the rule.

**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `styleRule.getIndex()` {#stylerule-getindex}

Retrieve the position of the rule in the internal rule list. Rules with a higher index are applied after rules
with a lower index.

**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `styleRule.refresh()` {#stylerule-refresh}

Refresh the rule for all nodes.

**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `styleRule.setIndex(index)` {#stylerule-setindex}

Assign the position of the rule in the internal rule list. Rules with a higher index are applied after rules
with a lower index.

**Arguments**
  * <span class="name">index</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `styleRule.update(options)` {#stylerule-update}

Updates the attributes and selectors associated with the rule.

**Arguments**
  * <span class="name">options</span>  
      * <span class="name">edgeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributesValue](/api/types/edgeattributesvalue)</code>  
      * <span class="name">edgeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeDependencies](/api/types/edgedependencies)</code>  
      * <span class="name">edgeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeOutput](/api/types/edgeoutput)</code>  
      * <span class="name">edgeSelector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeSelector](/api/types/edgeselector)|null</code>  
      * <span class="name">fullOverwrite</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if
the specified attributes should be merged with current ones (false) or if
the specified attributes should entirely replace the current ones. 
      * <span class="name">nodeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributesValue](/api/types/nodeattributesvalue)</code>  
      * <span class="name">nodeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeDependencies](/api/types/nodedependencies)</code>  
      * <span class="name">nodeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeOutput](/api/types/nodeoutput)</code>  
      * <span class="name">nodeSelector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeSelector](/api/types/nodeselector)|null</code>  





**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `styleRule.whenApplied()` {#stylerule-whenapplied}

Call the specified function when the rule is applied for the first time.

**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<[StyleRule](/api/stylerule)\></code>  


# NonObjectPropertyWatcher {#nonobjectpropertywatcher}

Retrieved from `ogma.schema.watchNodeNonObjectProperty()` or `ogma.schema.watchEdgeNonObjectProperty()`.

## `nonObjectPropertyWatcher.destroy()` {#nonobjectpropertywatcher-destroy}

Stops the watcher from being updated
## `nonObjectPropertyWatcher.getPath()` {#nonobjectpropertywatcher-getpath}

Returns the path of the data property being watched

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<string\></code>  


## `nonObjectPropertyWatcher.getPropertyInfo()` {#nonobjectpropertywatcher-getpropertyinfo}

Retrieve some information on the property being watched.

**Returns**
  * <span class="name"></span> <code class="type format ">[PropertyInformation](/api/propertyinformation)</code>  


## `nonObjectPropertyWatcher.onUpdate(handler)` {#nonobjectpropertywatcher-onupdate}

Triggers the specified function when the property is updated,

**Arguments**
  * <span class="name">handler</span> <code class="type format ">function (info: [PropertyInformation](/api/propertyinformation))</code>  


# ObjectPropertyWatcher {#objectpropertywatcher}

Retrieved from `ogma.schema.watchNodeProperties()` or `ogma.schema.watchEdgeProperties()`.

## `objectPropertyWatcher.destroy()` {#objectpropertywatcher-destroy}

Stops the watcher from being updated.
## `objectPropertyWatcher.getPath()` {#objectpropertywatcher-getpath}

Returns the path of the data property being watched

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<string\></code>  


## `objectPropertyWatcher.getProperties()` {#objectpropertywatcher-getproperties}

Returns the names of the sub-property of the watched property.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<string\></code>  


## `objectPropertyWatcher.getPropertyInfo(name)` {#objectpropertywatcher-getpropertyinfo}

Retrieve some information on the specified sub-property.

**Arguments**
  * <span class="name">name</span> <code class="type format ">string</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[PropertyInformation](/api/propertyinformation)|null</code>  


## `objectPropertyWatcher.onPropertyAdded(handler)` {#objectpropertywatcher-onpropertyadded}

Triggers the specified function when a new sub-property is added (at least one node has a value for it).

**Arguments**
  * <span class="name">handler</span> <code class="type format ">function (property: string, info: [PropertyInformation](/api/propertyinformation))</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[ObjectPropertyWatcher](/api/objectpropertywatcher)</code>  


## `objectPropertyWatcher.onPropertyRemoved(handler)` {#objectpropertywatcher-onpropertyremoved}

Triggers the specified function when a new sub-property is removed (no node has a value for it).

**Arguments**
  * <span class="name">handler</span> <code class="type format ">function (property: string, info: [PropertyInformation](/api/propertyinformation))</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[ObjectPropertyWatcher](/api/objectpropertywatcher)</code>  


## `objectPropertyWatcher.onPropertyUpdated(handler)` {#objectpropertywatcher-onpropertyupdated}

Triggers when a sub-property of the watched property is updated.

**Arguments**
  * <span class="name">handler</span> <code class="type format ">function (property: string, info: [PropertyInformation](/api/propertyinformation))</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">[ObjectPropertyWatcher](/api/objectpropertywatcher)</code>  


# PropertyInformation {#propertyinformation}

Retrieved from `watcher.getPropertyInfo()`.

## `propertyInformation.getBoundaries()` {#propertyinformation-getboundaries}

If there is at least one numerical value for this property, returns the
minimum and maximum value for this property across the graph. Returns
`null` if there is no numerical value for that property.

**Returns**
  * <span class="name"></span> <code class="type format ">null|{min: number, max: number}</code>  


## `propertyInformation.getCount()` {#propertyinformation-getcount}

Returns the number of nodes/edges for which the property is different from `undefined`

**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `propertyInformation.getType()` {#propertyinformation-gettype}

Returns the type of the property.

**Returns**
  * <span class="name"></span> <code class="type format ">"any"|"number"|"undefined"</code> If there is at least one non-number (excluding `undefined`) value, returns `'any'`.
If there are only numerical values for that property, returns `'number'`. If no node/edge has a value for that property,
returns `'undefined'`. 


## `propertyInformation.getValueCount(value)` {#propertyinformation-getvaluecount}

Returns the number of nodes/edges for which the property has the specified value.

**Arguments**
  * <span class="name">value</span> <code class="type format ">any</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `propertyInformation.getValues()` {#propertyinformation-getvalues}

Returns the different values for this property.

**Returns**
  * <span class="name"></span> <code class="type format ">Array\<any\></code>  


## `propertyInformation.isNode()` {#propertyinformation-isnode}

Indicates if it is a node or edge property.

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


# Transformation {#transformation}

Controller for an individual transformation on the graph, such as grouping, filtering etc.

## `transformation.destroy(duration)` {#transformation-destroy}

Remove the transformation over the specified amount of time. After this methods is called, the transformation is not manipulable anymore (cannot be enabled again for example). Note: the animation will not be played if the transformation is not the last in the transformation stack, because the transformations are sequential

**Arguments**
  * <span class="name">duration</span> <code class="type format ">number</code>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `transformation.disable([duration])` {#transformation-disable}

Disable the transformation over the specified amount of time.

**Arguments**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Animation duration in ms 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `transformation.enable([duration])` {#transformation-enable}

Enable the transformation over the specified amount of time.

**Arguments**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Animation duration in ms 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `transformation.getId()` {#transformation-getid}

Returns the id of the transformation, a unique strictly positive integer.

**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `transformation.getIndex()` {#transformation-getindex}

Retrieves the index of the transformation in the pipeline.

**Returns**
  * <span class="name"></span> <code class="type format ">number</code>  


## `transformation.getName()` {#transformation-getname}

Returns the name of the transformation.

**Returns**
  * <span class="name"></span> <code class="type format ">"node-filter"|"edge-filter"|"node-grouping"|"edge-grouping"</code>  


## `transformation.isEnabled()` {#transformation-isenabled}

Returns true if the transformation is currently enabled

**Returns**
  * <span class="name"></span> <code class="type format ">boolean</code>  


## `transformation.refresh()` {#transformation-refresh}

Refresh the transformation.

**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `transformation.setIndex(index)` {#transformation-setindex}

Set the index of the transformation in the pipeline. The transformation with the lower index is applied first,
the one with the higher index is applied last.

**Arguments**
  * <span class="name">index</span>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `transformation.setOptions(index)` {#transformation-setoptions}

Set the index of the transformation in the pipeline. The transformation with the lower index is applied first,
the one with the higher index is applied last.

**Arguments**
  * <span class="name">index</span>  



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `transformation.toggle([duration])` {#transformation-toggle}

Toggle the transformation over the specified amount of time.

**Arguments**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Animation duration in ms 



**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `transformation.whenApplied()` {#transformation-whenapplied}

Returns a Promise that resolves the first time the transformation is applied.

**Returns**
  * <span class="name"></span> <code class="type format ">Promise\<void\></code>  


## `NodeAttributes` {#nodeattributes}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">badges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">bottomLeft</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Badge](/api/types/badge)</code>  
      * <span class="name">bottomRight</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Badge](/api/types/badge)</code>  
      * <span class="name">topLeft</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Badge](/api/types/badge)</code>  
      * <span class="name">topRight</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Badge](/api/types/badge)</code>  


  * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|Array\<[Color](/api/types/color)\></code><code class="default-value">[=&quot;grey&quot;]</code> Color of the node 
  * <span class="name">detectable</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the node is detectable by the mouse. 
  * <span class="name">draggable</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the node is draggable by the user 
  * <span class="name">halo</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[Color](/api/types/color)|null</code> If not an object, alias for `halo.color` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=null]</code> Color of the halo 
      * <span class="name">hideNonAdjacentEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the halo hides edges which don't have at least one extremity with `halo.hideNonAdjacentEdges` to `true`. 
      * <span class="name">scalingMethod</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[ScalingMethod](/api/types/scalingmethod)</code><code class="default-value">[=&quot;fixed&quot;]</code> Indicates if the halo width should be multiplied by the zoom when the node is displayed. 
      * <span class="name">strokeColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=null]</code> Color of the stroke of the halo 
      * <span class="name">strokeWidth</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=1]</code> Width of the stroke of the halo 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=50]</code> Width of the halo, in pixels 


  * <span class="name">icon</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[TextContent](/api/types/textcontent)</code> If not an object, alias for `icon.content` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Color used to display the icon text 
      * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextContent](/api/types/textcontent)</code> Text to display inside the icon 
      * <span class="name">font</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font used to display the icon text 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=12]</code> If the node diameter on screen is less than this value, the icon will not be shown 
      * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.7]</code> Text size relative to the node diameter 
      * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[FontStyle](/api/types/fontstyle)</code><code class="default-value">[=&quot;normal&quot;]</code> Style applied to the icon. 


  * <span class="name">image</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|string|null</code> If not an object, alias for `image.url` 
      * <span class="name">fit</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the image should be rescaled to fit the node 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=12]</code> If the node diameter on screen is less than this value, the image will not be shown 
      * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Size of the image relative to the node diameter 
      * <span class="name">tile</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If the image is smaller than the node, indicates if the image should be duplicated to fill the node. If true, `fit` will be considered to be `false`. 
      * <span class="name">url</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string|null</code><code class="default-value">[=null]</code> URL of the image to display 


  * <span class="name">innerStroke</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[Color](/api/types/color)|"inherit"</code> If not an object, alias for `innerStroke.color` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;white&quot;]</code> Color of the node's inner stroke 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=12]</code> If the node diameter on screen is less than this value, the inner stroke will not be shown 
      * <span class="name">scalingMethod</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[ScalingMethod](/api/types/scalingmethod)</code><code class="default-value">[=&quot;fixed&quot;]</code> Indicates if the inner stroke width should be multiplied by the zoom when the node is displayed. 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Width of the node's inner stroke 


  * <span class="name">layer</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[LayerValue](/api/types/layervalue)</code><code class="default-value">[=0]</code> Z-index of the node. Integer value between 1 and 3. 
  * <span class="name">layoutable</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the node movable by the layout algorithm
                                                                            Some of the layouts (ForceLink) would take the non-movable nodes
                                                                            into account by making other nodes avoid them, others
                                                                            would just ignore them in calculations. 
  * <span class="name">opacity</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[OpacityValue](/api/types/opacityvalue)</code><code class="default-value">[=1]</code> Opacity of the node. 
  * <span class="name">outerStroke</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[Color](/api/types/color)|"inherit"</code> If not an object, alias for `outerStroke.color` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=null]</code> Color of the node's outer stroke 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> If the node diameter on screen is less than this value, the outer stroke will not be shown 
      * <span class="name">scalingMethod</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[ScalingMethod](/api/types/scalingmethod)</code><code class="default-value">[=&quot;fixed&quot;]</code> Indicates if the outer stroke width should be multiplied by the zoom when the node is displayed. 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=5]</code> Width of the node's outer stroke 


  * <span class="name">outline</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|boolean</code> If not an object, alias for `outline.enabled` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;rgba(0, 0, 0, 0.36)&quot;]</code> Color of the outline 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the outline should be visible 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=12]</code> If the node diameter on screen is less than this value, the outline will ne be shown 


  * <span class="name">pulse</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|null</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1000]</code> Lifespan of one pulse ripple (milliseconds). 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, shows animated pulse around the node. 
      * <span class="name">endColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;rgba(0, 0, 0, 0)&quot;]</code> End color of the pulse 
      * <span class="name">endRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> Where the pulse ends, relative to the node size (2 = 2x size of the node) 
      * <span class="name">interval</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=800]</code> Interval between two pulses (milliseconds). 
      * <span class="name">startColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;rgba(0, 0, 0, 0.6)&quot;]</code> Starting color of the pulse 
      * <span class="name">startRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Where the pulse starts, relative to the node size (1 = at the node's border) 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=50]</code> Width of the pulse in pixels 


  * <span class="name">radius</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=5]</code> Indicates the radius of the node (graph size) 
  * <span class="name">scalingMethod</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[ScalingMethod](/api/types/scalingmethod)</code><code class="default-value">[=&quot;scaled&quot;]</code> Indicates if the radius should be multiplied by the zoom when the node is displayed. 
  * <span class="name">shape</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeShape](/api/types/nodeshape)</code><code class="default-value">[=&quot;circle&quot;]</code> Shape of the node 
  * <span class="name">text</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[TextContent](/api/types/textcontent)</code> If not an object, alias for `text.content` 
      * <span class="name">align</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextAlign](/api/types/textalign)</code><code class="default-value">[=&quot;center&quot;]</code> Alignment of the text (for multi-line texts) 
      * <span class="name">backgroundColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"|null</code><code class="default-value">[=null]</code> Background color of the text 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;black&quot;]</code> Color of the text 
      * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextContent](/api/types/textcontent)</code><code class="default-value">[=null]</code> Text to display 
      * <span class="name">font</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font used to display the text 
      * <span class="name">margin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=10]</code> Additional space (in pixels) between the node and the text 
      * <span class="name">maxLineLength</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> If > 1, lines that have more characters than this value will be split across multiple lines. Affects both primary and secondary texts. 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=24]</code> If the node diameter on screen is less than this value, the text will not be shown 
      * <span class="name">padding</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Space between the text and its background's edge, in pixels 
      * <span class="name">position</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"right"|"left"|"top"|"bottom"|"center"</code><code class="default-value">[=&quot;bottom&quot;]</code> Position of the text relative to the node 
      * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.1]</code> Text size relative to the node diameter 
      * <span class="name">scaling</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the `size` property (false) or the `scale` property (true) must be used to compute the text size. Affects both primary and secondary text. 
      * <span class="name">secondary</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[TextContent](/api/types/textcontent)</code> If not an object, alias for `text.secondary.content` 
          * <span class="name">align</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextAlign](/api/types/textalign)</code><code class="default-value">[=&quot;center&quot;]</code> Alignment of the secondary text (for multi-line texts) 
          * <span class="name">backgroundColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"|null</code><code class="default-value">[=null]</code> Background color of the secondary text 
          * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;black&quot;]</code> Color of the secondary text 
          * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextContent](/api/types/textcontent)</code><code class="default-value">[=null]</code> Secondary text content. The secondary text is always displayed below the node. 
          * <span class="name">font</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font used to display the secondary text 
          * <span class="name">margin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Space (in pixels) on top of the secondary text. 
          * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=24]</code> If the node diameter on screen is less than this value, the secondary text will not be shown 
          * <span class="name">padding</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Space (in pixels) between the text and its background's edge 
          * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.08]</code> Secondary text size (relative to the node diameter) 
          * <span class="name">size</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=10]</code> Secondary text size (in pixels) 
          * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[FontStyle](/api/types/fontstyle)</code><code class="default-value">[=&quot;normal&quot;]</code> Secondary text style 


      * <span class="name">size</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=12]</code> Text size (in pixels) 
      * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[FontStyle](/api/types/fontstyle)</code><code class="default-value">[=&quot;normal&quot;]</code> Style applied to the text 
      * <span class="name">tip</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the margin between the text and the background should be filled with a small arrow pointing towards the node 


  * <span class="name">x</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> X coordinate of the node (graph space) 
  * <span class="name">y</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Y coordinate of the node (graph space) 





## `EdgeAttributes` {#edgeattributes}



**Type:**  <code class="type format ">object</code>

Default values indicate the system values (when an edge has not been assigned any value for that attribute).



**Properties**
  * <span class="name">adjustAnchors</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> If true, the edge's extremities' badges and shape will be taken into account when displaying it.
                                                                       Edges that ends with an arrow will stop at the node's badge/corner. 
  * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"source"|"target"</code><code class="default-value">[=&quot;grey&quot;]</code> Color of the edge 
  * <span class="name">detectable</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the edge is detectable by the mouse. 
  * <span class="name">halo</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[Color](/api/types/color)</code> If not an object, alias to `halo.color` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=null]</code> Color of the halo 
      * <span class="name">scalingMethod</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[ScalingMethod](/api/types/scalingmethod)</code><code class="default-value">[=&quot;fixed&quot;]</code> Indicates if the halo width should be multiplied by the zoom when the edge is displayed. 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=10]</code> Width of the halo, in pixels 


  * <span class="name">layer</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[LayerValue](/api/types/layervalue)</code><code class="default-value">[=0]</code> Z-index of the node. Integer value between -1 and 3. 
  * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> If the edge width on screen is less than this value, it will not be displayed 
  * <span class="name">opacity</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[OpacityValue](/api/types/opacityvalue)</code><code class="default-value">[=1]</code> Opacity of the edge. 0 = transparent, 1 = opaque. 
  * <span class="name">outline</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|boolean</code> If not an object, alias to `outline.enabled` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;rgba(0, 0, 0, 0.36)&quot;]</code> Color of the outline 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the outline should be visible 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> If the edge width on screen is less than this value, the outline will ne be shown 


  * <span class="name">pulse</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1000]</code> Lifespan of one pulse ripple (milliseconds). 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, shows animated pulse around the edge. 
      * <span class="name">endColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;rgba(0, 0, 0, 0)&quot;]</code> End color of the pulse 
      * <span class="name">endRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> Where the pulse ends, relative to the edge width (2 = 2x width of the edge) 
      * <span class="name">interval</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=800]</code> Interval between two pulses (milliseconds). 
      * <span class="name">startColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;rgba(0, 0, 0, 0.6)&quot;]</code> Starting color of the pulse 
      * <span class="name">startRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Where the pulse starts, relative to the edge width (1 = at the edge border) 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=50]</code> Width of the pulse in pixels 


  * <span class="name">scalingMethod</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[ScalingMethod](/api/types/scalingmethod)</code><code class="default-value">[=&quot;scaled&quot;]</code> Indicates if the edge width should be multiplied by the zoom when the edge is displayed. 
  * <span class="name">shape</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[PredefinedEdgeShape](/api/types/predefinededgeshape)</code>  
      * <span class="name">body</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeType](/api/types/edgetype)</code><code class="default-value">[=&quot;line&quot;]</code> Shape of the edge 
      * <span class="name">head</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeExtremity](/api/types/edgeextremity)</code><code class="default-value">[=null]</code> Head of the edge 
      * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeStyle](/api/types/edgestyle)</code><code class="default-value">[=&quot;plain&quot;]</code> Style of the edge 
      * <span class="name">tail</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeExtremity](/api/types/edgeextremity)</code><code class="default-value">[=null]</code> Tail of the edge 


  * <span class="name">stroke</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;inherit&quot;]</code> Color of the edge stroke. If it is "inherit", uses the same color as for the body. 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> If the edge width on screen is less than this value, the stroke will not be displayed 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=0]</code> Stroke width, in pixels. 


  * <span class="name">strokeWidth</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code> Alias for `stroke.width` 
  * <span class="name">text</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[TextContent](/api/types/textcontent)</code> If not an object, alias to `text.content` 
      * <span class="name">adjustAngle</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> In case the edge is shorter than the text, indicates if the text should be displayed horizontally. Only works for non-scaled texts. 
      * <span class="name">align</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextAlign](/api/types/textalign)</code><code class="default-value">[=&quot;center&quot;]</code> Alignment of the text (for multi-line texts) 
      * <span class="name">backgroundColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=null]</code> Background color of the text 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Color of the text 
      * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextContent](/api/types/textcontent)</code><code class="default-value">[=null]</code> Text to display 
      * <span class="name">font</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font used to display the text 
      * <span class="name">margin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Space between the text and the edge, in pixels. Ignored if `text.position` is "centered". 
      * <span class="name">maxLineLength</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> If > 1, lines that have more characters than this value will be split across multiple lines. Affects both primary and secondary texts. 
      * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=4]</code> If the edge width on screen is less than this value, the text will not be shown 
      * <span class="name">padding</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Space between the text and its background's edge, in pixels 
      * <span class="name">position</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeTextPosition](/api/types/edgetextposition)</code><code class="default-value">[=&quot;shifted&quot;]</code> Text position relative to the edge: centered or shifted. Centered places the text on top of the edge and ignores margin 
      * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Text size relative to the edge width 
      * <span class="name">scaling</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the `size` property (false) or the `scale` property (true) must be used to compute the text size 
      * <span class="name">secondary</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[TextContent](/api/types/textcontent)</code> If not an object, alias to `text.secondary.content` 
          * <span class="name">align</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextAlign](/api/types/textalign)</code><code class="default-value">[=&quot;center&quot;]</code> Alignment of the secondary text (for multi-line texts) 
          * <span class="name">backgroundColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=null]</code> Background color of the secondary text 
          * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Color of the secondary text 
          * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextContent](/api/types/textcontent)</code><code class="default-value">[=null]</code> Text to display under the primary text 
          * <span class="name">font</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font used to display the secondary text 
          * <span class="name">margin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Space between the secondary text and the edge 
          * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=4]</code> If the edge width on screen is less than this value, the secondary text will not be shown 
          * <span class="name">padding</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Space between the secondary text and its background's edge, in pixels 
          * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.8]</code> Secondary text size (relative to the edge width) 
          * <span class="name">size</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=12]</code> Secondary text size (in pixels) 
          * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[FontStyle](/api/types/fontstyle)</code><code class="default-value">[=&quot;normal&quot;]</code> Secondary text style 


      * <span class="name">size</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=12]</code> Text size (in pixels) 
      * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[FontStyle](/api/types/fontstyle)</code><code class="default-value">[=&quot;normal&quot;]</code> Style applied to the text 


  * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=1]</code> Width of the edge (graph space) 





## `AdjacencyOptions` {#adjacencyoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">bothExtremities</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Relevant only for `getAdjacentEdges`. If `true`, only edges for
which both extremities are in the `NodeList` are retrieved. 
      * <span class="name">direction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"both"|"in"|"out"</code><code class="default-value">[=&quot;both&quot;]</code> Direction of the edges to follow. 
      * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Filter](/api/types/filter)</code><code class="default-value">[=&quot;visible&quot;]</code> Indicates what kind of elements should be retrieved. 
      * <span class="name">policy</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"union"|"include-sources"|"exclude-sources"</code><code class="default-value">[=&quot;union&quot;]</code> If "include-sources", the source node(s) will be added to the result.
If "exclude-sources", the source node(s) will be removed from the result.
If "union", the result is not modified.
This parameter is ignored when retrieving adjacent edges. 







## `AttributeAnimationOptions` {#attributeanimationoptions}



**Type:**  <code class="type format ">object|number</code>

If a number is specified,
it specifies the `duration` property.



**Properties**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Indicates the duration of the attribute
transition, in milliseconds. 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Easing](/api/types/easing)</code><code class="default-value">[=&quot;linear&quot;]</code> Indicates the animation easing 





## `Badge` {#badge}



**Type:**  <code class="type format ">object</code>

Node badge attributes



**Properties**
  * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;white&quot;]</code> Fill color of the badge. 
  * <span class="name">image</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|null|string</code> If not an object, alias to `image.url` 
      * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Size of the image relative to the badge diameter 
      * <span class="name">url</span><span class="tag--is-optional">(optional)</span> <code class="type format ">null|string</code><code class="default-value">[=null]</code> URL of the image to display in the badge 


  * <span class="name">minVisibleSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=12]</code> If the node diameter on screen is less than this value, the badge will not be displayed 
  * <span class="name">positionScale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Center of the badge relative to the node size (1 = at the node's border) 
  * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.45]</code> Size of the badge relative to the node. 
  * <span class="name">stroke</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)|"inherit"</code><code class="default-value">[=&quot;black&quot;]</code> Color of the badge stroke 
      * <span class="name">scalingMethod</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[ScalingMethod](/api/types/scalingmethod)</code><code class="default-value">[=&quot;fixed&quot;]</code> Indicates if the badge width should be multiplied by the zoom when the node is displayed. 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PixelSize](/api/types/pixelsize)</code><code class="default-value">[=2]</code> Width of the badge stroke 


  * <span class="name">text</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|[TextContent](/api/types/textcontent)</code> If not an object, alias for `text.content` 
      * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"inherit"|[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Color of the badge text 
      * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextContent](/api/types/textcontent)</code><code class="default-value">[=null]</code> Text to display in the badge 
      * <span class="name">font</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font to use for the badge text 
      * <span class="name">paddingLeft</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Horizontal padding of the text inside the badge 
      * <span class="name">paddingTop</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Vertical padding of the text inside the badge 
      * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.5]</code> Size of the text relative to the badge diameter 
      * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[FontStyle](/api/types/fontstyle)</code><code class="default-value">[=&quot;normal&quot;]</code> Style applied to the badge text 







## `BadgeText` {#badgetext}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">color</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"inherit"|[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Color of the badge text 
  * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[TextContent](/api/types/textcontent)</code><code class="default-value">[=null]</code> Text to display in the badge 
  * <span class="name">font</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font to use for the badge text 
  * <span class="name">paddingLeft</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Horizontal padding of the text inside the badge 
  * <span class="name">paddingTop</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Vertical padding of the text inside the badge 
  * <span class="name">scale</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.5]</code> Size of the text relative to the badge diameter 
  * <span class="name">style</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[FontStyle](/api/types/fontstyle)</code><code class="default-value">[=&quot;normal&quot;]</code> Style applied to the badge text 





## `BaseMapOptions` {#basemapoptions}



**Type:**  <code class="type format ">object</code>

Options for the base layer of the map in geo mode.



**Properties**
  * <span class="name">BaseMapOptions</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">subdomains</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&#039;abc&#039;]</code> Format of the URL used to search for tiles. 
      * <span class="name">tms</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Useful when using a `TMS` service. 
      * <span class="name">url</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> Format of the URL used to search for tiles. Must contain `'{z}'` (zoom level of the tile), `'{x}'` and `'{y}'` (coordinates of the tile). Possible `'{s}'` (replaced by one of the characters in the `tileUrlSubdomains` setting). Possible `'{r}'` for tile servers who support retina tiles. 
      * <span class="name">wms</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Useful when using a `WMS` service. For custom WMS parameters the [Leaflet WMS TileLayer](https://leafletjs.com/reference-1.5.0.html#tilelayer-wms-options)
                                               options can be used as reference for additional parameters to be set 







## `BetweennessOptions` {#betweennessoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">directed </span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the algorithm will take account of the edge directions. 
  * <span class="name">edges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeList](/api/edgelist)\<ED, ND\></code> Edges to take in account while computing the betweenness. All visible edges by default. 
  * <span class="name">nodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeList](/api/nodelist)\<ND,ED\></code> Nodes to compute the betweenness on. All visible nodes by default. 
  * <span class="name">normalized</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> If true, will normalize the values within [0;1] 





## `BoundingBox` {#boundingbox}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">computeForZoom</span> <code class="type format ">function(zoom: number):[BoundingBox](/api/types/boundingbox)</code> Method to include the maximum item
sizes to compute the real boundaries at the selected zoom level 
  * <span class="name">cx</span> <code class="type format ">number</code> X coordinate of the center of the bounding box 
  * <span class="name">cy</span> <code class="type format ">number</code> Y coordinate of the center of the bounding box 
  * <span class="name">height</span> <code class="type format ">number</code> Height of the bounding box 
  * <span class="name">maxFixedSize</span> <code class="type format ">number</code> Maximum fixed size of the elements used to compute the bounding box 
  * <span class="name">maxScaledSize</span> <code class="type format ">number</code> Maximum scaled size of the elements used to compute the bounding box 
  * <span class="name">maxX</span> <code class="type format ">number</code> Maximum X coordinate of the bounding box 
  * <span class="name">maxY</span> <code class="type format ">number</code> Maximum Y coordinate of the bounding box 
  * <span class="name">minFixedSize</span> <code class="type format ">number</code> Minimum fixed size of the elements used to compute the bounding box 
  * <span class="name">minScaledSize</span> <code class="type format ">number</code> Minimum scaled size of the elements used to compute the bounding box 
  * <span class="name">minX</span> <code class="type format ">number</code> Minimum X coordinate of the bounding box 
  * <span class="name">minY</span> <code class="type format ">number</code> Minimum Y coordinate of the bounding box 
  * <span class="name">pad</span> <code class="type format ">function(value: number):[BoundingBox](/api/types/boundingbox)</code> Extends the bounding box by value on every direction 
  * <span class="name">width</span> <code class="type format ">number</code> Width of the bounding box 





## `BrandOptions` {#brandoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">className</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> If specified, this class will be added to the HTML created HTML element. 
  * <span class="name">horizontalMargin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Indicates the space in pixels between the brand and the top/bottom of the screen (depending on the position) 
  * <span class="name">position</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"top-left"|"top-right"|"bottom-left"|"bottom-right"</code><code class="default-value">[=&quot;bottom-right&quot;]</code> Indicates the position of the brand. 
  * <span class="name">verticalMargin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Indicates the space in pixels between the brand and the right/left of the screen (depending on the position) 





## `CameraAnimationOptions` {#cameraanimationoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Duration of the animation, in milliseconds. 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;linear&quot;]</code> Easing used by the animation. 
  * <span class="name">ignoreZoomLimits</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If `false`, the options `interactions.zoom.minValue` and `interactions.zoom.maxValue` are ignored. 
  * <span class="name">startAfter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Advanced usage. Number from 0 to 1 indicating after which percentage of the duration the animation must be started. For example,
                                  specifying 0.5 would cause the animation to start after half of its total duration, and to be played
                                  two times faster as a consequence. 





## `CanvasLayer` {#canvaslayer}



**Type:**  <code class="type format ">object</code>

The layer object containing its properties (overloaded for handling canvas).



**Properties**
  * <span class="name">destroy</span> <code class="type format ">() =\> [CanvasLayer](/api/types/canvaslayer)</code> Destroy the layer (remove it from the layer array, remove its listeners). 
  * <span class="name">element</span> <code class="type format ">HTMLElement</code> HTML element used by the layer. 
  * <span class="name">getLevel</span> <code class="type format ">() =\> number</code> Retrieves the index of the layer in the layer array. 
  * <span class="name">getOpacity</span> <code class="type format ">() =\> number</code> Get the layer opacity, between 0 and 1. 
  * <span class="name">hide</span> <code class="type format ">() =\> [CanvasLayer](/api/types/canvaslayer)</code> Keep the layer in the layer array but hide its content. 
  * <span class="name">isHidden</span> <code class="type format ">() =\> boolean</code> Check the layer visibility. 
  * <span class="name">moveDown</span> <code class="type format ">() =\> [CanvasLayer](/api/types/canvaslayer)</code> Take the layer down a notch (decreases its index by 1). 
  * <span class="name">moveTo</span> <code class="type format ">(depth: number) =\> [CanvasLayer](/api/types/canvaslayer)</code> Move the layer to the specified index in the layer array. 
  * <span class="name">moveToBottom</span> <code class="type format ">() =\> [CanvasLayer](/api/types/canvaslayer)</code> Move the layer at the very bottom of the array (index `0`). 
  * <span class="name">moveToTop</span> <code class="type format ">() =\> [CanvasLayer](/api/types/canvaslayer)</code> Move the layer at the very top of the array (index `length - 1`). 
  * <span class="name">moveUp</span> <code class="type format ">() =\> [CanvasLayer](/api/types/canvaslayer)</code> Take the layer up a notch (increases its index by 1). 
  * <span class="name">refresh</span> <code class="type format ">[DrawingFunction](/api/types/drawingfunction)</code> Function rerendering the canvas. 
  * <span class="name">setOpacity</span> <code class="type format ">(opacity: number) =\> [CanvasLayer](/api/types/canvaslayer)</code> Set the layer opacity. 
  * <span class="name">show</span> <code class="type format ">() =\> [CanvasLayer](/api/types/canvaslayer)</code> Show the layer content. 





## `CanvasLayerOptions` {#canvaslayeroptions}



**Type:**  <code class="type format ">object</code>

Canvas layer options.



**Properties**
  * <span class="name">isStatic</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Is the canvas sync with the view ? 
  * <span class="name">noClear</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> No clearing is executed before each draw call. 





## `Color` {#color}



**Type:**  <code class="type format ">null|string</code>

CSS color name (e.g `"red"`), `"transparent"`,
rgb(a) notation (e.g: `"rgb(128, 128, 128)"` or `"rgba(128, 128, 128, 0.2)"`),
hexadecimal notation (e.g: `"#FFFFFF"`) or `null` (transparent).





## `CrossOriginValue` {#crossoriginvalue}



**Type:**  <code class="type format ">"anonymous"|"use-credentials"|null</code>







## `CursorStyle` {#cursorstyle}



**Type:**  <code class="type format ">string</code>

CSS value which will be assigned to the cursor.
List of available values [here](https://developer.mozilla.org/en/docs/Web/CSS/cursor).





## `Dependency` {#dependency}



**Type:**  <code class="type format ">object|true</code>

`true` indicates that the rule/class
depends on the existence of the node(s)/edge(s), but not on their attributes



**Properties**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"all"|Array\<[PropertyPath](/api/types/propertypath)\></code> List of attributes the
rule/class depends on 
  * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if the result of the rule is based on
the node/edge's data 
  * <span class="name">hover</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if the result of the rule changes
depending on whether the node/edge is hovered or not 
  * <span class="name">selection</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if the result of the rule changes
depending on whether the node/edge is selected or not 





## `DrawingFunction` {#drawingfunction}



**Type:**  <code class="type format ">(ctx: CanvasRenderingContext2D) =\> void</code>

The function drawing on the canvas in the graph space.





## `DrillDownOptions` {#drilldownoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">copyData</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> If true, the data of the open node will be copied into the group replacing it. 
  * <span class="name">depthPath</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;depth&quot;]</code> Data path in the node that contains the depth of the node. 
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> Animation time in milliseconds. The animation will be played once after the creation of the group. Ignored if `enabled` is false. 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Grouping animation easing function. 
  * <span class="name">nodeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(nodes: [NodeList](/api/nodelist), groupId: string, transformation: [Transformation](/api/transformation)): [NodeDataAndAttributes](/api/types/nodedataandattributes)</code> See nodeGrouping [nodeGenerator]{@link types/nodegroupingoptions}. 
  * <span class="name">onGetSubgraph</span> <code class="type format ">function(node: [Node](/api/node)): Promise\<[RawGraph](/api/types/rawgraph)\></code> Function that should return a promise that resolves with the subgraph inside the group. 
  * <span class="name">onGroupUpdate</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(metaNode: [Node](/api/node), subNodes: [NodeList](/api/nodelist), isOpen: boolean): [SubLayout](/api/types/sublayout)</code> Callback to run a layout over the content of an open group.
It should return a promise that resolves when the layout is done, or a Promise containing an array of positions for each node in the group. 
  * <span class="name">padding</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number|function(metaNode: [Node](/api/node), depth: number): number</code> Padding applied to groups showing their content. If a function is passed, each MetaNode will get a padding depending on that function. 
  * <span class="name">parentPath</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;parent&quot;]</code> Data path in the node that contains the id of the parent node. 
  * <span class="name">showContents</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(metaNode: [Node](/api/node), depth: number): boolean | boolean</code> Function that would define if the contents of the group node should be hidden or not. This is called on every transformation update. 





## `Easing` {#easing}



**Type:**  <code class="type format ">"linear"|"quadraticIn"|"quadraticOut"|"quadraticInOut"|"cubicIn"|"cubicOut"|"cubicInOut"</code>







## `EasingFunction` {#easingfunction}



**Type:**  <code class="type format ">"linear"|"quadraticIn"|"quadraticOut"|"quadraticInOut"|"cubicIn"|"cubicOut"|"cubicInOut"|function(x: number): number</code>







## `EdgeAttributesValue` {#edgeattributesvalue}



**Type:**  <code class="type format ">object</code>

Object following the same structure as
[`EdgeAttributes`](/api/types/edgeattributes), with the addition that each property can
be replaced by a function that return a value for this property (or an object
if the property has multiple nested sub-properties).
When working with a large number of nodes/edges, avoid as much as possible the usage of functions.





## `EdgeCollection` {#edgecollection}



**Type:**  <code class="type format ">[Edge](/api/edge)|[EdgeList](/api/edgelist)|[EdgeId](/api/types/edgeid)|Array\<[Edge](/api/edge)|[EdgeId](/api/types/edgeid)\></code>







## `EdgeDataAndAttributes` {#edgedataandattributes}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributes](/api/types/edgeattributes)</code>  
  * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">any</code>  
  * <span class="name">id</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeId](/api/types/edgeid)</code>  





## `EdgeDependencies` {#edgedependencies}



**Type:**  <code class="type format ">object|null</code>

If `null`, indicates that the edge attributes defined by the rule/class does
not depend on any attribute of any node/edge.
If unspecified, the `self`, `extremities` and `parallelEdges` fields are
treated as `{attributes: "all", data: true, selection: true, hover: false}`,
and the `allNodes` and `allEdges` fields are treated as `null`.



**Properties**
  * <span class="name">allEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that
edge should be updated when the specified attributes of any edge change 
  * <span class="name">allNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that
edge should be updated when the specified attributes of any node change 
  * <span class="name">extremities</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that
edge should be updated when the specified attributes of the edge's
extremities change 
  * <span class="name">parallelEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for
that edge should be updated when the specified attributes of the node's
parallel edges change 
  * <span class="name">self</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that edge
should be updated when the specified attributes of the edge change 





## `EdgeDirection` {#edgedirection}



**Type:**  <code class="type format ">"both"|"in"|"out"</code>







## `EdgeExtremity` {#edgeextremity}



**Type:**  <code class="type format ">null|"arrow"|"circle-hole-arrow"|"triangle-hole-arrow"|"short-arrow"|"sharp-arrow"|"circle"|"square"</code>







## `EdgeFilterOptions` {#edgefilteroptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span>  
      * <span class="name">criteria</span> <code class="type format ">function(edge: [Edge](/api/edge)): boolean</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Duration of the filtering animation. When filtering is animated,
edges are gradually faded, before disappearing completely. Ignored if `enabled` is false. 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the filter must be enabled. 


  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Fading animation easing function. 





## `EdgeGroupingOptions` {#edgegroupingoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> Animation time in milliseconds. The animation will be played once after the creation of the group. Ignored if `enabled` is false. 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Grouping animation easing function. 
  * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if the edge grouping must be enabled. 
  * <span class="name">generator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edges: [EdgeList](/api/edgelist), groupId: string, source: [Node](/api/node), target: [Node](/api/node), transformation: [Transformation](/api/transformation)): [EdgeDataAndAttributes](/api/types/edgedataandattributes)| null</code> Given a list of edges that should be grouped together, must return the new edge (meta-edge) to be added. Returning null means that the edges should not be grouped. 
  * <span class="name">groupIdFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edge: [Edge](/api/edge)): string|undefined</code> Given an edge, must return a string identifying a
group. All edges that are parallel and for which the function returns the same value will be grouped together. By
default matches all the edges that are parallel together. The returned string will be used as prefix of the final id. Returning `undefined` means that the edge should not be grouped. 
  * <span class="name">selector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edge: [Edge](/api/edge)): boolean</code> Only edges that match this criteria will be grouped with
other edges. By default, all the edges will be assigned a group. 
  * <span class="name">separateEdgesByDirection</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> By default, edges that have opposite source and target
are grouped together (resulting source and target not deterministic). If this option is `true`, they will not be grouped together. 





## `EdgeId` {#edgeid}



**Type:**  <code class="type format ">string|number</code>







## `EdgeOutput` {#edgeoutput}



**Type:**  <code class="type format ">object|null</code>

If unspecified, the assigned attributes are inferred to the best possible
extent from the `EdgeAttributesValue` value.



**Properties**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"all"|Array\<[PropertyPath](/api/types/propertypath)\></code> List of edge attributes
assigned by the rule/class 





## `EdgeSelector` {#edgeselector}



**Type:**  <code class="type format ">null|function(edge: [Edge](/api/edge)): boolean</code>

Used to indicate if a style rule should be applied to a given edge. `null`
is equivalent to a function that always returns true.





## `EdgeSelector` {#edgeselector}



**Type:**  <code class="type format ">null|function(edge: [Edge](/api/edge)): boolean</code>

Used to indicate if a style rule should be applied to a given edge. `null`
is equivalent to a function that always returns true.





## `EdgeStyle` {#edgestyle}



**Type:**  <code class="type format ">"plain"|"dotted"|"dashed"</code>







## `EdgeTextPosition` {#edgetextposition}



**Type:**  <code class="type format ">"shifted"|"centered"</code>







## `EdgeType` {#edgetype}



**Type:**  <code class="type format ">"line"|"triangle"</code>







## `EdgesRoutingStyle` {#edgesroutingstyle}



**Type:**  <code class="type format ">'horizontal' | 'vertical' | 'none'</code>

Routing direction for curved edges





## `Filter` {#filter}



**Type:**  <code class="type format ">"visible"|"raw"|"all"</code>

Indicates which nodes and edges to take into account.
"visible" refers to visible element, "raw" refers to elements that are not the result of a transformation (the
"original" graph), and "all" refers to all elements, including the non-visible ones.





## `FilterOptionDuringAction` {#filteroptionduringaction}



**Type:**  <code class="type format ">object</code>







## `FontStyle` {#fontstyle}



**Type:**  <code class="type format ">"normal"|"bold"|"italic"</code>







## `GeoClusteringOptions` {#geoclusteringoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">edgeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edges: [EdgeList](/api/edgelist), groupId: string, transformation: [Transformation](/api/transformation)): [EdgeDataAndAttributes](/api/types/edgedataandattributes)|null</code> If `groupEdges` is `true`, indicates the function used to generate the new edges from the sub-edges. Ignored if
`groupEdges` is `false`. If returned `null`, the meta edge will not be created. 
  * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if the grouping must be enabled. 
  * <span class="name">groupEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if parallel edges that end up having at least one meta-node
extremity should be grouped together (to reduce cluttering). 
  * <span class="name">groupIdFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): string|undefined</code> Given a node, must return a string identifying a
group. All nodes for which the function returns the same value will be grouped together. By default group all the
nodes that were selected together. 
  * <span class="name">groupSelfLoopEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> If true, edges for which the two extremities end up being grouped
into the same node will be displayed as a self-loop edge, instead of not being displayed at all. 
  * <span class="name">nodeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(nodes: [NodeList](/api/nodelist), groupId: string, transformation: [Transformation](/api/transformation)): [NodeDataAndAttributes](/api/types/nodedataandattributes)|null</code> Given a list of nodes that should be grouped together, must return the new node (meta-node) to be added.
The latitude and longitude of the meta-node will be the average of the latitude and longitude of the nodes.
If `null` is returned, the meta-node will not be created. 
  * <span class="name">onCreated</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(metaNode: [Node](/api/node), showContents: boolean, subNodes: [NodeList](/api/nodelist), subEdges: [EdgeList](/api/edgelist)): Promise\<any\></code> This is
a callback called after a new group is created. See {@link ./tutorials/grouping/index.html | here} for more details. 
  * <span class="name">radius</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> The radius in which a node gets grouped to annother one. 
  * <span class="name">selector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): boolean</code> Only nodes that match this criteria will be grouped with
other nodes. By default, all the nodes will be assigned a group. 
  * <span class="name">separateEdgesByDirection</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> By default, edges that have opposite source and target
are grouped together (resulting source and target not deterministic). If this option is `true`, they will not be grouped together. 





## `GeoCoordinate` {#geocoordinate}



**Type:**  <code class="type format ">object</code>

Geographical coordinates, latitude and longitude.



**Properties**
  * <span class="name">latitude</span> <code class="type format ">number</code> Latitude (degrees) 
  * <span class="name">longitude</span> <code class="type format ">number</code> Longitude (degrees) 





## `GeoModeOptions` {#geomodeoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">attribution</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&#039;Map data (c) OpenStreetMap contributors&#039;]</code> HTML string that will be displayed on the
                                              corner, indicates the source of the tiles. 
  * <span class="name">attributionOptions</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[BrandOptions](/api/types/brandoptions)</code> Position and options for the attribution message 
  * <span class="name">backgroundColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&#039;silver&#039;]</code> Color of the map background (color of the missing tiles). 
  * <span class="name">crs</span><span class="tag--is-optional">(optional)</span> <code class="type format ">CRS</code><code class="default-value">[=L.CRS.EPSG3857]</code> This parameter controls the Coordinate Reference System used for
                                               the map projection. Usually you do not need to change it, unless
                                               you need custom projections. For more information see the [Leaflet CRS documentation](https://leafletjs.com/reference-1.5.0.html#crs). 
  * <span class="name">disableNodeDragging</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Disable node dragging when the mode is on. Dragging is disabled
                                                 by default, because geo mode is not scale-free. 
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Duration of the transition when swapping mode. 
  * <span class="name">latitudePath</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code><code class="default-value">[=&#039;latitude&#039;]</code> Node path which contains the latitude. 
  * <span class="name">longitudePath</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code><code class="default-value">[=&#039;longitude&#039;]</code> Node path which contains the longitude. 
  * <span class="name">maxZoomLevel</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=20]</code> Maximum geo-spatial zoom. 
  * <span class="name">minZoomLevel</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Minimum geo-spatial zoom. 
  * <span class="name">opacity</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Map baselayer opacity 
  * <span class="name">sizeRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Multiplier for the node radius an edge width. 
  * <span class="name">tileBuffer</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> Number of extra tiles to be downloaded around
                                              the viewport bounds, to make the panning smoother.
                                              Deprecated: this is automatically handled now, alternatively,
                                              you can pass this to the `tiles` together with the [`L.TileLayer`
                                              options](https://leafletjs.com/reference-1.5.0.html#gridlayer-keepbuffer). 
  * <span class="name">tileUrlSubdomains</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&#039;abc&#039;]</code> Values with which the '{s}' string in the URL can be replaced.
                                              Deprecated, use `tiles.subdomains` instead. 
  * <span class="name">tileUrlTemplate</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&#039;https://{s}.tile.osm.org/{z}/{x}/{y}.png&#039;]</code> Format of the URL used to search for tiles.
                                              Must contain `'{z}'` (zoom level of the tile),
                                              `'{x}'` and `'{y}'` (coordinates of the tile).
                                              Possible `'{s}'` (replaced by one of the
                                              characters in the `tileUrlSubdomains` setting).
                                              Possible `'{r}'` for tile servers who support retina tiles.
                                              Deprecated: use `tiles.url` now. 
  * <span class="name">tiles</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|L.[Layer](/api/types/layer)</code> In addition to the following list, this object supports also [Leaflet TileLayer Options](https://leafletjs.com/reference-1.5.0.html#tilelayer-options)
                                              and [Leaflet WMS TileLayer Options](https://leafletjs.com/reference-1.5.0.html#tilelayer-wms-options) options 
      * <span class="name">subdomains</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&#039;abc&#039;]</code> Format of the URL used to search for tiles. 
      * <span class="name">tms</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Useful when using a `TMS` service. 
      * <span class="name">url</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&#039;https://{s}.tile.osm.org/{z}/{x}/{y}.png&#039;]</code> Format of the URL used to search for tiles.
                                              Must contain `'{z}'` (zoom level of the tile),
                                              `'{x}'` and `'{y}'` (coordinates of the tile).
                                              Possible `'{s}'` (replaced by one of the
                                              characters in the `tileUrlSubdomains` setting).
                                              Possible `'{r}'` for tile servers who support retina tiles. 
      * <span class="name">wms</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Useful when using a `WMS` service. For custom WMS parameters the [Leaflet WMS TileLayer](https://leafletjs.com/reference-1.5.0.html#tilelayer-wms-options)
                                               options can be used as reference for additional parameters to be set 


  * <span class="name">wrapCoordinates</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Whether to wrap the coordinate to the projection space of
                                              [-180, 180] for longitude, [-85, 85] for longitude.
                                              If set to false, nodes with coordinates outside of that
                                              range will not be shown. 





## `GroupLayout` {#grouplayout}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">groupId</span> <code class="type format ">[NodeId](/api/types/nodeid)</code> The id of the group to layout. 
  * <span class="name">layout</span> <code class="type format ">string</code> The name of the layout to apply to the group (force, hierarchical etc). 
  * <span class="name">params</span> <code class="type format ">object</code> The parametters of the layout to apply. 





## `HoverEdgeOptions` {#hoveredgeoptions}



**Type:**  <code class="type format ">object</code>

Options for the hovered edge.
(<a href="edgeattributesvalue.html">EdgeAttributesValue</a> +
<a href="attributeanimationoptions.html">AnimationOptions</a>)
You can specify the duration and easing of the hover animation here.





## `HoverNodeOptions` {#hovernodeoptions}



**Type:**  <code class="type format ">object</code>

Options for the hovered node.
(<a href="#NodeAttributesValue">NodeAttributesValue</a> +
<a href="#AttributeAnimationOptions">AnimationOptions</a>)
You can specify the duration and easing of the hover animation here.





## `ImageExportOptions` {#imageexportoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">background</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code> Color of the background on the output image 
  * <span class="name">badges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Whether or not to export badges 
  * <span class="name">clip</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If `true`, export the current view rather than the whole graph 
  * <span class="name">download</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> If true, the user will be prompted a modal window so he can download the exported graph. 
  * <span class="name">filename</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;graph.png&quot;]</code> If `download` is true, the default name for the downloaded file. 
  * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"visible"|"all"</code><code class="default-value">[=&quot;visible&quot;]</code> Indicates what elements to export. 
  * <span class="name">height</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> If not specified, the height of the canvas will be used. 
  * <span class="name">imageCrossOrigin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> In case node or badge images are coming from a CDN, set this to
                                                             'anonymous' to avoid security errors on export. 
  * <span class="name">imageWatermark</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">alpha</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=0.65]</code> Transparency of the watermark, from 0 to 1 (0 = fully transparent) 
      * <span class="name">angle</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=0]</code> Angle of the watermark (in degrees) 
      * <span class="name">height</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> If not specified, the original width of the image will be used. 
      * <span class="name">repeat</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=false]</code> Indicates if the watermark should be repeated over the image 
      * <span class="name">space</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=50]</code> If repeating the watermark, space in pixels between the repetitions 
      * <span class="name">url</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> Url of the image to use as watermark 
      * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> If not specified, the original width of the image will be used. 
      * <span class="name">x</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> X coordinate of the center of the watermark 
      * <span class="name">y</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> Y coordinate of the center of the watermark 


  * <span class="name">images</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Whether or not to export images 
  * <span class="name">layers </span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Whether to export visible layers or not. Defaults to true 
  * <span class="name">legend</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean|[LegendOptions](/api/types/legendoptions)</code> If unspecified and the legend is enabled, it will be exported with the current options.
If unspecified and the legend is not enabled, it will not be exported. If `false`, the legend will not be exported no matter what.
If `true`, the legend will be exported with the default options, whether it's enabled or not. If an object is specified,
the legend will be exported with the specified options, whether it's enabled or not. 
  * <span class="name">margin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=10]</code> Blank space around the graph (in pixels) 
  * <span class="name">pixelRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> Image resolution. Defaults to your screen resolution, so on high-resolution screens the exported image will be scaled up to maintain the resolution. 
  * <span class="name">preventOverlap</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> If true, hide texts which overlap, else display labels which are already present on screen 
  * <span class="name">textWatermark</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">alpha</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.65]</code> Transparency of the watermark, from 0 to 1 (0 = fully transparent) 
      * <span class="name">angle</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Angle of the watermark (in degrees) 
      * <span class="name">content</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> Content of the text watermark 
      * <span class="name">fontColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;red&quot;]</code> Color to use to display the text watermark 
      * <span class="name">fontFamily</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font used to display the text watermark 
      * <span class="name">fontSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=48]</code> Size of the text watermark 
      * <span class="name">fontStyle</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"bold"|"italic"</code> Style to use to display the text watermark 
      * <span class="name">repeat</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the watermark should be repeated over the image 
      * <span class="name">space</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=50]</code> If repeating the watermark, space in pixels between the repetitions 
      * <span class="name">x</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> X coordinate of the center of the watermark 
      * <span class="name">y</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> Y coordinate of the center of the watermark 


  * <span class="name">texts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Whether or not to export texts 
  * <span class="name">width</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> If not specified, the width of the canvas will be used. 





## `InputSource` {#inputsource}



**Type:**  <code class="type format ">"mouse"|"touch"</code>

Indicates what kind of source emitted the event.





## `InputTarget` {#inputtarget}



**Type:**  <code class="type format ">[Node](/api/node)|[Edge](/api/edge)|null</code>

Element that is clicked/hovered. If it's not `null`, you can check
if it's a node or an edge with their `isNode` property.





## `InteractionOptions` {#interactionoptions}



**Type:**  <code class="type format ">object</code>







## `KeyCode` {#keycode}



**Type:**  <code class="type format ">number</code>

JavaScript key code.





## `KeyName` {#keyname}



**Type:**  <code class="type format ">string</code>

Lowercase letter (e.g `"a"`), digit (e.g `"3"`) or
`"shift"|"ctrl"|"cmd"|"alt"|"space"|"enter"|"esc"|"del"|"backspace"`.





## `Layer` {#layer}



**Type:**  <code class="type format ">object</code>

The layer object containing its properties.



**Properties**
  * <span class="name">destroy</span> <code class="type format ">() =\> [Layer](/api/types/layer)</code> Destroy the layer (remove it from the layer array, remove its listeners). 
  * <span class="name">element</span> <code class="type format ">HTMLElement</code> HTML element used by the layer. 
  * <span class="name">getLevel</span> <code class="type format ">() =\> number</code> Retrieves the index of the layer in the layer array. 
  * <span class="name">getOpacity</span> <code class="type format ">() =\> number</code> Get the layer opacity, between 0 and 1. 
  * <span class="name">hide</span> <code class="type format ">() =\> [Layer](/api/types/layer)</code> Keep the layer in the layer array but hide its content. 
  * <span class="name">isHidden</span> <code class="type format ">() =\> boolean</code> Check the layer visibility. 
  * <span class="name">moveDown</span> <code class="type format ">() =\> [Layer](/api/types/layer)</code> Take the layer down a notch (decreases its index by 1). 
  * <span class="name">moveTo</span> <code class="type format ">(depth: number) =\> [Layer](/api/types/layer)</code> Move the layer to the specified index in the layer array. 
  * <span class="name">moveToBottom</span> <code class="type format ">() =\> [Layer](/api/types/layer)</code> Move the layer at the very bottom of the array (index `0`). 
  * <span class="name">moveToTop</span> <code class="type format ">() =\> [Layer](/api/types/layer)</code> Move the layer at the very top of the array (index `length - 1`). 
  * <span class="name">moveUp</span> <code class="type format ">() =\> [Layer](/api/types/layer)</code> Take the layer up a notch (increases its index by 1). 
  * <span class="name">setOpacity</span> <code class="type format ">(opacity: number) =\> [Layer](/api/types/layer)</code> Set the layer opacity. 
  * <span class="name">setPosition</span> <code class="type format ">(position: {x: number, y: number}) =\> [Layer](/api/types/layer)</code> Setter setting the element translation in the graph space. 
  * <span class="name">setSize</span> <code class="type format ">(size: {width: number, height: number}) =\> [Layer](/api/types/layer)</code> Setter setting the element size in the graph space. 
  * <span class="name">show</span> <code class="type format ">() =\> [Layer](/api/types/layer)</code> Show the layer content. 





## `LayerValue` {#layervalue}



**Type:**  <code class="type format ">number</code>

Integer between -1 and 3 (included). By default elements are on the layer 0.
Selected elements are on the layer 2. Hovered elements are on the layer 3.





## `LayoutOptions` {#layoutoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">continuous</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Whether or not the layout should render intermediate steps. 
  * <span class="name">dryRun</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the layout will not be applied to the graph. 
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=300]</code> Duration of the animation when the graph is updated 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Easing](/api/types/easing)</code><code class="default-value">[=&#039;cubicIn&#039;]</code> Easing function used during the animation 
  * <span class="name">locate</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean|[LocateOptions](/api/types/locateoptions)</code><code class="default-value">[=false]</code> Center on the graph bounding box when the layout is complete. You can also provide padding. 
  * <span class="name">nodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeId](/api/types/nodeid)[]|[NodeList](/api/nodelist)</code> List of affected nodes. If nothing provided, the whole graph will be used. Where edges param is available and provided, then this list will be augmented with reached nodes from the passed edge list. 
  * <span class="name">onEnd</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(): void</code> Function called after the last graph update 
  * <span class="name">onSync</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(): void</code> Function called every time the graph is updated 
  * <span class="name">skipTextDrawing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Skip drawing labels during the layout. Improves performance and user experience. 
  * <span class="name">useWebWorker</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the layout should be computed inside a web worker. 





## `LegendOptions` {#legendoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">backgroundColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;white&quot;]</code> Background color of the widgets. 
  * <span class="name">borderColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Border color of the widgets. 
  * <span class="name">borderRadius</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Border radius of the widgets. 
  * <span class="name">borderWidth</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1]</code> Border width of the widgets, in pixels. 
  * <span class="name">circleStrokeWidth</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=3]</code> Stroke width of the circles used to indicate the size of the nodes. 
  * <span class="name">fontColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Font color used to display the widgets' content 
  * <span class="name">fontFamily</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code><code class="default-value">[=&quot;Arial&quot;]</code> Font used to display the widgets 
  * <span class="name">fontSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=10]</code> Font size used to display the widgets' content 
  * <span class="name">innerMargin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=10]</code> Blank space between a widget's border and its content, in pixels. 
  * <span class="name">outerMargin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=5]</code> Blank space between two widgets, in pixels. 
  * <span class="name">position</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"bottom"|"top"|"left"|"right"</code><code class="default-value">[=&quot;bottom&quot;]</code> Position of the legend on the canvas. 
  * <span class="name">shapeColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;grey&quot;]</code> Color used for displaying the widget indicating a node or edge shape 
  * <span class="name">titleFontColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;black&quot;]</code> Font color used to display the widgets' title 
  * <span class="name">titleFontSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=12]</code> Font size used to display the widgets' title 
  * <span class="name">titleFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(propertyPath: Array\<string\>, styleProperty: [PropertyPath](/api/types/propertypath)): string</code> Given a property path, must return
the title of the widget which displays information on that property. By default keep the last part of the
property path. 
  * <span class="name">titleMaxLength</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=20]</code> If a widget's title has more characters that this value, it will be truncated 
  * <span class="name">titleTextAlign</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"left"|"center"</code><code class="default-value">[=&quot;left&quot;]</code> Alignment of the widgets' title 
  * <span class="name">widgetWidth</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=130]</code> Width of a widget, in pixels 





## `LocateOptions` {#locateoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Duration of the camera movement, in milliseconds. 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;cubicOut&quot;]</code> Easing function applied to the movement of the camera. 
  * <span class="name">ignoreZoomLimits</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If `true`, the options `interactions.zoom.minValue` and
                                                         `interactions.zoom.maxValue` are ignored. 
  * <span class="name">maxNodeSizeOnScreen</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=200]</code> Additional restriction on the zoom that makes sure no node
                                                         is displayed with a diameter greater than this value, in pixels.
                                                         Set to 0 to disable this feature. 
  * <span class="name">padding</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object|number</code> If a number, indicates the padding for the four sides. 
      * <span class="name">bottom</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=40]</code> Bottom padding (in pixels). 
      * <span class="name">left</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=40]</code> Left padding (in pixels). 
      * <span class="name">right</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=40]</code> Right padding (in pixels). 
      * <span class="name">top</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=40]</code> Top padding (in pixels). 







## `MapPosition` {#mapposition}



**Type:**  <code class="type format ">object</code>

Geo coordinates and zoom level of the map



**Properties**
  * <span class="name">latitude</span> <code class="type format ">number</code> Latitude (degrees) 
  * <span class="name">longitude</span> <code class="type format ">number</code> Longitude (degrees) 
  * <span class="name">zoom</span> <code class="type format ">number</code> Map scale 





## `MouseButton` {#mousebutton}



**Type:**  <code class="type format ">"left"|"right"|"middle"</code>

Identifies a mouse button.





## `NeighborGenerationOptions` {#neighborgenerationoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code>  
      * <span class="name">edgeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(originalNode: [Node](/api/node), generatedNode: [Node](/api/node)): [RawEdge](/api/types/rawedge)</code> Given the original node and the generated neighbor, returns the edge that must be created between them.
Source and target may be specified; otherwise the original node is the source and the generated node is the
target. If this parameter is unspecified, an edge with no data and with default attributes is created. 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code>  
      * <span class="name">neighborIdFunction</span> <code class="type format ">function(node: [Node](/api/node)): string|Array\<string\>|null</code> String identifying the neighbor that will be created. An array of string can be passed; in this case multiple
neighbors are created. If `null` is returned, no neighbor is created. 
      * <span class="name">nodeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(identifier: string, nodes: [NodeList](/api/nodelist)): [RawNode](/api/types/rawnode)</code> Given the nodes that spawned it and its identifier (which is not its final id, but is part of it),
returns the node that must be created. If unspecified, a node with no data and with default attributes
is created. 
      * <span class="name">selector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): boolean</code> If unspecified, defaults to a function that
always returns true. 


  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Animation easing function. 





## `NeighborMergingOptions` {#neighbormergingoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span>  
      * <span class="name">dataFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): object|undefined</code> If unspecified or if it returns
`undefined`, no data is added to the neighbors. 
      * <span class="name">selector</span> <code class="type format ">function(node: [Node](/api/node)): boolean</code> Function indicating which nodes will be merged. 


  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code>  
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Animation easing function. 
  * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code>  





## `NodeAttributesValue` {#nodeattributesvalue}



**Type:**  <code class="type format ">object</code>

Object following the same structure as [`NodeAttributes`](/api/types/nodeattributes),
with the addition that each property can be replaced by a function that return a value for this property (or an object
if the property has multiple nested sub-properties). `undefined` can be explicitly specified in any field to indicate that
the attribute should not be modified (useful when updating a class/rule).
When working with a large number of nodes/edges, avoid as much as possible the usage of functions.





## `NodeClusteringOptions` {#nodeclusteringoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">edgeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edges: [EdgeList](/api/edgelist), clusterId: string, transformation: [Transformation](/api/transformation)): [EdgeDataAndAttributes](/api/types/edgedataandattributes)</code> If `groupEdges` is `true`, indicates the function used to generate the new edges from the sub-edges. Ignored if
`clusterEdges` is `false`. 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the clustering must be enabled. 
      * <span class="name">groupIdFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [RawNode](/api/types/rawnode)): string</code> Given a node, must return a string identifying a
cluster. All nodes for which the function returns the same value will be clustered together. By default cluster all the
nodes that were selected together. 
      * <span class="name">groupSelfLoopEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, edges for which the two extremities end up being clustered
into the same node will be displayed as a self-loop edge, instead of not being displayed at all. 
      * <span class="name">nodeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(nodes: [NodeList](/api/nodelist), clusterId: string, transformation: [Transformation](/api/transformation)): [NodeDataAndAttributes](/api/types/nodedataandattributes)</code> Given a list of nodes that should be clustered together, must return the new node (meta-node) to be added.
If `attributes.x` and `attributes.y` are not specified, the meta-node will be put at the center of the nodes. 
      * <span class="name">selector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [RawNode](/api/types/rawnode)): boolean</code> Only nodes that match this criteria will be clustered with
other nodes. By default, all the nodes will be assigned a cluster. 







## `NodeCollapsingOptions` {#nodecollapsingoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code>  
      * <span class="name">edgeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(hiddenNode: [Node](/api/node), node1: [Node](/api/node), node2: [Node](/api/node), edges1: [EdgeList](/api/edgelist), edges2: [EdgeList](/api/edgelist)): [RawEdge](/api/types/rawedge)|null</code> Function returning the RawEdge to create for each pair of adjacent nodes.
`hiddenNode` is the node that is hidden (matches `selector`).
`node1` is the first neighbor of the pair.
`node2` is the second neighbor of the pair.
`edges1` is the list of edges between the hidden node and the first neighbor of the pair.
`edges2` is the list of edges between the hidden node and the second neighbor of the pair.
The source and target of the edge may be specified; if it's the case they must be either `node1` or `node2`.
If it's not the case, an exception will be thrown. If source/target are not specified and the edges follow a
consistent direction (e.g A <- B <- C), the source and target are assigned according to that direction
(here A <- B). Otherwise (e.g A -> B <- C), `node1` is used as the source and `node2` is used as the target.
If `null` is returned, no edge is created between the two nodes.
If no edge generator is specified, a default edge is created. 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code>  
      * <span class="name">selector</span> <code class="type format ">function(node: [Node](/api/node)): boolean</code> Function indicating which nodes will be hidden. 


  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Animation easing function. 





## `NodeCollection` {#nodecollection}



**Type:**  <code class="type format ">[Node](/api/node)|[NodeList](/api/nodelist)|[NodeId](/api/types/nodeid)|Array\<[Node](/api/node)|[NodeId](/api/types/nodeid)\></code>







## `NodeDataAndAttributes` {#nodedataandattributes}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributes](/api/types/nodeattributes)</code>  
  * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">any</code>  
  * <span class="name">id</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeId](/api/types/nodeid)</code>  





## `NodeDependencies` {#nodedependencies}



**Type:**  <code class="type format ">object|null</code>

If `null`, indicates that the node attributes defined by the rule/class does
not depend on any attribute of any node/edge.
If unspecified, the `self`, `adjacentNodes` and `adjacentEdges` fields are
treated as `{attributes: "all", data: true, selection: true, hover: false}`,
and the `allNodes` and `allEdges` fields are treated as `null`.



**Properties**
  * <span class="name">adjacentEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that
node should be updated when the specified attributes of the node's adjacent
edges change 
  * <span class="name">adjacentNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that
node should be updated when the specified attributes of the node's adjacent
nodes change 
  * <span class="name">allEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that node
should be updated when the specified attributes of any edge change 
  * <span class="name">allNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that node
should be updated when the specified attributes of any node change 
  * <span class="name">self</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Dependency](/api/types/dependency)</code> Indicates that the rule/class for that node
should be updated when the specified attributes of the node change 





## `NodeFilterOptions` {#nodefilteroptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span>  
      * <span class="name">criteria</span> <code class="type format ">function(node: [Node](/api/node)): boolean</code>  
      * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Duration of the filtering animation. When filtering is animated,
nodes are gradually faded, before disappearing completely. Ignored if `enabled` is false. 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the filter must be enabled. 


  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Fading animation easing function. 





## `NodeGroupingOptions` {#nodegroupingoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> Animation time in milliseconds. The animation will be played once after the creation of the group. Ignored if `enabled` is false. 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;quadraticOut&quot;]</code> Grouping animation easing function. 
  * <span class="name">edgeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edges: [EdgeList](/api/edgelist), groupId: string, source: [Node](/api/node), target: [Node](/api/node), transformation: [Transformation](/api/transformation)): [EdgeDataAndAttributes](/api/types/edgedataandattributes)</code> If `groupEdges` is `true`, indicates the function used to generate the new edges from the sub-edges. Ignored if
`groupEdges` is `false`. 
  * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if the grouping must be enabled. 
  * <span class="name">groupEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> Indicates if parallel edges that end up having at least one meta-node
extremity should be grouped together (to reduce cluttering). 
  * <span class="name">groupIdFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): string|undefined</code> Given a node, must return a string identifying a
group. All nodes for which the function returns the same value will be grouped together. By default group all the
nodes that were selected together. Returning `undefined` means that the node should not be grouped. 
  * <span class="name">groupSelfLoopEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> If true, edges for which the two extremities end up being grouped
into the same node will be displayed as a self-loop edge, instead of not being displayed at all. 
  * <span class="name">nodeGenerator</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(nodes: [NodeList](/api/nodelist), groupId: string, transformation: [Transformation](/api/transformation)): [NodeDataAndAttributes](/api/types/nodedataandattributes)</code> Given a list of nodes that should be grouped together, must return the new node (meta-node) to be added.
GeoClustering will compute automatically the coordinate of the clusters. 
  * <span class="name">onGroupUpdate</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(metaNode: [Node](/api/node), subNodes: [NodeList](/api/nodelist), isOpen: boolean): [SubLayout](/api/types/sublayout)</code> This is a callback allowing you to layout the content of an open group.
It should return a promise that resolves when the layout is done, or a Promise containing an array of positions for each node in the group. 
  * <span class="name">padding</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number|function(metaNode: [Node](/api/node)): number</code> Padding applied to groups showing their content. If a function is passed, each MetaNode will get a padding depending on that function. 
  * <span class="name">restorePositions</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> When the grouping is disabled/destroyed, indicates if the nodes should be positioned back around the meta-node position 
  * <span class="name">selector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): boolean</code> Only nodes that match this criteria will be grouped with
other nodes. By default, all the nodes will be assigned a group. 
  * <span class="name">separateEdgesByDirection</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code> By default, edges that have opposite source and target
are grouped together (resulting source and target not deterministic). If this option is `true`, they will not be grouped together. 
  * <span class="name">showContents</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(metaNode: [Node](/api/node)): boolean | boolean</code> Function that would define if the contents of the group node should be hidden or not. This is called on every transformation update. 





## `NodeId` {#nodeid}



**Type:**  <code class="type format ">string|number</code>







## `NodeOutput` {#nodeoutput}



**Type:**  <code class="type format ">object|null</code>

If unspecified, the assigned attributes are inferred to the best possible
extent from the `NodeAttributesValue` value.



**Properties**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"all"|Array\<[PropertyPath](/api/types/propertypath)\></code> List of node attributes
assigned by the rule/class 





## `NodeSelector` {#nodeselector}



**Type:**  <code class="type format ">null|function(node: [Node](/api/node)): boolean</code>

Used to indicate if a style rule should be applied to a given node. `null`
is equivalent to a function that always returns true.





## `NodeSelector` {#nodeselector}



**Type:**  <code class="type format ">null|function(node: [Node](/api/node)): boolean</code>

Used to indicate if a style rule should be applied to a given node. `null`
is equivalent to a function that always returns true.





## `NodeShape` {#nodeshape}



**Type:**  <code class="type format ">"circle"|"cross"|"diamond"|"pentagon"|"square"|"star"|"equilateral"</code>







## `OpacityValue` {#opacityvalue}



**Type:**  <code class="type format ">number</code>

Value between 0 (transparent) and 1 (opaque) indicating the opacity of the node/edge.
Note that Ogma doesn't perform real opacity, but background blending: the lower the opacity value is, the more
the color of the node/edge is blended towards the background color, but it retains its original alpha value.
This has one important implication: when using a transparent background and an image is displayed behind Ogma,
it is necessary to set the RGB values to the background color that are close to the image, even if the color is
transparent. For example, assuming the image is mainly grey, you should do
<span style="background-color: lightgrey;">`ogma.setOptions({backgroundColor: "rgba(128, 128, 128, 0)"})`</span>
so the nodes/edges are nicely blended towards the image color.





## `Options` {#options}



**Type:** 





**Properties**
  * <span class="name">backgroundColor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[Color](/api/types/color)</code><code class="default-value">[=&quot;white&quot;]</code> Background color of the canvas. 
  * <span class="name">cursor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">default</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[CursorStyle](/api/types/cursorstyle)</code><code class="default-value">[=&quot;default&quot;]</code> A CSS value for the cursor. 
      * <span class="name">edge</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[CursorStyle](/api/types/cursorstyle)</code><code class="default-value">[=&quot;pointer&quot;]</code> Cursor style when an edge is hovered. 
      * <span class="name">node</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[CursorStyle](/api/types/cursorstyle)</code><code class="default-value">[=&quot;pointer&quot;]</code> Cursor style when a node is hovered. 


  * <span class="name">detect</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">edgeErrorMargin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=2]</code> How far of the mouse an edge can be and still be detected, in pixels. 
      * <span class="name">edgeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the detection of edge texts should be enabled. 
      * <span class="name">edges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the detection of edges should be enabled. 
      * <span class="name">nodeBadges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the detection of node badges should be enabled. 
      * <span class="name">nodeErrorMargin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=5]</code> How far of the mouse a node can be and still be detected, in pixels. 
      * <span class="name">nodeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the detection of node texts should be enabled. 
      * <span class="name">nodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the detection of nodes should be enabled. 


  * <span class="name">directedEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, edges of opposing directions will be not be mixed together visually. 
  * <span class="name">edgeMinTipSize</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> The minimum size of the edge tip. 
  * <span class="name">edgeTipRatio</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code> The ratio of the edge tip size compared to the edge width. 
  * <span class="name">edgesAlwaysCurvy</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, all edges will be curved. 
  * <span class="name">edgesRoutingStyle</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgesRoutingStyle](/api/types/edgesroutingstyle)</code><code class="default-value">[=&#039;none&#039;]</code> If 'horizontal' or 'vertical', cureved edges will have different curvature at the source and target, making horizontal or vertical hierarchies more readable. Use with hierarchical or custom layouts. 
  * <span class="name">imgCrossOrigin</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[CrossOriginValue](/api/types/crossoriginvalue)</code><code class="default-value">[=&quot;anonymous&quot;]</code> Indicates the value of the `crossOrigin` field for DOM images. 
  * <span class="name">interactions</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">gesture</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
          * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if zooming/rotating using two fingers should be enabled. 
          * <span class="name">hideEdgeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edge texts should be hidden when zooming/rotating the view using two fingers. 
          * <span class="name">hideEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edges should be hidden when zooming/rotating the view using two fingers. 
          * <span class="name">hideNodeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the node texts should be hidden when zooming/rotating the view using two fingers. 
          * <span class="name">hideNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the nodes should be hidden when zooming/rotating the view using two fingers. 


      * <span class="name">drag</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
          * <span class="name">cursor</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[CursorStyle](/api/types/cursorstyle)</code><code class="default-value">[=&#039;move&#039;]</code> Cursor style to be applied while dragging the node 
          * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if dragging nodes with the mouse should be enabled. 


      * <span class="name">pan</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
          * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if moving the view with the mouse should be enabled. 
          * <span class="name">hideEdgeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edge texts should be hidden when moving the view. 
          * <span class="name">hideEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edges should be hidden when moving the view. 
          * <span class="name">hideNodeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the node texts should be hidden when moving the view. 
          * <span class="name">hideNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the nodes should be hidden when moving the view. 


      * <span class="name">rotation</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
          * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if rotating the view with the mouse should be enabled. 
          * <span class="name">hideEdgeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edge texts should be hidden when rotating the view. 
          * <span class="name">hideEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edges should be hidden when rotating the view. 
          * <span class="name">hideNodeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the node texts should be hidden when rotating the view. 
          * <span class="name">hideNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the nodes should be hidden when rotating the view. 


      * <span class="name">selection</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
          * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if selection with the mouse should be enabled 
          * <span class="name">multiSelectionKey</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[KeyName](/api/types/keyname)|null</code><code class="default-value">[=&quot;ctrl&quot;]</code> Indicates the key that must be pressed to select multiple nodes/edges at a time. 


      * <span class="name">zoom</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
          * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=150]</code> Indicate the duration of a manual zoom. 
          * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;cubicOut&quot;]</code> Easing function to use for the zoom. 
          * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if zoom on mouse wheel should be enabled. 
          * <span class="name">hideEdgeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edge texts should be hidden when
zooming manually. 
          * <span class="name">hideEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edges should be hidden when zooming
manually. 
          * <span class="name">hideNodeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the node texts should be hidden when
zooming manually. 
          * <span class="name">hideNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the nodes should be hidden when zooming
manually. 
          * <span class="name">maxValue</span><span class="tag--is-optional">(optional)</span> <code class="type format ">null|[ZoomBoundaryFunction](/api/types/zoomboundaryfunction)</code> Function indicating the maximum possible zoom. By default, it's not possible to zoom so the smallest node takes
more than 50% of the view. Set to `null` to remove the limit. 
          * <span class="name">metaKey</span><span class="tag--is-optional">(optional)</span> <code class="type format ">'ctrl'|'alt'|'shift'|'space'</code><code class="default-value">[=&#039;ctrl/cmd&#039;]</code> Modifier button to use for zooming with the
mousewheel or trackpad when `scrollToPan` is enabled. By default it's the `ctrl` (`⌘` on Mac) key. 
          * <span class="name">minValue</span><span class="tag--is-optional">(optional)</span> <code class="type format ">null|[ZoomBoundaryFunction](/api/types/zoomboundaryfunction)</code> Function indicating the minimum possible zoom. By default, it's not possible to zoom so the graph takes less
than 20% of the view. Set to `null` to remove the limit. 
          * <span class="name">modifier</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=Math.SQRT2]</code> Indicate the zoom multiplier on the manual zoom. 
          * <span class="name">onDoubleClick</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if zoom on double click should be enabled. 
          * <span class="name">scrollToPan</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the view should be moved when scrolling with
mousewheel or trackpad 
          * <span class="name">speed</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0.15]</code> The speed of the zoom on mouse wheel. 




  * <span class="name">minimumHeight</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=300]</code> Minimum container height in pixels. 
  * <span class="name">minimumWidth</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=300]</code> Minimum container width in pixels. 
  * <span class="name">mouse</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">disableWheelUntilMouseDown</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If true, the canvas will not take the focus of the mouse until the user clicks on it. 
      * <span class="name">doubleClickTimer</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=500]</code> After a click, amount of time after which a second click won't trigger a double click event 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the mouse should be enabled 
      * <span class="name">wheelEnabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the mouse wheel should be enabled. 


  * <span class="name">renderer</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[RendererType](/api/types/renderertype)</code><code class="default-value">[=&quot;webgl&quot;]</code> Rendering type. If WebGL is selected and not available, Ogma will fallback on Canvas.
If no renderer is available (e.g in Node.js), Ogma will fallback on headless mode (`null`). 
  * <span class="name">texts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">cornerRadius</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=5]</code> Controls the radius of the rounded corners of text boxes.
Set to 0 to get non rounded corners. 
      * <span class="name">hideUntilFontsLoaded</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> If `true`, texts & icons won't be displayed until the browser
has finished loading the fonts. This prevents texts from showing up with the default font during the short time
between Ogma initialization and the moment fonts are loaded. 
      * <span class="name">preventOverlap</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Detect and remove overlapping of texts. 


  * <span class="name">touch</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if the touch should be enabled 







## `Overlay` {#overlay}



**Type:**  <code class="type format ">object</code>

The layer object containing its properties (overloaded for handling transformed elements).



**Properties**
  * <span class="name">destroy</span> <code class="type format ">() =\> [Overlay](/api/types/overlay)</code> Destroy the layer (remove it from the layer array, remove its listeners). 
  * <span class="name">element</span> <code class="type format ">HTMLElement</code> HTML element used by the layer. 
  * <span class="name">getLevel</span> <code class="type format ">() =\> number</code> Retrieves the index of the layer in the layer array. 
  * <span class="name">getOpacity</span> <code class="type format ">() =\> number</code> Get the layer opacity, between 0 and 1. 
  * <span class="name">hide</span> <code class="type format ">() =\> [Overlay](/api/types/overlay)</code> Keep the layer in the layer array but hide its content. 
  * <span class="name">isHidden</span> <code class="type format ">() =\> boolean</code> Check the layer visibility. 
  * <span class="name">moveDown</span> <code class="type format ">() =\> [Overlay](/api/types/overlay)</code> Take the layer down a notch (decreases its index by 1). 
  * <span class="name">moveTo</span> <code class="type format ">(depth: number) =\> [Overlay](/api/types/overlay)</code> Move the layer to the specified index in the layer array. 
  * <span class="name">moveToBottom</span> <code class="type format ">() =\> [Overlay](/api/types/overlay)</code> Move the layer at the very bottom of the array (index `0`). 
  * <span class="name">moveToTop</span> <code class="type format ">() =\> [Overlay](/api/types/overlay)</code> Move the layer at the very top of the array (index `length - 1`). 
  * <span class="name">moveUp</span> <code class="type format ">() =\> [Overlay](/api/types/overlay)</code> Take the layer up a notch (increases its index by 1). 
  * <span class="name">setOpacity</span> <code class="type format ">(opacity: number) =\> [Overlay](/api/types/overlay)</code> Set the layer opacity. 
  * <span class="name">setPosition</span> <code class="type format ">(position: {x: number, y: number}) =\> [Overlay](/api/types/overlay)</code> Setter setting the element translation in the graph space. 
  * <span class="name">setSize</span> <code class="type format ">(size: {width: number, height: number}) =\> [Overlay](/api/types/overlay)</code> Setter setting the element size in the graph space. 
  * <span class="name">show</span> <code class="type format ">() =\> [Overlay](/api/types/overlay)</code> Show the layer content. 





## `OverlayOptions` {#overlayoptions}



**Type:**  <code class="type format ">object</code>

HTML element provided with its affine transformation in the graph space.



**Properties**
  * <span class="name">element</span> <code class="type format ">HTMLElement|string</code> HTML element being transformed. You can also provide an HTML string. 
  * <span class="name">position</span> <code class="type format ">{x: number, y: number}</code> The element translation in the graph space. 
  * <span class="name">scaled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Whether or not the overlay should be scaled together with the graph. 
  * <span class="name">size</span><span class="tag--is-optional">(optional)</span> <code class="type format ">{width: number, height: number}</code> The element size in the graph space. 





## `Padding` {#padding}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">bottom</span> <code class="type format ">number</code> Bottom padding (in pixels). 
  * <span class="name">left</span> <code class="type format ">number</code> Left padding (in pixels). 
  * <span class="name">right</span> <code class="type format ">number</code> Right padding (in pixels). 
  * <span class="name">top</span> <code class="type format ">number</code> Top padding (in pixels). 





## `PixelSize` {#pixelsize}



**Type:**  <code class="type format ">number|string</code>

Indicates a size in pixels. A string in the format `X%` (e.g "200%") can be
specified instead of a number, in which case it is treated as `X percent of
the default value`. `X` should be parsable using `parseFloat`.





## `Point` {#point}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">x</span> <code class="type format ">number</code> X coordinate. 
  * <span class="name">y</span> <code class="type format ">number</code> Y coordinate. 





## `PredefinedEdgeShape` {#predefinededgeshape}



**Type:**  <code class="type format ">"line"|"arrow"|"tapered"|"dashed"|"dotted"</code>

These are valid values to ensure retro-compatibility with Ogma < 2.2





## `PropertyPath` {#propertypath}



**Type:**  <code class="type format ">string|Array\<string\></code>







## `RawEdge` {#rawedge}



**Type:**  <code class="type format ">object</code>

JSON representation of an edge.



**Properties**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributes](/api/types/edgeattributes)</code>  
  * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">any</code>  
  * <span class="name">id</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeId](/api/types/edgeid)</code>  
  * <span class="name">source</span> <code class="type format ">[NodeId](/api/types/nodeid)</code>  
  * <span class="name">target</span> <code class="type format ">[NodeId](/api/types/nodeid)</code>  





## `RawGraph` {#rawgraph}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">edges</span> <code class="type format ">Array\<[RawEdge](/api/types/rawedge)\></code>  
  * <span class="name">nodes</span> <code class="type format ">Array\<[RawNode](/api/types/rawnode)\></code>  





## `RawNode` {#rawnode}



**Type:**  <code class="type format ">object</code>

JSON representation of a node.



**Properties**
  * <span class="name">attributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributes](/api/types/nodeattributes)</code>  
  * <span class="name">data</span><span class="tag--is-optional">(optional)</span> <code class="type format ">any</code>  
  * <span class="name">id</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeId](/api/types/nodeid)</code>  





## `RendererErrorCode` {#renderererrorcode}



**Type:**  <code class="type format ">"NO_WEBGL"|"NO_ANGLE_INSTANCED_ARRAYS"|"OTHER"|null</code>

A non-null value indicates that an error has occurred and provides information on that error. <br>
<code>"NO_WEBGL"</code> indicates that WebGL is not available, most likely a browser or GPU issue. <br>
<code>"NO_ANGLE_INSTANCED_ARRAYS</code>" indicates that the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/ANGLE_instanced_arrays">ANGLE_instanced_arrays</a>
WebGL extension is not available. Also most likely a browser or GPU issue. <br>
<code>"OTHER"</code> indicates an unexpected error, most likely due to a specific combination of browser/GPU/OS that was not
handled correctly by Ogma. If you happen to encounter this error code , please contact support@linkurio.us and
provide the error message along with the browser, operating system and graphics card used.





## `RendererState` {#rendererstate}



**Type:**  <code class="type format ">"requested"|"ok"|"error"</code>

Indicates a renderer state. <br>
<code>"requested"</code> is fired right after Ogma is initialized or the `renderer` option has been changed, and means that the
renderer has not been initialized yet. <br>
<code>"ok"</code> indicates that the renderer has been initialized and runs properly. <br>
<code>"error"</code> indicates that an error has occurred that prevents the renderer from running.





## `RendererType` {#renderertype}



**Type:**  <code class="type format ">"webgl"|"canvas"|"svg"|null</code>







## `SVGDrawingFunction` {#svgdrawingfunction}



**Type:**  <code class="type format ">(elt: SVGSVGElement) =\> void</code>

The function drawing on SVG in the graph space. It is called every time the viewport is updated.





## `SVGLayer` {#svglayer}



**Type:**  <code class="type format ">object</code>

The layer object containing its properties (overloaded for handling transformed elements).



**Properties**
  * <span class="name">destroy</span> <code class="type format ">() =\> [SVGLayer](/api/types/svglayer)</code> Destroy the layer (remove it from the layer array, remove its listeners). 
  * <span class="name">element</span> <code class="type format ">SVGSVGElement</code> SVG element used by the layer. 
  * <span class="name">getLevel</span> <code class="type format ">() =\> number</code> Retrieves the index of the layer in the layer array. 
  * <span class="name">getOpacity</span> <code class="type format ">() =\> number</code> Get the layer opacity, between 0 and 1. 
  * <span class="name">hide</span> <code class="type format ">() =\> [SVGLayer](/api/types/svglayer)</code> Keep the layer in the layer array but hide its content. 
  * <span class="name">isHidden</span> <code class="type format ">() =\> boolean</code> Check the layer visibility. 
  * <span class="name">moveDown</span> <code class="type format ">() =\> [SVGLayer](/api/types/svglayer)</code> Take the layer down a notch (decreases its index by 1). 
  * <span class="name">moveTo</span> <code class="type format ">(depth: number) =\> [SVGLayer](/api/types/svglayer)</code> Move the layer to the specified index in the layer array. 
  * <span class="name">moveToBottom</span> <code class="type format ">() =\> [SVGLayer](/api/types/svglayer)</code> Move the layer at the very bottom of the array (index `0`). 
  * <span class="name">moveToTop</span> <code class="type format ">() =\> [SVGLayer](/api/types/svglayer)</code> Move the layer at the very top of the array (index `length - 1`). 
  * <span class="name">moveUp</span> <code class="type format ">() =\> [SVGLayer](/api/types/svglayer)</code> Take the layer up a notch (increases its index by 1). 
  * <span class="name">refresh</span> <code class="type format ">[SVGDrawingFunction](/api/types/svgdrawingfunction)</code> Function rerendering the SVG. 
  * <span class="name">setOpacity</span> <code class="type format ">(opacity: number) =\> [SVGLayer](/api/types/svglayer)</code> Set the layer opacity. 
  * <span class="name">setPosition</span> <code class="type format ">(position: {x: number, y: number}) =\> [SVGLayer](/api/types/svglayer)</code> Setter setting the element translation in the graph space. 
  * <span class="name">setSize</span> <code class="type format ">(size: {width: number, height: number}) =\> [SVGLayer](/api/types/svglayer)</code> Setter setting the element size in the graph space. 
  * <span class="name">show</span> <code class="type format ">() =\> [SVGLayer](/api/types/svglayer)</code> Show the layer content. 





## `SVGLayerOptions` {#svglayeroptions}



**Type:**  <code class="type format ">object</code>

SVG layer options.



**Properties**
  * <span class="name">draw</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[SVGDrawingFunction](/api/types/svgdrawingfunction)</code> Drawing function, operates in graph
coordinate space. You can render the SVG elements here or change them. 
  * <span class="name">element</span><span class="tag--is-optional">(optional)</span> <code class="type format ">SVGSVGElement</code> SVG element to draw on. If not provided,
it will be created. 





## `ScalingMethod` {#scalingmethod}



**Type:**  <code class="type format ">"scaled"|"fixed"</code>







## `SelectionInteractionOptions` {#selectioninteractionoptions}



**Type:**  <code class="type format ">object</code>







## `SimpleBoundingBox` {#simpleboundingbox}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">cx</span> <code class="type format ">number</code> X coordinate of the center of the bounding box 
  * <span class="name">cy</span> <code class="type format ">number</code> Y coordinate of the center of the bounding box 
  * <span class="name">height</span> <code class="type format ">number</code> Height of the bounding box 
  * <span class="name">maxX</span> <code class="type format ">number</code> Maximum X coordinate of the bounding box 
  * <span class="name">maxY</span> <code class="type format ">number</code> Maximum Y coordinate of the bounding box 
  * <span class="name">minX</span> <code class="type format ">number</code> Minimum X coordinate of the bounding box 
  * <span class="name">minY</span> <code class="type format ">number</code> Minimum Y coordinate of the bounding box 
  * <span class="name">width</span> <code class="type format ">number</code> Width of the bounding box 





## `Size` {#size}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">height</span> <code class="type format ">number</code> Height. 
  * <span class="name">width</span> <code class="type format ">number</code> Width. 





## `StyleClassDefinition` {#styleclassdefinition}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">edgeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributesValue](/api/types/edgeattributesvalue)</code>  
      * <span class="name">edgeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeDependencies](/api/types/edgedependencies)</code>  
      * <span class="name">edgeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeOutput](/api/types/edgeoutput)</code>  
      * <span class="name">nodeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributesValue](/api/types/nodeattributesvalue)</code>  
      * <span class="name">nodeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeDependencies](/api/types/nodedependencies)</code>  
      * <span class="name">nodeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeOutput](/api/types/nodeoutput)</code>  







## `StyleRuleDefinition` {#styleruledefinition}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">edgeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributesValue](/api/types/edgeattributesvalue)</code>  
      * <span class="name">edgeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeDependencies](/api/types/edgedependencies)</code>  
      * <span class="name">edgeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeOutput](/api/types/edgeoutput)</code>  
      * <span class="name">edgeSelector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeSelector](/api/types/edgeselector)</code>  
      * <span class="name">nodeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributesValue](/api/types/nodeattributesvalue)</code>  
      * <span class="name">nodeDependencies</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeDependencies](/api/types/nodedependencies)</code>  
      * <span class="name">nodeOutput</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeOutput](/api/types/nodeoutput)</code>  
      * <span class="name">nodeSelector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeSelector](/api/types/nodeselector)</code>  







## `SubGraph` {#subgraph}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">object</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">edges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeList](/api/edgelist)</code> Edges of the subgraph. 
      * <span class="name">nodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeList](/api/nodelist)</code> Nodes of the subgraph. 







## `SubLayout` {#sublayout}



**Type:**  <code class="type format ">object</code>

Represents a layout to be applied to a group of nodes. This can be:



**Properties**
  * <span class="name">Custom</span> <code class="type format ">{layout: string, params: object}</code> An object containing the layout name and its parameters. 
  * <span class="name">Layout</span> <code class="type format ">Promise\<{x: number, y: number, radius?: number}[]\></code> A promise that resolves to an array of points. 
  * <span class="name">Nothing</span> <code class="type format ">null|undefined</code> (indicating not running any layout). 





## `TextAlign` {#textalign}



**Type:**  <code class="type format ">"left"|"center"</code>







## `TextContent` {#textcontent}



**Type:**  <code class="type format ">string|number|null</code>







## `TextPosition` {#textposition}



**Type:**  <code class="type format ">'right' | 'left' | 'top' | 'bottom' | 'center'</code>







## `Theme` {#theme}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">edgeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributes](/api/types/edgeattributes)</code> Default edge attributes 
  * <span class="name">hoveredEdgeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[HoverEdgeOptions](/api/types/hoveredgeoptions)</code> Hovered edge attributes (you can specify duration and easing for the animation) 
  * <span class="name">hoveredNodeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[HoverNodeOptions](/api/types/hovernodeoptions)</code> Hovered node attributes (you can specify duration and easing for the animation) 
  * <span class="name">nodeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributes](/api/types/nodeattributes)</code> Default node attributes 
  * <span class="name">selectedEdgeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EdgeAttributes](/api/types/edgeattributes)</code> Selected edge attributes 
  * <span class="name">selectedNodeAttributes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[NodeAttributes](/api/types/nodeattributes)</code> Selected node attributes 





## `TooltipOptions` {#tooltipoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">autoAdjust</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> When the mouse is at the edge of the screen, indicates if the
tooltip position should be corrected so it fits in the canvas. 
      * <span class="name">className</span><span class="tag--is-optional">(optional)</span> <code class="type format ">string</code> If specified, this class name will be added to tooltip. 
      * <span class="name">delay</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=0]</code> Delay in milliseconds before the tooltip is shown when the node is hovered. 
      * <span class="name">position</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"top"|"bottom"|"left"|"right"|"cssDefined"</code><code class="default-value">[=&quot;top&quot;]</code> Position of the tooltip relative to
the mouse. If "cssDefined" is specified, the tooltip will only be added to the graph container without
positioning it. 







## `TraversalOptions` {#traversaloptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">directed</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the graph should be considered as directed. 
  * <span class="name">onEdge</span><span class="tag--is-optional">(optional)</span> <code class="type format ">(edge: [Edge](/api/edge)\<ED, ND\>) =\> void | boolean</code> Edge callback. Called for each edge in the traversal. If you return `false`, the edge will not be followed. 
  * <span class="name">onNode</span> <code class="type format ">(node: [Node](/api/node)\<ND, ED\>) =\> void | boolean</code> Node callback. Called for each node in the traversal. If you return `true`, the traversal is stopped, understanding that you have found what you were looking for. 
  * <span class="name">root</span> <code class="type format ">[Node](/api/node)\<ND,ED\>|[NodeId](/api/types/nodeid)</code> Traversal root - the node from which the traversal should start. 





## `View` {#view}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">angle</span> <code class="type format ">number</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  
  * <span class="name">zoom</span> <code class="type format ">number</code>  





## `VirtualPropertiesOptions` {#virtualpropertiesoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">options</span><span class="tag--is-optional">(optional)</span>  
      * <span class="name">edgeDataFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edge: [Edge](/api/edge)): object</code> Indicates which data properties to add to a edge.
If unspecified, no data property will be added to any edge. 
      * <span class="name">edgeSelector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(edge: [Edge](/api/edge)): boolean</code> Indicates if the transformation should be applied
to a given edge. If unspecified, it is applied to all edges. 
      * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code>  
      * <span class="name">nodeDataFunction</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): object</code> Indicates which data properties to add to a node.
If unspecified, no data property will be added to any node. 
      * <span class="name">nodeSelector</span><span class="tag--is-optional">(optional)</span> <code class="type format ">function(node: [Node](/api/node)): boolean</code> Indicates if the transformation should be applied
to a given node. If unspecified, it is applied to all nodes. 







## `WatcherOptions` {#watcheroptions}



**Type:**  <code class="type format ">object|[PropertyPath](/api/types/propertypath)</code>

If a string or array is specified, it indicates the `path` property.



**Properties**
  * <span class="name">filter</span><span class="tag--is-optional">(optional)</span> <code class="type format ">"visible"|"all"</code><code class="default-value">[=&quot;visible&quot;]</code> Indicates which elements the watcher takes into account. If "visible" (default),
only the non-filtered elements will be taken into account. If "all", all elements will be taken into account regardless of
whether they are filtered or not. 
  * <span class="name">path</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[PropertyPath](/api/types/propertypath)</code> Path of the data property to watch. If not specified, watch the root property. 
  * <span class="name">unwindArrays</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> If `true`, array values will be treated as multiple individual values instead of one 





## `ZoomBoundaryFunction` {#zoomboundaryfunction}



**Type:**  <code class="type format ">function(params: [ZoomLevelData](/api/types/zoomleveldata)): number</code>

This type of functions is passed to the Ogma options to define how to treat
the interactive zoom level depending on the node size range, graph extent
and the canvas size.





## `ZoomInteractionOptions` {#zoominteractionoptions}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">duration</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=150]</code> Indicate the duration of a manual zoom. 
  * <span class="name">easing</span><span class="tag--is-optional">(optional)</span> <code class="type format ">[EasingFunction](/api/types/easingfunction)</code><code class="default-value">[=&quot;cubicOut&quot;]</code> Easing function to use for the zoom. 
  * <span class="name">enabled</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=true]</code> Indicates if zoom on mouse wheel should be enabled. 
  * <span class="name">hideEdgeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edge texts should be hidden when zooming manually. 
  * <span class="name">hideEdges</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the edges should be hidden when zooming manually. 
  * <span class="name">hideNodeTexts</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the node texts should be hidden when zooming manually. 
  * <span class="name">hideNodes</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the nodes should be hidden when zooming manually. 
  * <span class="name">maxValue</span><span class="tag--is-optional">(optional)</span> <code class="type format ">null|[ZoomBoundaryFunction](/api/types/zoomboundaryfunction)</code> Function indicating the maximum possible zoom. By default, it's not possible to zoom so the smallest node takes
more than 50% of the view. Set to `null` to remove the limit. 
  * <span class="name">metaKey</span><span class="tag--is-optional">(optional)</span> <code class="type format ">'alt'|'shift'|'space'</code><code class="default-value">[=&#039;ctrl/cmd&#039;]</code> Modifier button to use for zooming with the mousewheel or trackpad when `scrollToPan` is enabled. 
  * <span class="name">minValue</span><span class="tag--is-optional">(optional)</span> <code class="type format ">null|[ZoomBoundaryFunction](/api/types/zoomboundaryfunction)</code> Function indicating the minimum possible zoom. By default, it's not possible to zoom so the graph takes less
than 20% of the view. Set to `null` to remove the limit. 
  * <span class="name">modifier</span><span class="tag--is-optional">(optional)</span> <code class="type format ">number</code><code class="default-value">[=1.8]</code> Indicate the zoom multiplier on the manual zoom. 
  * <span class="name">onDoubleClick</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if zoom on double click should be enabled. 
  * <span class="name">scrollToPan</span><span class="tag--is-optional">(optional)</span> <code class="type format ">boolean</code><code class="default-value">[=false]</code> Indicates if the view should be moved when scrolling with mousewheel or trackpad 
  * <span class="name">zoom</span><span class="tag--is-optional">(optional)</span> <code class="type format ">object</code>  





## `ZoomLevelData` {#zoomleveldata}



**Type:**  <code class="type format ">object</code>





**Properties**
  * <span class="name">biggestNodeSize</span> <code class="type format ">number</code> Diameter of the biggest node (graph space) 
  * <span class="name">graphHeight</span> <code class="type format ">number</code> Height of the graph (graph space) 
  * <span class="name">graphWidth</span> <code class="type format ">number</code> Width of the graph (graph space) 
  * <span class="name">smallestNodeSize</span> <code class="type format ">number</code> Diameter of the smallest node (graph space) 
  * <span class="name">viewWidth</span> <code class="type format ">number</code> Width of the view (pixels) 





# Events {#events}

## `addEdges` {#event-addedges}



Event triggered when some edges are added to the graph.


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  



## `addGraph` {#event-addgraph}



Event triggered when a graph is added (using [addGraph](#Ogma-addGraph) method)


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `addNodes` {#event-addnodes}



Event triggered when some nodes are added to the graph.


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `animate` {#event-animate}



Triggered when the animation is called on nodes or edges.


**Properties**
  * <span class="name">duration</span> <code class="type format ">number</code> - The duration of the animation in milliseconds 
  * <span class="name">easing</span> <code class="type format ">[Easing](/api/types/easing)</code>  
  * <span class="name">elements</span> <code class="type format ">[NodeList](/api/nodelist)|[EdgeList](/api/edgelist)</code> - The nodes and edges affected by the animation 
  * <span class="name">updatesPositions</span> <code class="type format ">boolean</code> - Whether the elements are being moved 



## `beforeRemoveNodes` {#event-beforeremovenodes}



Triggers right before the nodes are removed, but they are still in the
graph and their data is accessible.


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `clearGraph` {#event-cleargraph}



Event triggered when ogma.clearGraph is called.


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `click` {#event-click}



Event triggered when the user presses and releases a mouse button without moving in between.
Also triggers as a left button when the user presses and releases their finger (on touch devices).


**Properties**
  * <span class="name">button</span> <code class="type format ">[MouseButton](/api/types/mousebutton)</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `connectNodes` {#event-connectnodes}



Triggered when two nodes are connected using the module.


**Properties**
  * <span class="name">edge</span> <code class="type format ">[Edge](/api/edge)</code>  
  * <span class="name">source</span> <code class="type format ">[Node](/api/node)</code>  
  * <span class="name">target</span> <code class="type format ">[Node](/api/node)</code>  



## `destroy` {#event-destroy}



Fired before Ogma instance is destroyed. Can be useful to remove some event listeners.


## `doubleclick` {#event-doubleclick}



Event triggered when the user presses and releases a mouse button twice without moving in between.


**Properties**
  * <span class="name">button</span> <code class="type format ">[MouseButton](/api/types/mousebutton)</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `dragEnd` {#event-dragend}



Event triggered when the user releases a mouse button, if a `onDragStart` has been emitted before.


**Properties**
  * <span class="name">button</span> <code class="type format ">[MouseButton](/api/types/mousebutton)</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `dragProgress` {#event-dragprogress}



Event triggered every time the user moves the mouse after a `onDragStart` event has been emitted,
as long as the user doesn't release the mouse.
If a node or edge was under the cursor when the first `onDragStart` event was emitted, it is passed as the `target` property.


**Properties**
  * <span class="name">button</span> <code class="type format ">[MouseButton](/api/types/mousebutton)</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `dragStart` {#event-dragstart}



Event triggered when the user presses a mouse button and then moves the mouse (without
releasing the button).


**Properties**
  * <span class="name">button</span> <code class="type format ">[MouseButton](/api/types/mousebutton)</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `drop` {#event-drop}



Triggered when the user drops an element into the Ogma container. Note that x and y arguments are Graph coordinates.


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">DragEvent</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `edgeClassAdded_MyClass` {#event-edgeclassadded_myclass}



Triggered when the specified class (MyClass) is added to some edges.


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  



## `edgeClassRemoved_MyClass` {#event-edgeclassremoved_myclass}



Triggered when the specified class (MyClass) is removed from some edges.


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  



## `edgesSelected` {#event-edgesselected}



Event triggered when edges are selected


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  



## `edgesUnSelected` {#event-edgesunselected}



Event triggered when edges are unselected


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  



## `frame` {#event-frame}



Event triggered when a frame is rendered.


## `geoDisabled` {#event-geodisabled}



Triggered when the geo mode is switched off


## `geoEnabled` {#event-geoenabled}



Triggered when the geo mode is activated


## `geoLoaded` {#event-geoloaded}



Triggered when the background map images are loaded


## `gestureEnd` {#event-gestureend}



Event triggered when the user stop touching the screen with two fingers.


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  



## `gestureProgress` {#event-gestureprogress}



Event triggered when the users moves two fingers.


**Properties**
  * <span class="name">angle</span> <code class="type format ">number</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">dx</span> <code class="type format ">number</code>  
  * <span class="name">dy</span> <code class="type format ">number</code>  
  * <span class="name">scale</span> <code class="type format ">number</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `gestureStart` {#event-gesturestart}



Event triggered when the user touch the screen with two fingers.


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  



## `idle` {#event-idle}



Triggered when the graph is idle (no more camera movements, no more layout iterations).


## `keydown` {#event-keydown}



Event triggered when the user presses the keyboard button.


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">KeyboardEvent</code>  
  * <span class="name">key</span> <code class="type format ">string</code>  
  * <span class="name">keyCode</span> <code class="type format ">number</code>  



## `keyup` {#event-keyup}



Event triggered when the user releases the keyboard button.


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">KeyboardEvent</code>  
  * <span class="name">key</span> <code class="type format ">string</code>  
  * <span class="name">keyCode</span> <code class="type format ">number</code>  



## `layoutComputed` {#event-layoutcomputed}



This event is fired after the layout algorithm has finished the calculations,
but before the positions are applied. Use it for UI interactions, because if
you would add position manipulations into the listener, they can interfere
with the layout results.


**Properties**
  * <span class="name">name</span> <code class="type format ">string</code>  



## `layoutEnd` {#event-layoutend}



Trigger the specified function when two nodes are connected using the module.


**Properties**
  * <span class="name">ids</span> <code class="type format ">Array\<[NodeId](/api/types/nodeid)\></code>  
  * <span class="name">name</span> <code class="type format ">string</code>  
  * <span class="name">positions</span> <code class="type format ">{ before: [Point](/api/types/point)[], after: [Point](/api/types/point)[]}</code>  



## `layoutStart` {#event-layoutstart}



Triggered when two nodes are connected using the module.


**Properties**
  * <span class="name">ids</span> <code class="type format ">Array\<[NodeId](/api/types/nodeid)\></code>  
  * <span class="name">name</span> <code class="type format ">string</code>  



## `mousedown` {#event-mousedown}



Event triggered when the user presses a mouse button. Also triggers as a left button when the user
presses their finger (on touch devices).


**Properties**
  * <span class="name">button</span> <code class="type format ">[MouseButton](/api/types/mousebutton)</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `mousemove` {#event-mousemove}



Event triggered when the user moves the mouse (or their finger in touch devices).


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">dx</span> <code class="type format ">number</code>  
  * <span class="name">dy</span> <code class="type format ">number</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `mouseout` {#event-mouseout}



Event triggered when a node or edge stops being hovered.


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">Event</code> - The original DOM event. 
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code> - The source of the event. 
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code> - The target of the event. 
  * <span class="name">x</span> <code class="type format ">number</code> - The x coordinate of the mouse. 
  * <span class="name">y</span> <code class="type format ">number</code> - The y coordinate of the mouse. 



## `mouseover` {#event-mouseover}



Event triggered when a node or edge is hovered.


**Properties**
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `mouseup` {#event-mouseup}



Event triggered when the user releases a mouse button. Also triggers as a left button when the user
releases their finger (on touch devices).


**Properties**
  * <span class="name">button</span> <code class="type format ">[MouseButton](/api/types/mousebutton)</code>  
  * <span class="name">domEvent</span> <code class="type format ">Event</code>  
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code>  
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code>  
  * <span class="name">x</span> <code class="type format ">number</code>  
  * <span class="name">y</span> <code class="type format ">number</code>  



## `mousewheel` {#event-mousewheel}



Event triggered when the user uses the mouse wheel.


**Properties**
  * <span class="name">delta</span> <code class="type format ">number</code> - The delta of the mouse wheel. 
  * <span class="name">domEvent</span> <code class="type format ">Event</code> - The original DOM event. 
  * <span class="name">source</span> <code class="type format ">[InputSource](/api/types/inputsource)</code> - The source of the event. 
  * <span class="name">target</span> <code class="type format ">[InputTarget](/api/types/inputtarget)</code> - The target of the event. 
  * <span class="name">x</span> <code class="type format ">number</code> - The x coordinate of the mouse. 
  * <span class="name">y</span> <code class="type format ">number</code> - The y coordinate of the mouse. 



## `move` {#event-move}



Event triggered when camera is moving.


## `nodeClassAdded_MyClass` {#event-nodeclassadded_myclass}



Triggered when the specified class (MyClass) is added to some nodes.


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `nodeClassRemoved_MyClass` {#event-nodeclassremoved_myclass}



Triggered when the specified class (MyClass) is removed from some nodes.


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `nodesDragEnd` {#event-nodesdragend}



Triggered when the user stop dragging some nodes.


**Properties**
  * <span class="name">end</span> <code class="type format ">Array\<{x: number, y: number}\></code>  
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  
  * <span class="name">start</span> <code class="type format ">Array\<{x: number, y: number}\></code>  



## `nodesDragProgress` {#event-nodesdragprogress}



Triggered when the user drags some nodes.


**Properties**
  * <span class="name">dx</span> <code class="type format ">number</code>  
  * <span class="name">dy</span> <code class="type format ">number</code>  
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `nodesDragStart` {#event-nodesdragstart}



Triggered when the user starts to drag some nodes.


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `nodesSelected` {#event-nodesselected}



Event triggered when nodes are selected


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `nodesUnselected` {#event-nodesunselected}



Event triggered when nodes are unselected


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `refreshStyleRule` {#event-refreshstylerule}



Property {StyleRule} rule Rule that has been applied


## `removeEdges` {#event-removeedges}



Event triggered when some edges are removed from the graph.


**Properties**
  * <span class="name">edges</span> <code class="type format ">[EdgeList](/api/edgelist)</code>  



## `removeNodes` {#event-removenodes}



Event triggered when some nodes are removed from the graph.


**Properties**
  * <span class="name">nodes</span> <code class="type format ">[NodeList](/api/nodelist)</code>  



## `rendererStateChange` {#event-rendererstatechange}



Triggered when the renderer is requested, successfully initialized or encounters an error.


**Properties**
  * <span class="name">code</span> <code class="type format ">[RendererErrorCode](/api/types/renderererrorcode)</code>  
  * <span class="name">message</span> <code class="type format ">string</code>  
  * <span class="name">state</span> <code class="type format ">[RendererState](/api/types/rendererstate)</code>  
  * <span class="name">type</span> <code class="type format ">[RendererType](/api/types/renderertype)</code>  



## `resize` {#event-resize}






**Properties**
  * <span class="name">difHeigh</span> <code class="type format ">number</code>  
  * <span class="name">difWidth</span> <code class="type format ">number</code>  
  * <span class="name">height,</span> <code class="type format ">number</code>  
  * <span class="name">prevHeight</span> <code class="type format ">number</code>  
  * <span class="name">prevWidth</span> <code class="type format ">number</code>  
  * <span class="name">width</span> <code class="type format ">number</code>  



## `rotate` {#event-rotate}



Event triggered when camera is moving.


## `tooltipHide` {#event-tooltiphide}



Event triggered when a tooltip is hidden.


**Properties**
  * <span class="name">tooltip</span> <code class="type format ">HTMLElement</code>  



## `tooltipShow` {#event-tooltipshow}



Event triggered when a tooltip is shown.


**Properties**
  * <span class="name">tooltip</span> <code class="type format ">HTMLElement</code>  



## `transformationDestroyed` {#event-transformationdestroyed}



Triggered when a transformation is destroyed


**Properties**
  * <span class="name">target</span> <code class="type format ">[Transformation](/api/transformation)</code>  



## `transformationDisabled` {#event-transformationdisabled}



Triggered when a transformation is disabled


**Properties**
  * <span class="name">target</span> <code class="type format ">[Transformation](/api/transformation)</code>  



## `transformationEnabled` {#event-transformationenabled}



Triggered when a transformation is activated


**Properties**
  * <span class="name">target</span> <code class="type format ">[Transformation](/api/transformation)</code>  



## `transformationRefresh` {#event-transformationrefresh}



Triggered when a transformation is refreshed


**Properties**
  * <span class="name">target</span> <code class="type format ">[Transformation](/api/transformation)</code>  



## `transformationSetIndex` {#event-transformationsetindex}



Triggered when a transformation index is set


**Properties**
  * <span class="name">target</span> <code class="type format ">[Transformation](/api/transformation)</code>  



## `updateEdgeData` {#event-updateedgedata}






**Properties**
  * <span class="name">changes</span> <code class="type format ">changes: Array\<{property: [PropertyPath](/api/types/propertypath), edges: [EdgeList](/api/edgelist), previousValues: Array\<any\>, newValues: Array\<any\>}\></code>  



## `updateNodeData` {#event-updatenodedata}



Trigger the specified function when the data of some nodes is updated.


**Properties**
  * <span class="name">changes</span> <code class="type format ">Array\<{property: [PropertyPath](/api/types/propertypath), nodes: [NodeList](/api/nodelist), previousValues: Array\<any\>, newValues: Array\<any\>}\></code>  



## `viewChanged` {#event-viewchanged}



Event triggered when a camera movement (zoom, panning, rotation) is finished.


## `viewExportStart` {#event-viewexportstart}



Event triggered when exporting the graph in png, jpg or svg.


**Properties**
  * <span class="name">camera</span> <code class="type format ">Camera</code>  



## `zoomStart` {#event-zoomstart}



Triggered when camera starts zoom.


**Properties**
  * <span class="name"></span>  
  * <span class="name">duration</span> <code class="type format ">number</code>  
  * <span class="name">easing</span> <code class="type format ">[Easing](/api/types/easing)</code>  
  * <span class="name">endZoom</span> <code class="type format ">number</code> Target zoom leve 
  * <span class="name">startZoom</span> <code class="type format ">number</code> Zoom level at the start of the zoom.