Ogma
- constructor([parameters])
Arguments
- parameters (optional)
(object)
- container (optional)
(string|HTMLElement)
:HTML element to use as a container. If a string is specified, the element will be lookup with
document.getElementById()
. - graph (optional)
(RawGraph)
:Graph to initialize Ogma with
- imgCrossOrigin (optional)
(CrossOriginValue)
[= "anonymous"]
:Indicates the value of the
crossOrigin
field for DOM images. This is an alias forogma.setOptions({imgCrossOrigin: value})
- options (optional)
(Options)
:Settings for all the modules.
- renderer (optional)
("webgl"|"canvas"|"svg"|null)
[= "webgl"]
: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 forogma.setOptions({renderer: value})
- container (optional)
- parameters (optional)
- ogma.addEdge(edge)
Add the specified edge to the graph
Arguments
- edge
(RawEdge)
:Edge to add.
Returns
-
Edge
:Edge that has just been added.
- edge
- ogma.addEdges(edges[, options])
Add the specified edges to the graph
Arguments
- edges
(Array<RawEdge>)
- options (optional)
(object)
- batchSize (optional)
(number)
: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.
- batchSize (optional)
Returns
-
Promise<EdgeList>
:Edges added to the graph.
- edges
- ogma.addGraph(graph[, options])
Add the specified nodes and edges to the graph.
Arguments
- graph
(RawGraph)
- options (optional)
(object)
- batchSize (optional)
(number)
: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. - locate (optional)
(LocateOptions)
:Indicates the options for the camera movement.
- batchSize (optional)
Returns
- graph
- ogma.addNode(node)
Add the specified node to the graph
Arguments
- node
(RawNode)
:Node to add.
Returns
-
Node
:Node that has just been added.
Examples
ogma.addNode({id: 'n0', attributes: {color: 'green'}});
- node
- ogma.addNodes(nodes[, options])
Add the specified nodes to the graph. Ignores nodes that have the same id as a node in the graph.
Arguments
- nodes
(Array<RawNode>)
- options (optional)
(object)
- batchSize (optional)
(number)
: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.
- batchSize (optional)
Returns
-
Promise<NodeList>
:Nodes added to the graph.
Examples
// Simple usage ogma.addNodes([{id: 0}, {id: 1}]).then(function (nodes) { console.log('Nodes ' + nodes.getId() + ' have been added to the graph.'); }); // Adding nodes 1000 by 1000 ogma.addNodes(veryLargeArray, {batchSize: 1000}).then(function (nodes) { console.log('Nodes ' + nodes.getId() + ' have been added to the graph.'); });
- nodes
- ogma.clearGraph()
Removes all the nodes and edges from the graph.
- ogma.clearSelection()
Clear the selection.
Examples
ogma.clearSelection();
- ogma.createEdgeList()
Returns a new empty EdgeList.
Returns
- ogma.createNodeList()
Returns a new empty NodeList.
Returns
- 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
anddocument
's event listeners added by Ogma will be removed. AllsetTimeout
created by Ogma will be cleared.Examples
var ogma = new Ogma({ container: 'graph-container' ); ogma.setGraph({ nodes: [{id: 0}, {id: 1}], edges: [{id: 0, source: 0, target: 1}] }); ogma.destroy();
- ogma.getConnectedComponentByNode(node[, options])
Arguments
- node
(Node|NodeId)
- options (optional)
(object)
- filter (optional)
(object)
[= 'visible']
- returnIds (optional)
(boolean)
[= false]
:Return node ids instead of Nodes
- filter (optional)
Returns
- node
- ogma.getConnectedComponents([options])
Returns weakly connected components of the graph.
Arguments
- options (optional)
(object)
- filter (optional)
(object)
[= 'visible']
- returnIds (optional)
(boolean)
[= false]
:Return node ids instead of Nodes
- filter (optional)
Returns
-
Array<NodeList>
- options (optional)
- ogma.getContainer()
Returns the DOM element used by this Ogma instance.
Returns
-
HTMLElement|null
-
- ogma.getEdge(edgeId)
Return the specified edge, or
undefined
if it doesn't exist.Arguments
- edgeId
(EdgeId)
Returns
-
Edge|undefined
- edgeId
- ogma.getEdges([selector])
Return the specified edges.
Arguments
- selector (optional)
(Array<EdgeId>|Filter|Array<Edge>)
[= "visible"]
: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
- selector (optional)
- ogma.getHoveredElement()
Returns the element that is currently hovered.
Returns
Examples
var element = ogma.getHoveredElement(); if (!element) { console.log('No element is hovered.'); } else if (element.isNode) { console.log('Node ' + element.getId() + ' is hovered.'); } else { console.log('Edge ' + element.getId() + ' is hovered.'); }
- ogma.getNode(nodeId)
Return the specified node, or
undefined
if it doesn't exist.Arguments
- nodeId
(NodeId)
Returns
-
Node|undefined
- nodeId
- ogma.getNodes([selector])
Return the specified nodes.
Arguments
- selector (optional)
(Array<NodeId>|Filter|Array<Node>)
[= "visible"]
: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
Examples
// Returns all visible nodes ogma.getNodes();
// Returns a specific set of nodes ogma.getNodes(['n0', 'n1', 'n3']);
// If you happen to need an empty NodeList you can do ogma.getNodes([]);
- selector (optional)
- ogma.getNonSelectedEdges()
Returns all edges that are not selected.
Returns
- ogma.getNonSelectedNodes()
Returns all nodes that are not selected.
Returns
- ogma.getOptions()
Get options of the Ogma instance.
Returns
- ogma.getPointerInformation()
Returns information on the cursor.
Returns
- ogma.getSelectedEdges()
Returns all edges that are selected.
Returns
- ogma.getSelectedNodes()
Returns all nodes that are selected.
Returns
Examples
console.log('Nodes selected: ' + ogma.getSelectedNodes().getId());
- 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.
Examples
ogma.reloadFonts();
- ogma.removeEdge(edge)
Remove the specified edge from the graph.
Arguments
- ogma.removeEdges(edges)
Remove the specified edges from the graph
Arguments
Returns
-
Promise<void>
-
- ogma.removeNode(node)
Remove the specified node from the graph.
Arguments
- ogma.removeNodes(nodes)
Remove the specified nodes from the graph
Arguments
Returns
-
Promise<void>
-
- ogma.reset()
Reset Ogma to its initial state. Doing
ogma.reset();
has the same effect asogma.destroy(); ogma = new Ogma(params);
, withparams
being the parameters used the first time Ogma was instantiated. - ogma.setContainer(elt)
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 isnull
, then Ogma is removed from the current container.Arguments
- elt
(HTMLElement|string|null)
Examples
var container = document.createElement('div'); document.body.appendChild(container); ogma.setContainer(container);
- elt
- ogma.setGraph(graph[, options])
Clear the graph, then add the specified nodes and edges to the graph.
Arguments
- graph
(RawGraph)
- options (optional)
(object)
- batchSize (optional)
(number)
: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.
- batchSize (optional)
Returns
- graph
- ogma.setOptions(options)
Update the options of Ogma.
Arguments
- options
(Options)
- options
- ogma.addEdgeFilter(options) deprecated
Alias for
ogma.transformations.addEdgeFilter()
Arguments
- options
(object|function(edge: Edge): boolean)
- criteria
(function(edge: Edge): boolean)
- duration (optional)
(number)
[= 0]
- criteria
Returns
- options
- ogma.addNodeFilter(options) deprecated
Alias for
ogma.transformations.addNodeFilter()
Arguments
- options
(object|function(node: Node): boolean)
- criteria
(function(node: Node): boolean)
- duration (optional)
(number)
[= 0]
- criteria
Returns
- options
- ogma.clearEdgeFilters() deprecated
Remove all edge filters.
Same as
var promise = Promise.all(ogma.transformations.getList().filter(function(transformation) { return transformation.getName() === 'edge-filter'; }).map(function(transformation) { return transformation.destroy(); }));
Returns
-
Promise<void>
-
- ogma.clearNodeFilters() deprecated
Remove all node filters.
Same as
var promise = Promise.all(ogma.transformations.getList().filter(function(transformation) { return transformation.getName() === 'node-filter'; }).map(function(transformation) { return transformation.destroy(); }));
Returns
-
Promise<void>
-
- ogma.createClass(className[, options]) deprecated
Alias for
ogma.styles.createClass
.Arguments
- className
(string)
- options (optional)
(object)
- after (optional)
(string)
:If specified, the class index will be set so it's exactly one more than the specified class
- edgeAttributes (optional)
(EdgeAttributesValue)
- nodeAttributes (optional)
(NodeAttributesValue)
- after (optional)
Returns
- className
- ogma.getEdgeFilters() deprecated
Retrieve all edge filters.
Same as
var edgeFilters = ogma.transformations.getList().filter(function(transformation) { return transformation.getName() === 'edge-filter'; });
Returns
-
Array<Transformation>
-
- ogma.getEdgesByClassName(className[, filter]) deprecated
Returns the edges that have the specified class. Same effect as
StyleClass.update
.Arguments
- className
(string)
- filter (optional)
(Filter)
:filter to apply to edges
Returns
- className
- ogma.getNodeFilters() deprecated
Retrieve all node filters.
Same as
var nodeFilters = ogma.transformations.getList().filter(function(transformation) { return transformation.getName() === 'node-filter'; });
Returns
-
Array<Transformation>
-
- ogma.getNodesByClassName(className[, filter]) deprecated
Returns the nodes that have the specified class. Same effect as
StyleClass.update
.Arguments
- className
(string)
- filter (optional)
(Filter)
:filter to apply to nodes
Returns
- className
- ogma.updateClass(className[, options]) deprecated
Update the attributes associated with the specified class. Same effect as
StyleClass.update
.Arguments
- className
(string)
- options (optional)
(object)
- edgeAttributes (optional)
(EdgeAttributesValue)
- nodeAttributes (optional)
(NodeAttributesValue)
- edgeAttributes (optional)
- className
Ogma.algorithms
- ogma.algorithms.detectCycle([options])
Returns the first cycle found as a NodeList.
Arguments
- options (optional)
(object)
Returns
-
NodeList|null
- options (optional)
- ogma.algorithms.getAllSimpleCycles([options])
Implements Tarjan's algorithm of finding all simple cycles in the directed graph.
Arguments
- options (optional)
(object)
Returns
-
Array<NodeList>
- options (optional)
- ogma.algorithms.hasCycle([options])
Checks whether the given graph has cycles in it.
Arguments
- options (optional)
(object)
Returns
-
Boolean
- options (optional)
- ogma.algorithms.minimumSpanningTree([nodes][, edges][, edgeCostFunction])
Kruskal's minimum-spanning-tree algorithm. It finds the edge set for the graph of the least possible edge cost that connects all the nodes of the graph.
Arguments
- nodes (optional)
(NodeList)
:Nodes of the subgraph to analyze. By default uses all the visible nodes.
- edges (optional)
(EdgeList)
:Edges of the subgraph to analyze. By default all the visible edges.
- edgeCostFunction (optional)
(function(edge: Edge):number)
:Function to get the weight of the edge, for instance it can take it from the data fields.
Returns
Examples
ogma.algorithms.minimumSpanningTree({ edgeCostFunction: function(edge) { return edge.getData('weight'); } }).then(function(trees) { trees.forEach(function(tree) { tree.nodes.setSelected(true); tree.edges.setSelected(true); }); });
- nodes (optional)
- ogma.algorithms.shortestPath(options)
Compute the shortest path between the specified source and target nodes.
Arguments
- options
(object)
- directed (optional)
(boolean)
[= false]
:Indicates if the graph should be considered as directed.
- edgeCostFunction (optional)
(function(edge: Edge): number)
:Function retrieving the cost of an edge. By default, returns 1 for all edges.
- filter (optional)
(Filter)
[= "visible"]
:Indicates on which elements to perform the algorithm.
- heuristicFunction (optional)
(function(source: Node, target: Node): number)
:Function retrieving an estimation of the distance between two nodes. By default no heuristic is used.
- source
(Node|NodeId)
- target
(Node|NodeId)
- directed (optional)
Returns
-
Promise<null|{nodes: NodeList, edges: EdgeList}>
:Shortest path.
nodes
has exactly one more node thanedges
has edges. If there is no path, returnsnull
.
Examples
ogma.algorithms.shortestPath({ source: 'nodeId1', target: 'nodeId2', edgeCostFunction: function(edge) { return edge.getData('cost'); } }).then(function(path) { if (path) { path.nodes.setAttributes({color: 'green'}); path.edges.setAttributes({color: 'green'}); } });
- options
Ogma.events
- ogma.events.onBeforeEdgesRemoved(listener)
Triggers right before the edges are removed, but they are still in the graph and their data is accessible.
Arguments
- listener
(function(evt: {edges: EdgeList}))
- listener
- ogma.events.onBeforeNodesRemoved(listener)
Triggers right before the nodes are removed, but they are still in the graph and their data is accessible.
Arguments
- listener
(function (evt: {nodes: NodeList}))
- listener
- ogma.events.onClick(listener)
Triggers the specified function 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).
Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, button: MouseButton, source: InputSource, domEvent: Event}))
- listener
- ogma.events.onDoubleClick(listener)
Triggers the specified function when the user presses and releases a mouse button two times without moving the mouse. Also triggers as a left button when the user presses and releases their finger two times (on touch devices).
Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, button: MouseButton, source: InputSource, domEvent: Event}))
- listener
- ogma.events.onDragEnd(listener)
Triggers the specified function when the user releases a mouse button, if a
onDragStart
has been emitted before.Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, button: MouseButton, source: InputSource, domEvent: Event}))
:If a node or edge was under the cursor when the first
onDragStart
event was emitted, it is passed as thetarget
property.
- listener
- ogma.events.onDragProgress(listener)
Triggers the specified function every time the user moves the mouse after a
onDragStart
event has been emitted, as long as the user doesn't release the mouse.Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, button: MouseButton, source: InputSource, domEvent: Event}))
:If a node or edge was under the cursor when the first
onDragStart
event was emitted, it is passed as thetarget
property.
- listener
- ogma.events.onDragStart(listener)
Triggers the specified function when the user presses a mouse button and then moves the mouse (without releasing the button).
Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, button: MouseButton, source: InputSource, domEvent: Event}))
- listener
- ogma.events.onDrop(listener)
Triggered when the user drops an element into the Ogma container. Note that x and y arguments are Graph coordinates.
Arguments
- listener
(function(evt: {domEvent: Event, x: number, y: number}))
Examples
ogma.events.onDrop(function ({domEvent, x, y}) { var id = domEvent.dataTransfer.getData('type'); var url = domEvent.dataTransfer.getData('image'); // tell the browser to copy the original element here domEvent.dataTransfer.dropEffect = "copy"; // create a node on the graph to the exact x and y of the drop ogma.addNode({id: id, attributes: {x: x, y: y, image: url}}); });
- listener
- ogma.events.onEdgeDataChange(listener)
Trigger the specified function when the data of some nodes is updated.
Arguments
- listener
(function(evt: {changes: Array<{property: PropertyPath, edges: EdgeList, previousValues: Array<any>, newValues: Array<any>}>}))
- listener
- ogma.events.onEdgesAdded(listener)
Triggers the specified function when some edges are added to the graph.
Arguments
- listener
(function (evt: {edges: EdgeList}))
- listener
- ogma.events.onEdgesClassAdded(className, listener)
Triggers the specified function when the specified class is added to some edges.
Arguments
- className
(string)
- listener
(function(evt: {edges: EdgeList}))
- className
- ogma.events.onEdgesClassRemoved(className, listener)
Triggers the specified function when the specified class is removed from some edges.
Arguments
- className
(string)
- listener
(function(evt: {edges: EdgeList}))
- className
- ogma.events.onEdgesRemoved(listener)
Triggers the specified function when some edges are removed from the graph.
Arguments
- listener
(function (evt: {edges: EdgeList}))
- listener
- ogma.events.onEdgesSelected(listener)
Triggers the specified function when some edges are selected.
Arguments
- listener
(function(evt: {edges: EdgeList}))
Examples
ogma.events.onEdgesSelected(function (evt) { console.log('Edges ' + evt.edges.getId() + ' have just been selected.'); });
- listener
- ogma.events.onEdgesUnselected(listener)
Arguments
- listener
(function(evt: {edges: EdgeList}))
Examples
ogma.events.onEdgesUnselected(function (evt) { console.log('Edges ' + evt.edges.getId() + ' have just been unselected.'); });
- listener
- ogma.events.onGeoModeDisabled(listener)
Triggered when the geo mode is switched off
Arguments
- listener
(function())
Examples
ogma.events.onGeoModeDisabled(function() { console.log('geo mode is off'); }); ogma.geo.disable(); // 'geo mode is off'
- listener
- ogma.events.onGeoModeEnabled(listener)
Triggered when the geo mode is activated
Arguments
- listener
(function())
Examples
ogma.events.onGeoModeEnabled(function() { console.log('geo mode is on'); }); ogma.geo.enable(); // 'geo mode is on'
- listener
- ogma.events.onGeoModeLoaded(listener)
Triggered when the background map images are loaded
Arguments
- listener
(function())
Examples
ogma.events.onGeoModeLoaded(function() { console.log('the base map is loaded'); }); ogma.geo.enable(); // 'the base map is loaded'
- listener
- ogma.events.onGestureEnd(listener)
Triggers the specified function when the user stop touching the screen with two fingers.
Arguments
- listener
(function(evt: {domEvent: Event}))
- listener
- ogma.events.onGestureProgress(listener)
Triggers the specified function when the users moves two fingers.
Arguments
- listener
(function(evt: {x: number, y: number, scale: number, angle: number, dx: number, dy: number, domEvent: Event}))
- listener
- ogma.events.onGestureStart(listener)
Triggers the specified function when the user touch the screen with two fingers.
Arguments
- listener
(function(evt: {domEvent: Event}))
- listener
- ogma.events.onHover(listener)
Triggers the specified function when a node or edge is hovered.
Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, domEvent: Event}))
- listener
- ogma.events.onKeyPress(key, listener)
Triggers the specified function when the specified key is pressed.
Arguments
- key
(KeyName|KeyCode|Array<KeyName|KeyCode>|string)
:Key to listen to. Multiple keys can be specified; in that case the function is triggered when the last key of the list is pressed, only if all the other keys are pressed.
- listener
(function(evt: {domEvent: Event}))
Examples
// By specifying the key as a string (key identifier) ogma.events.onKeyPress('b', function () { console.log('B was pressed.'); }); // By specifying the JavaScript key code ogma.events.onKeyPress(66, function () { console.log('B was pressed.'); }); // By specifying a space-separated list of key identifiers ogma.events.onKeyPress('ctrl b', function () { console.log('CTRL + B pressed.'); }); // By specifying an array of key identifiers ogma.events.onKeyPress(['ctrl', 'b'], function () { console.log('CTRL + B pressed.'); }); // By specifying an array of JavaScript codes ogma.events.onKeyPress([17, 66], function () { console.log('CTRL + B pressed.'); });
- key
- ogma.events.onLayoutComplete(listener)
Arguments
- listener
(function(evt: { name: string, ids: Array<NodeId>, positions: { before: Array<{x: number, y: number}>, after: Array<{x: number, y: number}>}}))
Examples
ogma.events.onLayoutComplete(function(evt) { console.log('Layout ', evt.name, 'worked on nodes', evt.ids.join(',')); }); ogma.layouts.forceLink();
- listener
- ogma.events.onLayoutComputed(listener)
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.
Arguments
- listener
(function(payload: { name: string }))
Examples
ogma.events.onLayoutStart(function(evt) { showProgressBar(evt.ids); }); // hide the progress bar before the position animation starts ogma.events.onLayoutComplete(function() { hideProgressBar(); });
- listener
- ogma.events.onLayoutStart(listener)
Arguments
- listener
(function(evt: { name: string, ids: Array<NodeId>}))
Examples
ogma.events.onLayoutStart(function(evt) { console.log('Running layout ', evt.name, 'on nodes', evt.ids.join(',')); }); ogma.layouts.forceLink();
- listener
- ogma.events.onMouseButtonDown(listener)
Triggers the specified function when the user presses a mouse button. Also triggers as a left button when the user presses their finger (on touch devices).
Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, button: MouseButton, source: InputSource, domEvent: Event}))
- listener
- ogma.events.onMouseButtonUp(listener)
Triggers the specified function when the user releases a mouse button. Also triggers as a left button when the user releases their finger (on touch devices).
Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, button: MouseButton, source: InputSource, domEvent: Event}))
- listener
- ogma.events.onMouseMove(listener)
Triggers the specified function when the user moves the mouse (or their finger in touch devices).
Arguments
- listener
(function(evt: {x: number, y: number, dx: number, dy: number, source: InputSource, domEvent: Event}))
- listener
- ogma.events.onMouseWheel(listener)
Triggers the specified function when the user uses the mouse wheel.
Arguments
- listener
(function(evt: {x: number, y: number, delta: number, domEvent: Event}))
:delta
is a number between -1 and 1.
- listener
- ogma.events.onNodeDataChange(listener)
Trigger the specified function when the data of some nodes is updated.
Arguments
- listener
(function(evt: {changes: Array<{property: PropertyPath, nodes: NodeList, previousValues: Array<any>, newValues: Array<any>}>}))
Examples
ogma.events.onNodeDataChange(function (evt) { evt.changes.forEach(function (change) { console.log('Property ' + change.property.join('.') + ' changed for nodes ' + change.nodes.getId() + ':'); change.nodes.forEach(function (node, index) { console.log('Previous value for node ' + node.getId() + ' was ' + change.previousValues[index]); console.log('New value for node ' + node.getId() + ' is ' + change.newValues[index]); }); }); });
- listener
- ogma.events.onNodeDragEnd(listener)
Triggered when the user stop dragging some nodes.
Arguments
- listener
(function(evt: {nodes: NodeList, start: Array<{x: number, y: number}>, end: Array<{x: number, y: number}>}))
Examples
ogma.events.onNodeDragStart(function (evt) { evt.nodes.forEach(function(node, index) { console.log('User dragged node from ' + evt.start[index] + ' to ' + evt.end[index]); }); });
- listener
- ogma.events.onNodeDragProgress(listener)
Triggered when the user drags some nodes.
Arguments
- listener
(function(evt: {nodes: NodeList, dx: number, dy: number }))
Examples
ogma.events.onNodeDragStart(function (evt) { console.log('User dragged nodes ' + evt.nodes.getId()); });
- listener
- ogma.events.onNodeDragStart(listener)
Triggered when the user starts to drag some nodes.
Arguments
- listener
(function(evt: {nodes: NodeList}))
Examples
ogma.events.onNodeDragStart(function (evt) { console.log('User started to drag nodes ' + evt.nodes.getId()); });
- listener
- ogma.events.onNodesAdded(listener)
Triggers the specified function when some nodes are added to the graph.
Arguments
- listener
(function (evt: {nodes: NodeList}))
- listener
- ogma.events.onNodesClassAdded(className, listener)
Triggers the specified function when the specified class is added to some nodes.
Arguments
- className
(string)
- listener
(function(evt: {nodes: NodeList}))
Examples
ogma.createClass('myCustomClass', {nodeAttributes: {color: 'green'}}); ogma.events.onNodesClassAdded('myCustomClass', function (evt) { console.log('Nodes ' + evt.nodes.getId() + ' now have the class "myCustomClass".'); }); ogma.getNodes(['n0', 'n1']).addClass('myCustomClass');
- className
- ogma.events.onNodesClassRemoved(className, listener)
Triggers the specified function when the specified class is removed from some nodes.
Arguments
- className
(string)
- listener
(function(evt: {nodes: NodeList}))
- className
- ogma.events.onNodesConnected(listener)
Trigger the specified function when two nodes are connected using the module.
Arguments
Examples
ogma.events.onNodesConnected(function(evt) { evt.source.setAttributes({ text: 'Source'}); evt.target.setAttributes({ text: 'Target'}); evt.edge.setAttributes({ text: 'Connection'}); });
- ogma.events.onNodesRemoved(listener)
Triggers the specified function when some nodes are removed from the graph.
Arguments
- listener
(function (evt: {nodes: NodeList}))
- listener
- ogma.events.onNodesSelected(listener)
Triggers the specified function when some nodes are selected.
Arguments
- listener
(function(evt: {nodes: NodeList}))
Examples
ogma.events.onNodesSelected(function (evt) { console.log('Nodes ' + evt.nodes.getId() + ' have just been selected.'); });
- listener
- ogma.events.onNodesUnselected(listener)
Triggers the specified function when some nodes are removed from the selection.
Arguments
- listener
(function(evt: {nodes: NodeList}))
Examples
ogma.events.onNodesUnselected(function (evt) { console.log('Nodes ' + evt.nodes.getId() + ' have just been unselected.'); });
- listener
- ogma.events.onRendererStateChange(listener)
Triggered when the renderer is requested, successfully initialized or encounters an error.
Arguments
- listener
(function (evt: {type: RendererType, state: RendererState, code: RendererErrorCode, message: string}))
- listener
- ogma.events.onTooltipHidden(listener)
Triggers the specified function when a tooltip is hidden.
Arguments
- listener
(function (evt: {tooltip: HTMLElement}))
- listener
- ogma.events.onTooltipShown(listener)
Triggers the specified function when a tooltip is shown.
Arguments
- listener
(function (evt: {tooltip: HTMLElement}))
Examples
ogma.events.onTooltipShown(function (evt) { console.log('Tooltip shown:', evt.tooltip.innerHTML); });
- listener
- ogma.events.onUnhover(listener)
Triggers the specified function when a node or edge stops being hovered.
Arguments
- listener
(function(evt: {x: number, y: number, target: InputTarget, domEvent: Event}))
- listener
- ogma.events.onViewChanged(listener)
Triggers the specified function when a camera movement (zoom, panning, rotation) is finished.
Arguments
- listener
(function())
Examples
ogma.events.onViewChanged(function() { console.log('zoomed and re-centered'); }); ogma.view.setCenter({ x: 100, y: 100 }); ogma.view.setZoom(5);
- listener
- ogma.events.onZoomProgress(listener)
Triggers the specified function when zoom animation is in progress
Arguments
- listener
(function())
- listener
- ogma.events.removeListener(listener)
Remove a listener from all events it was bound to.
Arguments
- listener
(function)
Examples
var listener = function (evt) { console.log(evt.nodes.getId() + ' were selected.'); } ogma.events.onNodesSelected(listener); ogma.events.removeListener(listener);
- listener
Ogma.export
- ogma.export.csv(parameters)
Arguments
- parameters
(object|"nodes"|"edges")
- dataProperties (optional)
(Array<PropertyPath>)
:Data properties to export. If not specified, exports all data properties.
- download (optional)
(boolean)
[= true]
:If true, the user will be prompted a modal window so he can download the exported graph.
- edgeData (optional)
(function (data: any): any)
:Given an edge data in input, must return the object to export as data. By default export the whole edge data untouched.
- edges (optional)
(EdgeCollection)
:Edges to export. By default export all the edges (if
what
is"edges"
). - filename (optional)
(string)
[= "graph.csv"]
:If
download
is true, the default name for the downloaded file. - filter (optional)
(Filter)
[= "visible"]
:Indicates what elements to export.
- nodeData (optional)
(function (data: any): any)
:Given a node data in input, must return the object to export as data. By default export the whole node data untouched.
- nodes (optional)
(NodeCollection)
:Nodes to export. By default export all the nodes (if
what
is"nodes"
). - separator (optional)
(string)
[= ","]
:Column separator
- textSeparator (optional)
('"'|"'")
[= '"']
:String used to surround strings. Can only be
"
or'
. - what
("nodes"|"edges")
:Indicates if nodes or edges should be exported.
- dataProperties (optional)
Returns
-
Promise<string>
Examples
// export only nodes with higher degree console.log(ogma.getNode('n2').getData()); // { properties: { foo: 1, bar: 2 } } ogma.export.csv({ nodes: ogma.getNodes(function(node) { return node.getDegree() > 2; }), dataProperties: ['customerProperties', ['a', 'single', 'nested', 'property'], 'another.nested.property', ['property.containing.dots']], download: false, what: 'nodes' }).then(function(csv) { console.log(csv); // "id","foo","bar" // "0","1","2" })
- parameters
- ogma.export.gexf([parameters])
Arguments
- parameters (optional)
(object)
- creator (optional)
(string)
:Name of the creator, that will be specified in the output file
- description (optional)
(string)
:Description of the graph, that will be specified in the output file
- download (optional)
(boolean)
[= true]
:If true, the user will be prompted a modal window so he can download the exported graph.
- edgeData (optional)
(function (data: any): any)
:Given an edge data in input, must return the object to export as data. By default export the whole edge data untouched.
- edges (optional)
(EdgeCollection)
:Edges to export. By default export all the edges.
- filename (optional)
(string)
[= "graph.gexf"]
:If
download
is true, the default name for the downloaded file. - filter (optional)
(Filter)
[= "visible"]
:Indicates what elements to export.
- nodeData (optional)
(function (data: any): any)
:Given a node data in input, must return the object to export as data. By default export the whole node data untouched.
- nodes (optional)
(NodeCollection)
:Nodes to export. By default export all the nodes.
- styles (optional)
("all"|"none"|"original")
[= "all"]
:Indicates what styles (color, shape, size, text) should be exported:
'all'
for what is visually displayed,'none'
for no style and'original'
for the values provided at initialization.
- creator (optional)
Returns
-
Promise<string>
Examples
ogma.export.gexf({ creator: 'ogma' }).then(function() { console.log('graph was saved in graph.gexf'); });
- parameters (optional)
- ogma.export.gif([options])
Arguments
- options (optional)
(ImageExportOptions)
Returns
-
Promise<string>
:The argument of the Promise is the data url of the output image
Examples
// will export graph as a gif with text watermark over it // and put it at the bottom of the page ogma.exports.tiff({ download: false, textWatermark: { content: 'classified' } }).then(function(base64) { var img = new Image(); img.src = base64; document.body.appendChild(img); });
- options (optional)
- ogma.export.graphml([parameters])
Arguments
- parameters (optional)
(object)
- directedEdges (optional)
(boolean)
[= true]
:Indicates in the output file if the edges are directed or not
- download (optional)
(boolean)
[= true]
:If true, the user will be prompted a modal window so he can download the exported graph.
- edgeData (optional)
(function (data: any): any)
:Given an edge data in input, must return the object to export as data. By default export the whole edge data untouched.
- edges (optional)
(EdgeCollection)
:Edges to export. By default export all the edges.
- filename (optional)
(string)
[= "graph.graphml"]
:If
download
is true, the default name for the downloaded file. - filter (optional)
(Filter)
[= "visible"]
:Indicates what elements to export.
- graphId (optional)
(string)
[= "G"]
:Id of the graph to write in the output file
- nodeData (optional)
(function (data: any): any)
:Given a node data in input, must return the object to export as data. By default export the whole node data untouched.
- nodes (optional)
(NodeCollection)
:Nodes to export. By default export all the nodes.
- styles (optional)
("all"|"none"|"original")
[= "all"]
:Indicates what styles (color, shape, size, text) should be exported:
'all'
for what is visually displayed,'none'
for no style and'original'
for the values provided at initialization.
- directedEdges (optional)
Returns
-
Promise<string>
Examples
var filename = 'my-graph.graphml'; ogma.export.graphml({ filename: filename }).then(function() { console.log('graph was saved in', filename); });
- parameters (optional)
- ogma.export.jpg([options])
Arguments
- options (optional)
(ImageExportOptions)
Returns
-
Promise<string>
:The argument of the Promise is the data url of the output image
Examples
ogma.exports.jpg({ download: false, clip: true // would export the viewport as is }).then(function(base64) { var img = new Image(); img.src = base64; document.body.appendChild(img); });
- options (optional)
- ogma.export.json([parameters], {)
Arguments
- parameters (optional)
(object)
- download (optional)
(boolean)
[= true]
:If true, the user will be prompted a modal window so he can download the exported graph.
- edgeAttributes (optional)
(Array<PropertyPath>|"all")
[= ['color', 'width', 'text']]
:List of edge attributes to export. By default, export color, text and width.
- edgeData (optional)
(function (data: any): any)
:Given an edge data in input, must return the object to export as data. By default export the whole edge data untouched.
- filename (optional)
(string)
[= "graph.json"]
:If
download
is true, the default name for the downloaded file. - filter (optional)
(Filter|{nodes: NodeCollection, edges: EdgeCollection})
[= "visible"]
:Indicates what elements to export.
- nodeData (optional)
(function (data: any): any)
:Given a node data in input, must return the object to export as data. By default export the whole node data untouched.
- pretty (optional)
(boolean)
[= false]
:Indicates if the output should be properly indented.
- download (optional)
- {
Returns
-
Promise<string>
Examples
// post graph to the HTTP API ogma.export.json().then(function(json) { var xhr = new XMLHttpRequest(); xhr.open("POST", '/your/storage/api/', true); xhr.setRequestHeader("Content-type", "application/json"); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log('sent'); } }; xhr.send(graph); });
- parameters (optional)
- ogma.export.png([options])
Arguments
- options (optional)
(ImageExportOptions)
Returns
-
Promise<string>
:The argument of the Promise is the data url of the output image
Examples
ogma.export.png({ download: false }).then(function(base64) { var img = new Image(); img.src = base64; document.body.appendChild(img); });
// Node.js - store the image on the disk // make sure that 'canvas' package is available before you create an Ogma instance var fs = require('fs'); ogma.exports.png({ download: false }) .then(function(base64Str) { var base64 = base64Str.replace(/^data:image\/png;base64,/, ''); fs.writeFileSync('graph.png', base64, 'base64'); });
- options (optional)
- ogma.export.svg([parameters])
Arguments
- parameters (optional)
(object)
- background (optional)
(Color)
:Color of the background
- badges (optional)
(boolean)
[= true]
:Whether or not to export badges
- clip (optional)
(boolean)
[= false]
:Whether to clip the exported image to the current Ogma viewport.
- download (optional)
(boolean)
[= true]
:If true, the user will be prompted a modal window so he can download the exported graph.
- embedFonts (optional)
(boolean)
[= false]
:Whether or not to embed custom fonts as base64 (works in viewers and browsers, but in order to edit you will have to install the fonts on your machine anyway). Otherwise the custom fonts will be just linked in the file.
- filename (optional)
(string)
[= "graph.svg"]
:If
download
is true, the default name for the downloaded file. - height (optional)
(number)
:If not specified, the height of the canvas will be used.
- images (optional)
(boolean)
[= true]
:Indicates if images should be exported.
- margin (optional)
(number)
[= 10]
:Additional margin.
- prefix (optional)
(string)
[= 'ogma']
:Prefix for the entity class names. For example, elements belonging to a node are grouped into an SVG group with the class
ogma-node
and an attributedata-node-id
with the (escaped) node id. The wordogma
in these class names can be replaced by a custom string. - texts (optional)
(boolean)
[= true]
:whether or not to export texts
- width (optional)
(number)
:If not specified, the width of the canvas will be used.
- background (optional)
Returns
-
Promise<string>
:The argument is the SVG string
Examples
ogma.export.svg({ download: false, width: 500, height: 500 }).then(function(svg) { document.getElementById('container').innerHTML = svg; });
- parameters (optional)
- ogma.export.tiff([options])
Arguments
- options (optional)
(ImageExportOptions)
Returns
-
Promise<string>
:The argument of the Promise is the data url of the output image
Examples
var filename = 'graph-1.tiff'; ogma.exports.tiff({ filename: filename }).then(function() { console.log('graph was exported as', filename); });
- options (optional)
- ogma.export.xlsx([parameters])
Requires the xlsx library to be included (if browser) or to be available through 'require' (if Node.js)
Arguments
- parameters (optional)
(object|"nodes"|"edges")
- dataProperties (optional)
(Array<PropertyPath>)
:Data properties to export. If not specified, exports all data properties. Deprecated : use
nodeData
andedgeData
instead. - download (optional)
(boolean)
[= true]
:If true, the user will be prompted a modal window so he can download the exported graph. Browser only.
- edgeData (optional)
(function(data: any, allTabs: Array<string>): object|Array<object>|undefined)
:Indicates how to format the edge data for the tab: each key of the returned
object
is used ascolumnName
and its value ascolumnValue
. In case of multiple tabs for the edge, an array of objects will be expected. TheallTabs
array is passed to give some context to the formatting. The default is use the data object "flatten" all his properties. When set it overwritesdataProperties
configuration. - edges (optional)
(EdgeCollection)
:Edges to export. By default export all the edges. When set it overwrites "filter" configuration.
- filename (optional)
(string)
[= "graph.xlsx"]
:If
download
is true, the default name for the downloaded file. - filter (optional)
(Filter)
[= "visible"]
:Indicates what elements to export.
- nodeData (optional)
(function(data: any, allTabs: Array<string>): object|Array<object>|undefined)
:Indicates how to format the node data for the tab: each key of the returned
object
is used ascolumnName
and its value ascolumnValue
. In case of multiple tabs for the node, an array of objects will be expected. TheallTabs
array is passed to give some context to the formatting. The default is use the data object "flatten" all his properties. When set it overwritesdataProperties
configuration. - nodes (optional)
(NodeCollection)
:Nodes to export. By default export all the nodes. When set it overwrites "filter" configuration.
- tab (optional)
(object)
:Indicates how to name the tabs in the XSLX tabs. When not defined it will exports a "nodes" and a "edges" tab. Note: tab names cannot contain some characters in Excel, for more information please see: naming conventions for worksheets .
- edges (optional)
(function(edge: Edge): string|Array<string>|undefined)
[= function(edge: Edge): "edges"]
:The returned string indicates the name of the tab (or tabs) to use for the edge. When
undefined
is returned it defaults to "edges". - nodes (optional)
(function(node: Node): string|Array<string>|undefined)
[= function(node: Node): "nodes"]
:The returned string indicates the name of the tab (or tabs) to use for the node. When
undefined
is returned it defaults to "nodes".
- edges (optional)
- what (optional)
("nodes"|"edges")
:If a value is specified, only nodes or edges will be exported, not both.
- dataProperties (optional)
Returns
-
Promise<Blob>
Examples
var filename = "file.xlsx"; ogma.export.xlsx({ filename: filename, filter: "visible" }).then(function() { console.log('Visible graph exported into', filename) });
// Advanced example where tabs are based on nodes and edges properties var filename = "file.xlsx"; ogma.export.xlsx({ filename: filename, tab: { nodes: function(node){ return node.getData("type"); }, edges: function(edge){ return edge.getData("type"); }, } }).then(function() { console.log('Graph exported: 1 tab for each node and edge type into', filename) });
- parameters (optional)
Ogma.generate
- ogma.generate.balancedTree([options])
Generates a simple balanced tree. Source: https://github.com/gka/randomgraph.js (license: public domain)
Arguments
- options (optional)
(object)
- children (optional)
(number)
[= 2]
:The number of children each node has.
- height (optional)
(number)
[= 3]
:The height of the tree.
- children (optional)
Returns
-
Promise<RawGraph>
Examples
ogma.generate.balancedTree({ children: 2, height: 3 }).then(function(rawGraph) { ogma.setGraph(rawGraph); console.log(ogma.getNodes().size); // 15 console.log(ogma.getEdges().size); // 14 });
- options (optional)
- ogma.generate.barabasiAlbert([options])
Generates a scale-free graph using preferntial-attachment mechanism. See Barabási–Albert model (Wikipedia)
Arguments
- options (optional)
(object)
- m (optional)
(number)
[= 1]
:m > 0 && m <= m0
- m0 (optional)
(number)
[= 5]
:m0 > 0 && m0 < nodes
- nodes (optional)
(number)
[= 40]
:Number of nodes in the graph.
- scale (optional)
(number)
[= 100]
:scale > 0 Scale of the space used by graph.
- m (optional)
Returns
-
Promise<RawGraph>
Examples
ogma.generate.barabasiAlbert({ nodes: 2, scale: 3 }).then(function(rawGraph) { ogma.setGraph(rawGraph); console.log(ogma.getNodes().size); // 15 console.log(ogma.getEdges().size); // 14 });
- options (optional)
- ogma.generate.erdosRenyi([options])
Generates an Erdős–Rényi graph. Call it with options (n,p) or (n,m). Source: https://github.com/gka/randomgraph.js (license: public domain) See Erdős–Rényi model (Wikipedia)
Arguments
- options (optional)
(object)
- edges (optional)
(number)
:The number of edges. If specified,
p
must not be specified. - nodes (optional)
(number)
[= 20]
:The number of nodes.
- p (optional)
(number)
[= 0.1]
:The probability [0..1] of a edge between any two nodes. If specified,
edges
must not be specified.
- edges (optional)
Returns
-
Promise<RawGraph>
Examples
ogma.generate.erdosRenyi({ nodes: 15, p: 0.5 }).then(function(rawGraph) { console.log(rawGraph.nodes.length); // 15 console.log(rawGraph.edges.length); // ~50-60 ogma.setGraph(rawGraph); ogma.view.locateGraph(); });
- options (optional)
- ogma.generate.grid([options])
Generates a grid.
Arguments
- options (optional)
(object)
- columnDistance (optional)
(number)
[= 20]
:Distance between two columns of nodes
- columns (optional)
(number)
[= 4]
:The number of columns in the graph.
- rowDistance (optional)
(number)
[= 20]
:Distance between two rows of nodes
- rows (optional)
(number)
[= 4]
:The number of rows in the graph.
- xmin (optional)
(number)
[= 0]
:Start X coordinate for the grid
- ymin (optional)
(number)
[= 0]
:Start Y coordinate for the grid.
- columnDistance (optional)
Returns
-
Promise<RawGraph>
Examples
ogma.generate.grid({ rows: 3 columns: 5 }).then(function(rawGraph) { console.log(rawGraph.nodes.length); // 15 console.log(rawGraph.edges.length); // 22 ogma.setGraph(rawGraph); ogma.view.locateGraph(); });
- options (optional)
- ogma.generate.path([options])
Generates a path.
Arguments
- options (optional)
(object)
- length (optional)
(number)
[= 5]
:Number of nodes.
- length (optional)
Returns
-
Promise<RawGraph>
Examples
ogma.generate.path({ length: 5 }).then(function(rawGraph) { console.log(rawGraph.nodes.length, 'nodes, connected by', rawgraph.edges.length, 'edges'); // 5 nodes, connected by 4 edges });
- options (optional)
- ogma.generate.random([options])
Generates a random graph.
Arguments
- options (optional)
(object)
- edges (optional)
(number)
[= 10]
:Number of edges.
- nodes (optional)
(number)
[= 10]
:Number of nodes.
- edges (optional)
Returns
-
Promise<RawGraph>
Examples
ogma.generate.random().then(function(rawGraph) { ogma.setGraph(rawGraph); // center on graph with 300ms transition ogma.view.locateGraph({ duration: 300 }); });
- options (optional)
- ogma.generate.randomTree([options])
Generates a random tree graph.
Arguments
- options (optional)
(object)
- height (optional)
(number)
[= 100]
:Height of the space to generate graph in
- nodes (optional)
(number)
[= 50]
:Number of nodes.
- width (optional)
(number)
[= 100]
:Width of the space to generate graph in
- x (optional)
(number)
[= 0]
:X of the center
- y (optional)
(number)
[= 0]
:Y of the center
- height (optional)
Returns
-
Promise<RawGraph>
Examples
ogma.generate.tree({ nodes: 200 }).then(function(rawGraph) { ogma.setGraph(rawGraph); // center on graph with 300ms transition ogma.view.locateGraph({ duration: 300 }); });
- options (optional)
Ogma.geo
- ogma.geo.disable([options])
Disables geo layout
Arguments
- options (optional)
(GeoModeOptions)
Returns
-
Promise<void>
Examples
ogma.geo.disable({ tileUrlTemplate: 'http://{s}.myTileProvider.com/{z}/{x}/{y}.png'}) .then(function() { console.log('geo mode is off'); });
- options (optional)
- ogma.geo.enable([options])
Enables geo mode layout
Arguments
- options (optional)
(GeoModeOptions)
Returns
-
Promise<void>
Examples
ogma.geo.enable({ tileUrlTemplate: 'http://{s}.myTileProvider.com/{z}/{x}/{y}.png'}) .then(function() { console.log('geo mode is on'); });
- options (optional)
- ogma.geo.enabled()
Check whether geographical mode is enabled.
Returns
-
boolean
Examples
if (ogma.geo.enabled()) console.log('geo mode is enabled');
-
- ogma.geo.getCenter()
Returns current map position. Returns undefined when the Geo mode is disabled.
Returns
Examples
ogma.geo.enable() .then(function() { console.log(ogma.geo.getCenter()); // { "latitude": 50.25, "longitude":1.14 } });
- ogma.geo.getMap()
Get the underling map object (a Leaflet Map instance). Returns undefined when the Geo mode is disabled.
Returns
-
L.Map
-
- ogma.geo.getOptions()
Get module settings object. Returns undefined when the Geo mode is disabled.
Returns
- ogma.geo.getUnprojectedCoordinates([selector])
Returns underlying X and Y positions for the nodes that are currently handled by the geo-mode.
Arguments
Returns
-
Array<{x: number, y: number}>
-
- ogma.geo.getView()
Returns current map position. Returns undefined when the Geo mode is disabled.
Returns
Examples
ogma.geo.enable() .then(function() { console.log(ogma.geo.getView()); // { "latitude": 50.25, "longitude":1.14, "zoom": 9 } });
- ogma.geo.getZoom()
Returns current map zoom level. Returns undefined when the Geo mode is disabled.
Returns
-
number
Examples
ogma.geo.enable().then(function() { console.log(ogma.geo.getZoom()); // 9 });
-
- ogma.geo.resetCoordinates()
Reset geographical coordinates of the nodes to the initial values
Examples
var node = ogma.getNode('id'); console.log(node.getGeoCoordinates()); // { latitude: 5, longitude: 10 } ogma.getNode('id').setGeoCoordinates({ latitude: 0, longitude: 0 }); console.log(node.getGeoCoordinates()); // { latitude: 0, longitude: 0 } ogma.geo.resetCoodinates(); console.log(node.getGeoCoordinates()); // { latitude: 5, longitude: 10 }
- ogma.geo.setCenter(latitude, longitude)
Centers the map at given coodinates
Arguments
- latitude
(number)
- longitude
(number)
Examples
ogma.geo.setCenter(12.5, 55.2);
- latitude
- ogma.geo.setOptions([options])
Update module settings
Arguments
- options (optional)
(GeoModeOptions)
Examples
ogma.geo.setOptions({ latitudePath: 'geo.lat', longitudePath: 'geo.lng' }); ogma.enable().then(function() { console.log('geo mode is on'); });
- options (optional)
- ogma.geo.setView(latitude, longitude, zoom)
Set map view - coordinates and zoom level
Arguments
- latitude
(number)
- longitude
(number)
- zoom
(number)
Examples
ogma.geo.setView(55.2, 46.12, 10);
- latitude
- ogma.geo.setZoom(zoom)
Sets zoom level of the map
Arguments
- zoom
(number)
Examples
ogma.geo.setZoom(10);
- zoom
- ogma.geo.toggle([options])
Toggles geo mode. Useful when you don't want to store information about whether the mode was on or off(e.g. with an UI switcher).
Arguments
- options (optional)
(GeoModeOptions)
Returns
-
Promise<void>
Examples
// switch geo mode on or off by a UI element without checking its state checkbox.addEventListener('change', function () { ogma.geo.toggle({ tileUrlTemplate: URL }); });
- options (optional)
- ogma.geo.updateCoordinates() deprecated
Recalculates geographical coordinates of the nodes from their position on the screen. It is automatically invoked after user has dragged a node, but you have to use it yourself in case you have moved the nodes programmatically in order not to lose their new geographical positions.
Examples
Updating the coordinates from node positions ogma.getNodes(['n1', 'n2']).setAttributes([{x: 15, y: 20}, {x: 100, y: 200}]); ogma.geo.updateCoordinates();
Ogma.keyboard
- ogma.keyboard.isKeyPressed(key)
Indicates if the specified key is pressed.
Arguments
Returns
-
boolean
-
- ogma.keyboard.resetKeys()
Resets the stored values for the keys that the user has pressed. Useful to ensure that after a certain shortcut the next combination will be detected properly, even if the user made a mistake. Also use it in the browsers which do not report loss of focus when a dialog window is open.
Ogma.layouts
- ogma.layouts.concentric(params)
Concentric layout. This layout takes a base node as parameter and organizes the graph so the nodes close to the selected node are close to it spatially.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- allowOverlap (optional)
(boolean)
[= false]
:Specifies if nodes are allowed to overlap.
- centerX (optional)
(number)
:X coordinate where the central node must be moved, if different from the central node X
- centerY (optional)
(number)
:Y coordinate where the central node must be moved, if different from the central node Y
- centralNode
(NodeId|Node)
:Id of the central node
- circleHopRatio (optional)
(number)
[= 5]
:If
allowOverlap
is false, specified the space between each ring, relative to the highest node size. - clockwise (optional)
(boolean)
[= true]
:Specifies if the nodes must be ordered clockwise.
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- edges (optional)
(EdgeId[]|EdgeList)
:List of affected edges. If nothing provided, the adjacent edges to the node list is used.
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- nodes (optional)
(NodeId[]|NodeList)
:List of affected nodes. If nothing provided, the whole graph will be used. If edges are provided too, then this list will be augmented with reached nodes from the passed edge list.
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout. Improves performance and user experience.
- sortBy (optional)
(string)
:Indicates the property from which the nodes must be sorted, or
'random'
. You can use'radius'
,'degree'
or custom data attributes. - useWebWorker (optional)
(boolean)
[= true]
:Indicates if the layout should be computed inside a web worker.
- allowOverlap (optional)
Returns
-
Promise<void>
Examples
ogma.layouts.concentric({ centralNode: 'n0', sortBy: 'degree' });
- params
- ogma.layouts.force(params)
Force-directed layout.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- alignSiblings (optional)
(boolean)
[= false]
:Align nodes that are linked to the same two nodes only. It enhances readability. This operation is performed once the main layout is finished.
- autoStop (optional)
(autoStop)
[= false]
:Stop layout earlier if the algorithm decides that it has converged to a stable configuration. It can make the algorithm run much faster and would require fewer iterations if you are restarting the layout after it has already converged.
- charge (optional)
(number)
[= 10]
:Distance factor between nodes. A greater value increases the distance.
- cx (optional)
(number)
:X coordinate of the layout mass center.
- cy (optional)
(number)
:Y coordinate of the layout mass center.
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- edgeLength (optional)
(number)
[= 30]
:Desired length of an edge connecting 2 nodes.
- edgeStrength (optional)
(number)
[= 0.75]
:Attraction strength. Higher values make edges' attractive force stronger.
- edges (optional)
(EdgeId[]|EdgeList)
:List of affected edges. If nothing provided, the adjacent edges to the node list is used.
- elasticity (optional)
(number)
[= 0.9]
:Node collision elasticity. Smaller values may result in incomplete node overlap removal. Passing
0
will skip that algorithm pass altogether. - gravity (optional)
(number)
[= 0.05]
:Force that attracts nodes to the center of the graph. Center is either the mass center of the graph or the value defined by
cx
andcy
. Greater value makes the layout more compact. - incremental (optional)
(boolean | object)
[= false]
:Enable the incremental layout using Force layout. When true is uses the default options.
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- nodes (optional)
(NodeId[]|NodeList)
:List of affected nodes. If nothing provided, the whole graph will be used. If edges are provided too, then this list will be augmented with reached nodes from the passed edge list.
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- radiusRatio (optional)
(number)
[= 1.25]
:Radius ratio is used to allow for small gaps between the nodes while avoiding the ovelapping.
- siblingsOffset (optional)
(number)
[= 0.0]
:Additional offset between the node siblings, so that the distance to the next node in the row would be r * (1 + siblingsOffset), where r is the previous node's radius.
- skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout.
- steps (optional)
(number)
[= 300]
:Iteration steps limit and cooling ratio.
- theta (optional)
(number)
[= 0.62]
:Theta parameter of the Barnes-Hut optimization. Plays the role of the precision in repulsive forces approximation.
- useWebWorker (optional)
(boolean)
[= true]
:Indicates if the layout should be computed inside a web worker
- alignSiblings (optional)
Returns
-
Promise<void>
Examples
ogma.layouts.force() .then(() => { console.log('layout complete'); });
- params
- ogma.layouts.forceLink(params[, randomize][, randomizeFactor])
Force link layout.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- alignNodeSiblings (optional)
(boolean)
[= true]
:Align nodes that are linked to the same two nodes only. It enhances readability. This operation is performed once the main layout is finished.
- autoStop (optional)
(boolean)
[= true]
:The layout stops automatically if true.
- avgDistanceThreshold (optional)
(number)
[= 0.01]
:This is the normal stopping condition of autoStop: true. When the average displacements of nodes is below this threshold, the layout stops.
- barnesHutOptimize (optional)
(boolean)
[= false]
:Should we use the algorithm's Barnes-Hut to improve repulsion's scalability (
O(n²)
toO(nlog(n))
)? This is useful for large graphs (5000+ nodes) but harmful to small ones. - barnesHutTheta (optional)
(number)
[= 0.5]
:Theta parameter of the Barnes-Hut optimization.
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- edgeWeight (optional)
(function(edge:Edge):number)
:Use this getter to modify edge weight. 0 means that the edge will be ignored
- edgeWeightInfluence (optional)
(number)
[= 0]
:Increase attraction force between nodes connected with edges of positive weights. Disabled by default.
- edges (optional)
(EdgeId[]|EdgeList)
:List of affected edges. If nothing provided, the adjacent edges to the node list is used.
- gravity (optional)
(number)
[= 1]
:Force which attracts nodes to the center of the graph. A greater value makes the graph more compact.
- incremental (optional)
(boolean | object)
[= false]
:Enable the incremental layout using Force layout. When true is uses the default options.
- iterationsPerRender (optional)
(number)
[= 10]
:Number of iterations to be run before each update of the graph visualization.
- linLogMode (optional)
(boolean)
[= false]
:Alternative energy model with linear repulsion force and logarithmic attraction force.
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- maxIterations (optional)
(number)
[= 1000]
:Set a limit to the number of iterations if autoStop: true.
- nodeMass (optional)
(function(node:Node, degree:number):number)
:Use this getter to assign node masses. Node degree is passed in for convenience.
- nodeSiblingsAngleMin (optional)
(number)
[= 0]
:Force a minimal angle between aligned nodes (from 0 to PI / 2). Node labels may indeed overlap on horizontally aligned nodes.
- nodeSiblingsScale (optional)
(number)
[= 5]
:Distance multiplier between the aligned nodes.
- nodes (optional)
(NodeId[]|NodeList)
:List of affected nodes. If nothing provided, the whole graph will be used. If edges are provided too, then this list will be augmented with reached nodes from the passed edge list.
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- outboundAttractionDistribution (optional)
(boolean)
[= false]
:Attract super-nodes (with many edges) to the outside.
- scalingRatio (optional)
(number)
[= 100]
:Distance factor between nodes. A greater value increases the distance.
- skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout. Improves performance and user experience.
- slowDown (optional)
(number)
[= 1]
:Reduces the speed of node displacements as the number of iterations increases.
- startingIterations (optional)
(number)
[= 10]
:Number of iterations to be run before the first update of the graph visualization.
- strongGravityMode (optional)
(boolean)
[= true]
:Enable a gravity formula to have a strong effect.
- useWebWorker (optional)
(boolean)
[= true]
:Indicates if the layout should be computed inside a web worker.
- alignNodeSiblings (optional)
- randomize (optional)
(string)
:Whether to randomize the node positions before running the layout. Possible values are
locally
andglobally
.Locally
means that the node coordinate will be shuffled around its current position, whereas withglobally
it will be assigned a new random value. - randomizeFactor (optional)
(number)
[= 1]
:[1] Randomization scaling factor.
Returns
-
Promise<void>
Examples
ogma.layouts.forceLink({ barnesHutOptimize: false, duration: 500 });
- params
- ogma.layouts.grid(params)
Arrange the nodes in a grid.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- cols (optional)
(number)
:Indicates the desired number of cols. If neither
rows
orcols
are specified, the layout will attempt to make a square. - duration (optional)
(number)
:Duration of the animation when the graph is updated
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- nodes (optional)
(NodeId[]|NodeList)
:List of affected nodes. If nothing provided, the whole graph will be used
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- reverse (optional)
(boolean)
:[false] If
true
, the nodes will be sorted in reverse order. - rows (optional)
(number)
:Indicates the desired number of rows. If neither
rows
orcols
are specified, the layout will attempt to make a square. - skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout. Improves performance and user experience.
- sortBy (optional)
(string)
:Indicates the property from which the nodes must be sorted. Can also be
'random'
, in which case the node order is randomized. - sortFallbackValue (optional)
(any)
:Use this value for the nodes, for which the sorting attribute is undefined.
- useWebWorker (optional)
(boolean)
[= true]
:Indicates if the layout should be computed inside a web worker.
- cols (optional)
Returns
-
Promise<void>
Examples
Arrange the nodes in 3 rows, sorting them from the largest to the smallest. ogma.layouts.grid({ sortBy: 'radius', reverse: true, rows: 3 });
- params
- ogma.layouts.hierarchical(params)
The hierarchical layout positions nodes starting from a root nodes downwards generating a visual hierarchy based on connectivity.
When the user provides the root nodes then the algorithm positions the cascading nodes based on their graph-theoretical distance. When root nodes are not provided then the algorithm works out the best top node in order to reduce the number of layers (depth) of the hierarchy. It is possibile to impose constraints to the layout in order to set specific layers (depth) for each node using a numeric
layer
data attribute.
If you want to force a node to be at the top or the bottom of the layering, look at theroots
andsinks
parameters.If there are subgraphs or nodes not reachable from the central node, they will be layouted separately. It is possibile to control how these subgraphs are positioned.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- arrangeComponents (optional)
("fit"|"grid"|"singleLine")
[= 'fit']
:Desired fit for multiple disconnected components: "fit" attempt to optimize the screen space; "grid" adds a special behaviour for isolated nodes, arranging them together in a grid, then fit on the screen; "singleLine" arrange all disconnected components alongside.
- componentDistance (optional)
(number)
[= 25]
:Desired distance between disconnected components
- direction (optional)
("TB"|"BT"|"LR"|"RL")
[= 'TB']
:Layout direction: Top-bottom/bottom-top/left-right/right-left. The "rankdir" parameter has been deprecated, but still supported for this version: make sure to migrate to "direction" in your code from now on.
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- edges (optional)
(EdgeId[]|EdgeList)
:List of affected edges. If nothing provided, the adjacent edges to the node list is used.
- gapWidth (optional)
(number)
[= 1]
:Desidered width of gap spaces between nodes not sequentially next to each other (siblings). This is an advanced parameter, often not required to change, it is similar to the previous "edgeDistance" parameter in Dagre. Expressed in percentage (%) from 1 to 100.
- gridDistance (optional)
(number)
[= 50]
:Desidered distance between isolated nodes when arranged in grid. Used only when "grid" arrangeComponent is enabled.
- layer (optional)
(string)
:Data field defining the layer of the node in the hierarchy
- levelDistance (optional)
(number)
[= 50]
:Desired distance between the layers of layout
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- nodeDistance (optional)
(number)
[= 50]
:Desired distance between the nodes on one layer
- nodes (optional)
(NodeId[]|NodeList)
:List of affected nodes. If nothing provided, the whole graph will be used. If edges are provided too, then this list will be augmented with reached nodes from the passed edge list.
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- roots (optional)
(NodeId[]|NodeList)
[= []]
:List of nodes to put at the top of the hierarchy
- sinks (optional)
(NodeId[]|NodeList)
[= []]
:List of nodes to put at the bottom of the hierarchy
- skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout. Improves performance and user experience.
- arrangeComponents (optional)
Returns
-
Promise<void>
Examples
ogma.layouts.hierarchical({ direction: 'TB', // Direction of the layout. Can be TB, BT, LR, or RL, // where T = top, B = bottom, L = left, and R = right. duration: 300, // Duration of the animation nodeDistance: 30, // Number of pixels that separate nodes horizontally in the layout. levelDistance: 40 // Number of pixels between each layer in the layout. }).then(function() { console.log('done'); });
- params
- ogma.layouts.radial(params)
Radial (concentric) layout positions nodes around the selected one based on their graph-theoretical distance (shortest path in the graph, connecting them). If there are subgraphs or nodes not reachable from the central node, they will be pushed outwards, but still placed around the layout in a readable way.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- allowOverlap (optional)
(boolean)
[= false]
:Specifies if nodes are allowed to overlap.
- centerX (optional)
(number)
:X coordinate where the central node must be moved, if different from the central node X
- centerY (optional)
(number)
:Y coordinate where the central node must be moved, if different from the central node Y
- centralNode
(Node|NodeId)
:Id of the central node
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- epsilon (optional)
(number)
[= 0.001]
:Layout precision. Smaller number means better precision but longer computation time
- iterationsPerRender (optional)
(number)
[= 20]
:Layout iterations per update.
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- maxIterations (optional)
(number)
[= 100]
:Maximum number of layout sweeps
- nodeGap (optional)
(number)
[= 10]
:Additional gap between the nodes that belong to one layer
- nodes (optional)
(Array<NodeId>|NodeList)
:List of affected nodes. If nothing provided, the whole graph will be used.
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- radiusDelta (optional)
(number)
[= 0]
:You can specify a constant distance between the layout layers, in this case
radiusRatio
will be ignored - radiusRatio (optional)
(number)
[= Math.SQRT2]
:Ratio between the radii of adjacent concentric layers: R[n+1] = R[n] × ratio
- renderSteps (optional)
(boolean)
[= false]
:Render intermediate results, before the algorithm converges. That means sending the calculated positions every
iterationsPerRender
iterations. - repulsion (optional)
(number)
[= 1]
:Increase or decrease the repulsion force between the nodes on the same levels. Values smaller than 1 will result in more compact placement along the layers.
- skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout. Improves performance and user experience.
- useWebWorker (optional)
(boolean)
[= true]
:Indicates if the layout should be computed inside a web worker.
- allowOverlap (optional)
Returns
-
Promise<void>
Examples
ogma.layouts.radial({ centralNode: 'n0', radiusDelta: 200 });
- params
- ogma.layouts.sequential(params)
The sequential layout positions nodes starting from a root nodes downwards generating a visual hierarchy based on connectivity with a costant width.
When the user provides the root nodes then the algorithm positions the cascading nodes based on their graph-theoretical distance. When root nodes are not provided then the algorithm works out the best top node in order to reduce the number of layers (depth) of the hierarchy. It is possibile to impose constraints to the layout in order to set specific layers (depth) for each node using a numeric
layer
data attribute.
If you want to force a node to be at the top or the bottom of the layering, look at theroots
andsinks
parameters.If there are subgraphs or nodes not reachable from the central node, they will be layouted separately. It is possibile to control how these subgraphs are positioned.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- arrangeComponents (optional)
("fit"|"grid"|"singleLine")
[= 'fit']
:Desired fit for multiple disconnected components: "fit" attempt to optimize the screen space; "grid" adds a special behaviour for isolated nodes, arranging them together in a grid, then fit on the screen; "singleLine" arrange all disconnected components alongside.
- componentDistance (optional)
(number)
[= 50]
:Desired distance between the components in the layout
- direction (optional)
("TB"|"BT"|"LR"|"RL")
[= 'TB']
:Layout direction: Top-bottom/bottom-top/left-right/right-left.
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- edges (optional)
(EdgeId[]|EdgeList)
:List of affected edges. If nothing provided, the adjacent edges to the node list is used.
- gridDistance (optional)
(number)
[= 50]
:Desidered distance between isolated nodes when arranged in grid. Used only when "grid" arrangeComponent is enabled.
- levelDistance (optional)
(number)
[= 50]
:Desired distance between the layers of layout
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- nodeDistance (optional)
(number)
[= 50]
:Desired distance between the nodes on one layer
- nodes (optional)
(NodeId[]|NodeList)
:List of affected nodes. If nothing provided, the whole graph will be used. If edges are provided too, then this list will be augmented with reached nodes from the passed edge list.
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- roots (optional)
(NodeId[]|NodeList)
[= []]
:List of nodes to put at the top of the hierarchy
- sinks (optional)
(NodeId[]|NodeList)
[= []]
:List of nodes to put at the bottom of the hierarchy
- skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout. Improves performance and user experience.
- arrangeComponents (optional)
Returns
-
Promise<void>
Examples
ogma.layouts.sequential({ direction: 'TB', // Direction of the layout. Can be TB, BT, LR, or RL, // where T = top, B = bottom, L = left, and R = right. duration: 300, // Duration of the animation nodeDistance: 30, // Number of pixels that separate nodes horizontally in the layout. levelDistance: 40 // Number of pixels between each layer in the layout. }).then(function() { console.log('done'); });
- params
- ogma.layouts.stop()
Stops currently running layout
Examples
// force stop a layout ogma.layouts.forceLink(); setTimeout(function() { ogma.layouts.stop(); }, 200);
- ogma.layouts.incremental(params) deprecated
This layout is designed for incremental expansion of the node groups taking into account the surroundings. It works in two modes, based on provided information:
If only a node group is provided for expansion, the algorithm will apply ForceLink layout to the group and place the resulting configuration in the closest available position, maintaining a
margin
. Depending on the options available, subgraph can be placed between other nodes and components, if the space would allow, or outside of the graph convex hull otherwiseIf a
centralNode
is provided and its position is fixed, the layout has two options: if no additional information is provided, the algorithm will attempt to position graphs node so that the overlapping would be minimal and the subgraph would still be visibly separated. Otherwise, iffocusOnGroupShape
is set totrue
, the layout will try and maintain the given subgraph readability by layouting itself first around the fixed focal point and then pushing the nodes around it away. Keep in mind that not every spatial configuration of restraints (most notably, large amount of fixed nodes around the subgraph of interest) would allow the algorithm to produce a non-overlapping set of node positions.
See the list of special parameters below, the rest of the options is the same as for the
ForceLink
and will be passed on to the particular stage of the algorithm where it is used.Deprecated, use ogma.layouts.force() or ogma.layouts.forceLink() instead.
Arguments
- params
(object)
:See LayoutOptions for common layout options.
- alignNodeSiblings (optional)
(boolean)
[= true]
:Align nodes that are linked to the same two nodes only. It enhances readability. This operation is performed once the main layout is finished.
- autoStop (optional)
(boolean)
[= true]
:The layout stops automatically if true.
- avgDistanceThreshold (optional)
(number)
[= 0.01]
:This is the normal stopping condition of autoStop: true. When the average displacements of nodes is below this threshold, the layout stops.
- barnesHutOptimize (optional)
(boolean)
[= false]
:Should we use the algorithm's Barnes-Hut to improve repulsion's scalability (
O(n²)
toO(nlog(n))
)? This is useful for large graphs (5000+ nodes) but harmful to small ones. - barnesHutTheta (optional)
(number)
[= 0.5]
:Theta parameter of the Barnes-Hut optimization.
- centralNode (optional)
(Node)
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- edgeWeight (optional)
(function(edge:Edge):number)
:Use this getter to modify edge weight. 0 means that the edge will be ignored
- edgeWeightInfluence (optional)
(number)
[= 0]
:Increase attraction force between nodes connected with edges of positive weights. Disabled by default.
- focusOnGroupShape (optional)
(boolean)
[= false]
- gravity (optional)
(number)
[= 1]
:Force which attracts nodes to the center of the graph. A greater value makes the graph more compact.
- iterationsPerRender (optional)
(number)
[= 10]
:Number of iterations to be run before each update of the graph visualization.
- linLogMode (optional)
(boolean)
[= false]
:Alternative energy model with linear repulsion force and logarithmic attraction force.
- locate (optional)
(boolean|LocateOptions)
[= false]
- margin (optional)
(number)
[= 5]
- maxIterations (optional)
(number)
[= 1000]
:Set a limit to the number of iterations if autoStop: true.
- nodeMass (optional)
(function(node:Node, degree:number):number)
:Use this getter to assign node masses. Node degree is passed in for convenience.
- nodeSiblingsAngleMin (optional)
(number)
[= 0]
:Force a minimal angle between aligned nodes (from 0 to PI / 2). Node labels may indeed overlap on horizontally aligned nodes.
- nodeSiblingsScale (optional)
(number)
[= 5]
:Distance multiplier between the aligned nodes.
- nodes
(NodeList)
- outboundAttractionDistribution (optional)
(boolean)
[= false]
:Attract super-nodes (with many edges) to the outside.
- scalingRatio (optional)
(number)
[= 100]
:Distance factor between nodes. A greater value increases the distance.
- slowDown (optional)
(number)
[= 1]
:Reduces the speed of node displacements as the number of iterations increases.
- startingIterations (optional)
(number)
[= 10]
:Number of iterations to be run before the first update of the graph visualization.
- strongGravityMode (optional)
(boolean)
[= true]
:Enable a gravity formula to have a strong effect.
- alignNodeSiblings (optional)
Returns
-
Promise<void>
Ogma.parse
- ogma.parse.gexf(content)
Parse a GEXF string and return the raw graph.
Arguments
- content
(string)
Returns
-
Promise<RawGraph>
Examples
ogma.fetch(url).then(function(gexfString) { ogma.parse.gexf(gexfString).then(function(graph) { ogma.setGraph(graph); }); });
- content
- ogma.parse.gexfFromUrl(url)
Fetch and parse a GEXF file and return the raw graph.
Arguments
- url
(string)
Returns
-
Promise<RawGraph>
Examples
// same as the example above, but shorter ogma.parse.gexfFromUrl(url).then(function(graph) { ogma.setGraph(graph); });
- url
- ogma.parse.janus(content)
Parse the result of a JanusGraph query into an Ogma graph.
Arguments
- content
(object)
:Response of the gremlin-client library ("gremlin-client")
Returns
-
Promise<RawGraph>
Examples
// Use the gremlin-client library to create a session var client = Gremlin.createClient(8182, 'localhost', {}); // Use the client to send a query var q = 'g.V().limit(10).store("v").bothE().store("e").cap("v, "e")'; client.runQuery(, {}, function(error, res) => { if (error) { console.log('Gremlin query error: ' + error.message); } var rawGraph = ogma.parse.janus(res); return ogma.setGraph(rawGraph); });
- content
- ogma.parse.json(content[, transform])
Parse a JSON string and return the raw graph.
Arguments
- content
(string)
- transform (optional)
(function(json: object | unknown[]): RawGraph)
:Function to transform custom JSON format into Ogma's
RawGraph
Returns
-
Promise<RawGraph>
Examples
ogma.exports.json({download: false)}).then(function (jsonString) { var MY_JSON = saveSomewhere(jsonString); }); // later var MY_JSON = loadFromSomewhere(); ogma.parse.json(MY_JSON).then(function (graph) { ogma.setGraph(graph); ogma.view.locateGraph(); });
- content
- ogma.parse.jsonFromUrl(url[, transform])
Fetch and parse a JSON file and return the raw graph.
Arguments
- url
(string)
- transform (optional)
(function(json: object | unknown[]): RawGraph)
:Function to transform custom JSON format into Ogma's
RawGraph
Returns
-
Promise<RawGraph>
Examples
// here, the input graph has a different format to represent edges: // { links: [{ from: NodeId, to: NodeId}], nodes: [{ id: NodeId }] }; function transform (json) { const edges = json.links; return { nodes: json.nodes, edges: edges.map(function (edge) { edge.source = edge.from; edge.target = edge.to; return edge; }) }; } // passing the custom transformation function ogma.parse.jsonFromUrl(url, transform).then(function(graph) { ogma.setGraph(graph); });
- url
- ogma.parse.neo4j(content)
Parse the result of a Neo4J query into an Ogma graph.
The parsed user's data will be stored into each Ogma item "data" field with the following structure:
●
neo4jProperties
data field for each item in Ogma,●
neo4jLabels
field for Neo4j node labels information,●
neo4jType
field for Neo4j edge types;Arguments
- content
(object)
:Response of the Neo4j Bolt driver ("neo4j-javascript-driver")
Returns
-
Promise<RawGraph>
Examples
// Use the neo4j-javascript-driver to create a session // Refer to the neo4j-javascript-driver documentation for more information var driver = neo4j.driver('bolt://localhost', neo4j.auth.basic('username', 'password')); var session = driver.session(); // Use the session to send a query session .run('MATCH (n) OPTIONAL MATCH (n)-[r]-() RETURN n,r LIMIT 100') .then(function (response) { // Parse the response into an Ogma graph return ogma.parse.neo4j(response) }).then(function(graph) { // Load this graph return ogma.setGraph(graph); }).then(function() { console.log('Import done!'); session.close(); });
- content
Ogma.pathfinding
- ogma.pathfinding.astar(source, target[, options]) deprecated
This method has been deprecated in favor of
ogma.algorithms.shortestPath()
.
Compute the shortest path between two nodes using the A* algorithm.Arguments
- source
(Node|NodeId)
:Source node.
- target
(Node|NodeId)
:Target node.
- options (optional)
(object)
- directed (optional)
(boolean)
[= false]
:Indicates if the graph should be considered directed
- filter (optional)
(Filter)
[= "visible"]
- heuristicLengthFunction (optional)
(function(node1: Node, node2: Node): number)
:Takes two nodes as parameters, and returns the heuristic distance between them, Default: returns the euclidian distance between the two nodes.
- pathLengthFunction (optional)
(function(node1: Node, node2: Node): number)
:Takes two connected nodes as parameters, and returns the distance between them. Default: returns the euclidian distance between the two nodes.
- directed (optional)
Returns
-
NodeList
:Ordered list of nodes indicating the shortest path, including the source and target nodes.
Examples
var source = ogma.getNode('n0'), target = ogma.getNode('n1'), path = ogma.pathfinding.astar(source, target); console.log('Shortest path between n0 and n1: ' + path.getId());
- source
- ogma.pathfinding.dijkstra(source, target[, options]) deprecated
This method has been deprecated in favor of
ogma.algorithms.shortestPath()
.
Compute the shortest path between two nodes using the Dijkstra algorithm.Arguments
- source
(Node|NodeId)
:Source node.
- target
(Node|NodeId)
:Target node.
- options (optional)
(object)
- directed (optional)
(boolean)
[= false]
:Indicates if the graph should be considered directed
- filter (optional)
(Filter)
[= "visible"]
- pathLengthFunction (optional)
(function(node1: Node, node2: Node): number)
:Takes two connected nodes as parameter, and returns the distance between them. Default: always returns 1.
- directed (optional)
Returns
-
NodeList
:Ordered list of nodes indicating the shortest path, including the source and target nodes.
Examples
var source = ogma.getNode('n0'), target = ogma.getNode('n1'), path = ogma.pathfinding.dijkstra(source, target); console.log('Shortest path between n0 and n1: ' + path.getId());
- source
- ogma.pathfinding.dijkstraBig(source, target[, options]) deprecated
This method has been deprecated in favor of
ogma.algorithms.shortestPath()
.
Compute the shortest path between two nodes using the Dijkstra algorithm. Optimized for larger graphsArguments
- source
(Node|NodeId)
:Source node.
- target
(Node|NodeId)
:Target node.
- options (optional)
(object)
- directed (optional)
(boolean)
[= false]
:Indicates if the graph should be considered directed
- filter (optional)
(Filter)
[= "visible"]
- pathLengthFunction (optional)
(function(node1: Node, node2: Node): number)
:Takes two connected nodes as parameter, and returns the distance between them. Default: always returns 1.
- directed (optional)
Returns
-
NodeList
:Ordered list of nodes indicating the shortest path, including the source and target nodes.
Examples
var source = ogma.getNode('n0'), target = ogma.getNode('n1'), path = ogma.pathfinding.dijkstra(source, target); console.log('Shortest path between n0 and n1: ' + path.getId());
- source
Ogma.rules
- ogma.rules.map(options)
Create a function that, given a node or edge, returns a value based on a mapping "any data -> any value".
Arguments
- options
(object)
- fallback (optional)
(any|Array<any>)
:Value(s) to assign when the data value is not specified in the mapping.
- field
(PropertyPath)
:Data property path on which to retrieve the value to be mapped
- values (optional)
({[key: string]: any})
:Mapping that associate data value to output value.
- fallback (optional)
Returns
Examples
var colorMapping = ogma.rules.map({ field: 'country', // The mapping will use the "country" data property of the node/edge values: { 'France': 'blue', 'Italy': 'green', 'Spain': 'red' }, fallback: ['white', 'black'] // Other countries will alternatively be colored in black or white }); // Add this function as a style rule ogma.style.addRule({ nodeAttributes: { color: colorMapping } });
- options
- ogma.rules.slices(options)
Create a function that, given a node or edge, returns a value based on a mapping "numerical data -> any value"
Arguments
- options
(object)
- fallback (optional)
(any)
:Value to assign when the property is not a number.
- field
(PropertyPath)
:Data property path to "slice"
- reverse (optional)
(boolean)
[= false]
:By default low values for data properties are given low output values. Setting this to
true
reverse this behavior. - stops (optional)
({min: number, max: number}|Array<number>)
:Indicates the boundaries of the slices. If an object is specified, it must indicates the minimum and maximum values the data property can have. If it's an array, two consecutive elements indicate the boundaries for a slice. By default, the slices will be determined using the current minimum and maximum value of the data property.
- values
({nbSlices: number, min: number, max: number}|Array<any>)
:Indicates the possible output values for the slices. If an object is specified, there will be
nbSlices
possible output values, with values frommin
tomax
(at regular intervals). If an array is specified, it indicates the different possible values.
- fallback (optional)
Returns
Examples
// Assigning the size based on a numerical property var radiusRule = ogma.rules.slices({ field: 'nbEmployees', // Nodes will be assigned one among 5 different radiuses, between 2 // and 10, depending on their "nbEmployees" data property values: { nbSlices: 5, min: 2, max: 10 }, // For values 1-200, the size will be 2, for values 201-400 // the size will be 4, etc until 801-1000 -> 10 stops: { min: 1, max: 1000 }, // // Nodes for which the `nbEmployees` property is not a number will be assigned the size 1 fallback: 1 }); ogma.styles.addRule({ nodeAttributes: { radius: radiusRule } });
// Assigning the color based on a numerical property // If `height` is less than 0, the node will be in blue. // If it's between 0 and 100, it will be colored in green. // If it's more than 100, it will be colored in brown var colorRule = ogma.rules.slices({ field: 'height', values: ['blue', 'green', 'brown'], stops: [0, 100], fallback: 'white' }); ogma.styles.addRule({ nodeAttributes: { color: colorRule } });
- options
- ogma.rules.template(template)
Returns a function that, given a node or edge, returns a string by replacing a pattern in the string by the according data property.
Arguments
- template
(string)
:String in which "{{foo}}}" will be replaced by the data property "foo".
Returns
Examples
var textRule = ogma.rules.template('Age: {{age}}\nName: {{name}}'); ogma.styles.addRule({ nodeAttributes: { text: textRule } });
- template
Ogma.schema
- ogma.schema.watchEdgeNonObjectProperty([options])
Provide information on the specified edge data property, and notifies when the property is modified.
Arguments
- options (optional)
(WatcherOptions)
:Options to use by the watcher
Returns
- options (optional)
- ogma.schema.watchEdgeObjectProperty([options])
Watch for addition, removal, and updates of the sub-properties of the specified edge data property.
Arguments
- options (optional)
(WatcherOptions)
:Options to use by the watcher
Returns
- options (optional)
- ogma.schema.watchNodeNonObjectProperty([options])
Provide information on the specified node data property, and notifies when the property is modified.
Arguments
- options (optional)
(WatcherOptions)
:Options to use by the watcher
Returns
Examples
var ogma = new Ogma(); ogma.addNodes([{id: 0, data: {properties: {foo: 'bar', a: 'value'}}}, {id: 1, data: {properties: {a: 'value2'}}}]); var watcher = ogma.schema.watchNodeObjectProperty(['properties', 'a'); console.log(JSON.stringify(watcher.getPropertyInfo().getValues())); // ['value1', 'value2'] watcher.onUpdate(function () { console.log(JSON.stringify(watcher.getPropertyInfo().getValues())); }); ogma.getNode(1).setData(['properties', 'a'], 'value3'); // Outputs: ['value1', 'value3']
- options (optional)
- ogma.schema.watchNodeObjectProperty([options])
Watch for addition, removal, and updates of the sub-properties of the specified node data property.
Arguments
- options (optional)
(WatcherOptions)
:Options to use by the watcher
Returns
Examples
var ogma = new Ogma(); ogma.addNodes([{id: 0, data: {foo: 'bar', a: 'value'}}, {id: 1, data: {a: 'value2'}}]); var watcher = ogma.schema.watchNodeObjectProperty(); console.log(JSON.stringify(watcher.getProperties())); // ['bar', 'a'] console.log(JSON.stringify(watcher.getPropertyInfo('a').getValues())); // ['value1', 'value2'] watcher.onPropertyAdded(function (propertyName) { console.log('at least one node now has a value for the ' + propertyName + ' data property.'); }); ogma.getNode(1).setData('quality', 'good'); // Outputs: 'at least one node now has a value for the quality data property.'
- options (optional)
Ogma.styles
- ogma.styles.addRule([options])
Add a style rule, applying the specified attributes to all nodes & edges that match the specified selector. The style of a node is re-computed when its degree or data changes, and automatically assigned when a node is added. Rules are applied one after another. The latest added rule is applied last. Rules are applied before attributes assigned through
setAttributes
, which are applied before classes.Arguments
- options (optional)
(object)
- edgeAttributes (optional)
(EdgeAttributesValue)
:Attributes that will be assigned to the edges.
- edgeDependencies (optional)
(EdgeDependencies)
:(Advanced - see tutorial) Attributes on which the functions (if any) in the
edgeAttributes
field depend - edgeOutput (optional)
(EdgeOutput)
:(Advanced - see tutorial) Edge attributes assigned by the rule. If unspecified, they are inferred from the
edgeAttributes
field. This field is used together with the dependency fields of other rules/classes to know which rules/classes should be updated when this rule is updated. - edgeSelector (optional)
(EdgeSelector)
:Indicates if the rule should be applied to a given edge. If unspecified, the rule is applied to all edges.
- nodeAttributes (optional)
(NodeAttributesValue)
:Attributes that will be assigned to the nodes.
- nodeDependencies (optional)
(NodeDependencies)
:(Advanced - see tutorial) Attributes on which the functions (if any) in the
nodeAttributes
field depend - nodeOutput (optional)
(NodeOutput)
:(Advanced - see tutorial) Node attributes assigned by the rule. If unspecified, they are inferred from the
nodeAttributes
field. This field is used together with the dependency fields of other rules/classes to know which rules/classes should be updated when this rule is updated. - nodeSelector (optional)
(NodeSelector)
:Indicates if the rule should be applied to a given node. If unspecified, the rule is applied to all nodes.
- edgeAttributes (optional)
Returns
Examples
// Set the same color and size for all nodes, and the same shape to all edges ogma.styles.addRule({ nodeAttributes: { color: 'red', radius: 10 }, edgeAttributes: { shape: { type: 'line', style: 'plain', head: 'arrow', tail: null } } });
// Use a selector to restrict the rule to a subset of the graph ogma.styles.addRule({ nodeSelector: function(node) { return node.getData('a.b.c') !== undefined; }, nodeAttributes: { color: 'red', radius: 10 } });
// Assign node color and size using a function ogma.styles.addRule({ nodeAttributes: { color: function(node) { if (node.getData('foo') === 'bar') { return 'red'; } else { return 'green'; } }, radius: function(node) { return node.getDegree() + 1; } } });
// It's possible to provide a function at any level of nesting // Here we provide a function at the badges level for nodes and at the root level for edges ogma.styles.addRule({ nodeAttributes: { shape: 'square', badges: function(node) { // Display the node degree in either the top-left badge or the // top-right badge depending on the `foo` data var badge = { text: node.getDegree() }; if (node.getData('foo') === 'bar') { return { topLeft: badge }; } else { return { topRight: badge }; } } }, edgeAttributes: function(edge) { // We either want a blue arrow or a red line depending on the edge's data if (edge.getData('property') === 'value') { return { color: 'blue', shape: 'arrow' }; } else { return { color: 'red', shape: 'line' }; } } });
- options (optional)
- ogma.styles.createClass(options)
Create a new class for nodes & edges. Classes are similar to style rules, except they are assigned on an individual basis instead of according to a selector (assigned only to the nodes/edges that have been assigned the class with
node.addClass('className')
).Arguments
- options
(object)
- edgeAttributes (optional)
(EdgeAttributesValue)
:Attributes applied to edges when they have this class.
- edgeDependencies (optional)
(EdgeDependencies)
:(Advanced - see tutorial) Attributes on which the functions (if any) in the
edgeAttributes
field depend - edgeOutput (optional)
(EdgeOutput)
:(Advanced - see tutorial) Edge attributes assigned by the class. If unspecified, they are inferred from the
edgeAttributes
field. This field is used together with the dependency fields of other rules/classes to know which rules/classes should be updated when this class is assigned/removed to/from a edge. - name
(string)
:Name of the class to be created.
- nodeAttributes (optional)
(NodeAttributesValue)
:Attributes applied to nodes when they have this class.
- nodeDependencies (optional)
(NodeDependencies)
:(Advanced - see tutorial) Attributes on which the functions (if any) in the
nodeAttributes
field depend - nodeOutput (optional)
(NodeOutput)
:(Advanced - see tutorial) Node attributes assigned by the class. If unspecified, they are inferred from the
nodeAttributes
field. This field is used together with the dependency fields of other rules/classes to know which rules/classes should be updated when this class is assigned/removed to/from a node.
- edgeAttributes (optional)
Returns
Examples
ogma.createClass({ name: 'myCustomClass', nodeAttributes: {color: 'green'} }); ogma.getNode('n0').addClass('myCustomClass'); ogma.getNode('n0').removeClass('myCustomClass');
// Create a class that increase the radius of the nodes ogma.createClass('myOtherClass', { nodeAttributes: { radius: function (node) { return node.getAttribute('radius') + 1; } } });
- options
- ogma.styles.getClass(className)
Returns the class with the specified name. Returns
null
if no class has the specified name.Arguments
- className
(string)
Returns
-
StyleClass|null
- className
- ogma.styles.getClassList()
Returns the list of existing classes by increasing priority, excluding builtin classes.
Returns
-
Array<StyleClass>
-
- ogma.styles.getRuleList()
Returns the list of all rules, in the order they are applied.
Returns
-
Array<StyleRule>
-
- ogma.styles.setEdgeTextsVisibility(value)
Show or hide all the edge texts. This method has an internal counter; if it's called with
false
, the counter is decreased by one, if it's called withtrue
the counter is increased by one. The counter starts at 0, and cannot go lower than 0. The edge texts are shown if the counter is equal to 0.Arguments
- value
(boolean)
- value
- ogma.styles.setEdgesVisibility(value)
Show or hide all the edges. This method has an internal counter; if it's called with
false
, the counter is decreased by one, if it's called withtrue
the counter is increased by one. The counter starts at 0, and cannot go lower than 0. The edges are shown if the counter is equal to 0.Arguments
- value
(boolean)
- value
- ogma.styles.setHoveredEdgeAttributes(attributes[, fullOverwrite])
Set the style of edges when they are hovered. If
null
is specified, no style will be applied to hovered edges.Arguments
- attributes
(EdgeAttributesValue|null)
:Attributes to apply to hovered edges
- fullOverwrite (optional)
(boolean)
[= false]
:If
false
, the specified attributes will be merged with the current attributes. Iftrue
, the attributes applied on hover will be exactly the ones supplied.
Examples
// Restoring the default edge hover attributes: ogma.styles.setHoveredEdgeAttributes({ outline: true, color: 'red', text: { backgroundColor: 'rgb(220, 220, 220)', minVisibleSize: 0 } });
- attributes
- ogma.styles.setHoveredNodeAttributes(attributes[, fullOverwrite])
Set the style of nodes when they are hovered. If
null
is specified, no style will be applied to hovered nodes.Arguments
- attributes
(NodeAttributesValue|null)
:Attributes to apply to hovered nodes
- fullOverwrite (optional)
(boolean)
[= false]
:If
false
, the specified attributes will be merged with the current attributes. Iftrue
, the attributes applied on hover will be exactly the ones supplied.
Examples
ogma.styles.setHoveredNodeAttributes({ outline: false, // Disabling the shadow on hover outerStroke: { color: 'green' // Changing the shadow on hover, }, text: function (node) { return node.getData('label'); } });
// Removing the style change on hover ogma.styles.setHoveredNodeAttributes(null);
// Restoring the default node hover attributes: ogma.styles.setHoveredNodeAttributes({ outline: true, outerStroke: { color: 'red', width: 5 }, text: { backgroundColor: 'rgb(220, 220, 220)', minVisibleSize: 0 } });
- attributes
- ogma.styles.setNodeTextsVisibility(value)
Show or hide all the node texts. This method has an internal counter; if it's called with
false
, the counter is decreased by one, if it's called withtrue
the counter is increased by one. The counter starts at 0, and cannot go lower than 0. The node texts are shown if the counter is equal to 0.Arguments
- value
(boolean)
- value
- ogma.styles.setNodesVisibility(value)
Show or hide all the nodes. This method has an internal counter; if it's called with
false
, the counter is decreased by one, if it's called withtrue
the counter is increased by one. The counter starts at 0, and cannot go lower than 0. The nodes are shown if the counter is equal to 0.Arguments
- value
(boolean)
- value
- ogma.styles.setSelectedEdgeAttributes(attributes[, fullOverwrite])
Set the style of edges when they are selected. If
null
is specified, no style will be applied to selected edges.Arguments
- attributes
(EdgeAttributesValue|null)
:Attributes to apply to selected edges
- fullOverwrite (optional)
(boolean)
[= false]
:If
false
, the specified attributes will be merged with the current attributes. Iftrue
, the attributes applied on selection will be exactly the ones supplied.
Examples
// Change the color on selection ogma.styles.setSelectedEdgeAttributes({ color: 'green' });
- attributes
- ogma.styles.setSelectedNodeAttributes(attributes[, fullOverwrite])
Set the style of nodes when they are selected. If
null
is specified, no style will be applied to selected nodes.Arguments
- attributes
(NodeAttributesValue|null)
:Attributes to apply to selected nodes
- fullOverwrite (optional)
(boolean)
[= false]
:If
false
, the specified attributes will be merged with the current attributes. Iftrue
, the attributes applied on selection will be exactly the ones supplied.
Examples
// Change the outer stroke color on selection ogma.styles.setSelectedNodeAttributes({ outerStroke:{ color: 'green' } });
- attributes
- ogma.styles.addEdgeRule([selector], rule) deprecated
Add a rule that impacts only edges.
Arguments
- selector (optional)
(EdgeSelector)
- rule
(EdgeAttributesValue)
Returns
- selector (optional)
- ogma.styles.addNodeRule([selector], rule) deprecated
Add a rule that impacts only nodes.
Arguments
- selector (optional)
(NodeSelector)
- rule
(NodeAttributesValue)
Returns
- selector (optional)
- ogma.styles.getEdgeRules() deprecated
Returns all rules that only impact edges.
Returns
-
Array<StyleRule>
-
- ogma.styles.getNodeRules() deprecated
Returns all rules that only impact nodes.
Returns
-
Array<StyleRule>
-
Ogma.tools
Ogma.tools.brand
- ogma.tools.brand.remove()
Remove the brand HTML element.
- ogma.tools.brand.set(html[, options])
Display the specified HTML in one of the corner of the canvas.
If the brand shows in one of the corner of the page instead of the Ogma container, change the css "position" attribute of the container to "relative".
Arguments
- html
(string)
:HTML content to display.
- options (optional)
(BrandOptions)
Returns
-
HTMLElement
Examples
ogma.tools.brand.set('Powered by MyCompany', { position: "top-right", className: "myCssClass" });
- html
Ogma.tools.connectNodes
- ogma.tools.connectNodes.disable()
Disable the "connectNodes" mode.
Examples
if (ogma.connectNodes.enabled()) { ogma.connectNodes.disable(); }
- ogma.tools.connectNodes.enable([options])
Enable the "connectNodes" mode, allowing the user to draw edges with the mouse.
Arguments
- options (optional)
(object)
- condition (optional)
(function(source: Node, target: Node): boolean)
:If specified, will only connect nodes that satisfy this condition.
- createNodes (optional)
(boolean)
[= true]
:Indicates if a node should be created when pointing on an empty space.
- cursorStyle (optional)
(CursorStyle)
[= "cell"]
- dashLength (optional)
(number)
[= 8]
- onComplete (optional)
(function(source:Node, target: Node, edge: Edge):void)
:Called when a new connection is created. Note that target and edge could be
null
in case of no edge is created. - onEdgeCreated (optional)
(function(edge: Edge):void)
:In this callback you can add properties or styles to the created edge.
- onNodeCreated (optional)
(function(node: Node):void)
:If
createNodes
is set to true, a new node will be created and here you can add properties or styles to it. - strokeColor (optional)
(Color)
[= "black"]
- strokeWidth (optional)
(number)
[= 2]
- condition (optional)
Examples
ogma.connectNodes.enable({ onNodeCreated: function(node) { node.setAttributes({ color: 'red' }); }, onEdgeCreated: function(edge) { edge.setAttributes({ width: 5 }); } });
- options (optional)
- ogma.tools.connectNodes.enabled()
Indicates if the "connectNodes" mode is enabled.
Examples
if (ogma.connectNodes.enabled()) { ogma.connectNodes.disable(); }
Ogma.tools.lasso
- ogma.tools.lasso.disable()
Disables lasso tool.
- ogma.tools.lasso.enable([options])
Enables the lasso selection tool
Arguments
- options (optional)
(object)
- bothExtremities (optional)
(boolean)
[= false]
:If set to
true
, edge will be passed tocallback
only if both of its ends are inside the selected area. By default, just one endpoint inside the selection is enough to be included. - callback (optional)
(function(payload: {nodes: NodeList, edges: EdgeList}))
:Called with the nodes and edges surrounded by the lasso. By default, add the nodes to the selection (edges are ignored).
- cursorStyle (optional)
(CursorStyle)
[= "cell"]
:Cursor style when the lasso is active (CSS property)
- fillColor (optional)
(Color)
[= "rgba(0,195,255,0.1)"]
:Lasso fill color
- strokeColor (optional)
(Color)
[= "#00C3FF"]
:Lasso stroke color
- strokeWidth (optional)
(number)
[= 1]
:Lasso stroke width
- bothExtremities (optional)
- options (optional)
- ogma.tools.lasso.enabled()
Check whether the lasso tool is enabled.
Returns
-
boolean
-
Ogma.tools.legend
- ogma.tools.legend.disable()
Disable the legend.
Examples
ogma.tools.legend.disable();
- ogma.tools.legend.enable([options])
Enable the legend. Provides indications on the meaning of the color, size, shape, image and icon of nodes and edges.
Important! In order to be generated for a specific attribute (color, size, etc), the following requirements must be met: - There must be exactly one rule for that attribute. If there are multiple rules for an attribute, only the first one is taken into account (which may lead to an incorrect legend)
- This rule must have been created with `ogma.rules.map()` or `ogma.rules.slice()`. If it's not the case, the widget for this attribute will not be shown.
Arguments
- options (optional)
(LegendOptions)
Returns
-
Promise<void>
Examples
var colorRule = ogma.rules.map({ field: 'country', values: { France: 'blue', Italy: 'green', Spain: 'red' }, fallback: 'black' }); ogma.styles.addNodeRule({ color: colorRule }); ogma.tools.legend.enable({ position: 'left', borderColor: 'grey', titleFunction: function (propertyPath) { // propertyPath is an array return propertyPath.join('.'); } });
- ogma.tools.legend.enabled()
Indicates if the legend is enabled.
Returns
-
boolean
Examples
console.log(ogma.tools.legend.enabled());
-
- ogma.tools.legend.getOptions()
Get Legend settings. Returns undefined when the legend is not enabled.
Returns
Ogma.tools.rectangleSelect
- ogma.tools.rectangleSelect.disable()
Disable the rectangle selection.
Examples
ogma.tools.rectangleSelect.disable();
- ogma.tools.rectangleSelect.enable([options])
Enable the selection by rectangle tool, allowing the user to select some nodes by drawing a rectangle on the screen.
Arguments
- options (optional)
(object)
- bothExtremities (optional)
(boolean)
[= false]
:If set to
true
, edge will be passed tocallback
only if both of its ends are inside the selected area. By default, just one endpoint inside the selection is enough to be included. - callback (optional)
(function(evt: {nodes: NodeList, edges: EdgeList}))
:Called with the nodes/edges surrounded by the rectangle. By default, add the surrounded nodes to the selection. If there is no surrounded node, add the surrounded edges instead.
- cursorStyle (optional)
(CursorStyle)
[= "cell"]
:Cursor style when the rectangle is active (CSS property)
- fillColor (optional)
(Color|null)
[= "rgba(0,195,255,0.1)"]
:Rectangle fill color
- strokeColor (optional)
(Color)
[= "#00C3FF"]
:Rectangle stroke color
- strokeWidth (optional)
(number)
[= 1]
:Rectangle stroke width
- bothExtremities (optional)
Examples
ogma.tools.rectangleSelect.enable({ strokeColor: 'blue', callback: function (payload) { // Override the default behavior and replaces the selection // instead of just adding the elements to the selection ogma.clearSelection(); payload.nodes.setSelected(true); payload.edges.setSelected(true); }) });
- options (optional)
- ogma.tools.rectangleSelect.enabled()
Indicates if the rectangle selection is enabled.
Returns
-
boolean
Examples
console.log(ogma.tools.rectangleSelect.enabled());
-
Ogma.tools.resize
- ogma.tools.resize.disable()
Disable the "resize" mode.
- ogma.tools.resize.enable([options])
Enable the "resize" mode, allowing the user to manually change the size of the selected nodes.
Arguments
- options (optional)
(object)
- color (optional)
(Color)
[= "#00C3FF"]
:Color used to display the nodes bounding box
- cursor (optional)
(CursorStyle)
[= "nesw-resize"]
:CSS cursor to use when the mouse is over a resizing handle
- detectionMargin (optional)
(number)
[= 5]
:Maximum distance (in pixels) the mouse can be to the resize handler and still be detected
- handleSize (optional)
(number)
[= 6]
:Width (in pixels) of the square indicator to drag in order to resize the node
- lineWidth (optional)
(number)
[= 1]
:Width (in pixels) of the stroke of the square representing the nodes bounding box
- nbNodesToSnapTo (optional)
(number)
[= 5]
:Number of close nodes to use for snapping.
- previewColor (optional)
(Color)
[= 'rgba(0, 0, 0, 0.2)']
:Color of the preview of the node being resized
- sizeIndicatorColor (optional)
(Color)
[= "black"]
:Color of the size indicator (shown when the node snaps to the size of another node)
- sizeIndicatorOffset (optional)
(number)
[= 5]
:Offset (in pixels) to the left on which the size indicator must be displayed
- sizeIndicatorThickness (optional)
(number)
[= 1]
:Thickness (in pixels) of the line used to draw the size indicator
- sizeIndicatorWidth (optional)
(number)
[= 3]
:Total width (in pixels) of the indicator size
- snappingRatio (optional)
(number)
[= 1.25]
:Ratio used to determine the size to snap to, when the node does not snap to another node size. Must be strictly greater than 1.
- color (optional)
- options (optional)
- ogma.tools.resize.enabled()
Indicates if the "resize" mode is enabled.
Returns
-
boolean
-
Ogma.tools.rewire
- ogma.tools.rewire.disable()
Disable the "rewire" tool'.
Examples
ogma.tools.rewiring.disable();
- ogma.tools.rewire.enable([options])
Enable the "rewire" tool, enabling the user to manually change the extremities of the selected edges.
Arguments
- options (optional)
(object)
- color (optional)
(Color)
[= "#00C3FF"]
:Color of the handle in the center of the nodes
- cursorOnDrag (optional)
(CursorStyle)
[= 'grabbing']
:CSS cursor style when dragging an edge
- cursorOnHover (optional)
(CursorStyle)
[= 'grab']
:CSS cursor style when hovering a node handle
- radius (optional)
(number)
[= 7]
:Radius, in pixels, of the handle in the center of the nodes
- color (optional)
Examples
ogma.tools.rewiring.enable();
- options (optional)
- ogma.tools.rewire.enabled()
Returns
-
boolean
:Indicates if the "rewire" tool is enabled
Examples
// Toggle the tool ogma.tools.rewiring[ogma.tools.rewiring.enabled() ? 'enable' : 'disable']();
-
Ogma.tools.snapping
- ogma.tools.snapping.disable()
Disables snapping mode in nodes dragging.
- ogma.tools.snapping.enable([options])
Enables the snapping mode while dragging the nodes.
Arguments
- options (optional)
(object)
- centerSnapDistance (optional)
(Number)
[= 240]
:Maximum distance between 2 nodes that allowes their centers to be aligned
- enabled (optional)
(Boolean)
[= false]
:Indicates whether the snapping is on when the node is being dragged
- guidelineColor (optional)
(Color)
[= 'red']
:Color of the axis-ligned guidelines
- guidelineWidth (optional)
(Number)
[= 1]
:Width of the alignment guideline
- neighbours (optional)
(object)
:Equal nodes distribution: snaps a node to the middle of the distance between two other nodes or to the same distance as two of its neighbours
- enabled (optional)
(Boolean)
[= true]
:Enables the mode.
- lineColor (optional)
(Color)
[= #00C3FF]
:Guideline color
- lineWidth (optional)
(Number)
[= 1]
:Guideline width
- offset (optional)
(Number)
[= 5]
:Distance between the guideline and common bounding box of aligned nodes
- tolerance (optional)
(Number)
[= 3]
:Snapping distance
- enabled (optional)
- preferredDistance (optional)
(object)
:Options for preferred ditance snapping: pairwise snapping of the nodes based on their distance
- enabled (optional)
(Boolean)
[= true]
:Enables the mode.
- lineColor (optional)
(Color)
[= #00C3FF]
:Guideline color
- lineWidth (optional)
(Number)
[= 1]
:Guideline width
- ratio (optional)
(Number)
[= 1.13]
:Preferred distance ratio between nodes
a
andb
, according to the formulad = (Ra + Rb) * ratio
- tolerance (optional)
(Number)
[= 10]
:Snapping distance
- enabled (optional)
- sideSnapDistanceFactor (optional)
(Number)
[= 3]
:Maximum distance between 2 nodes that allowes their sides to be aligned. The value is the factor of dragged node diameter.
- tolerance (optional)
(Number)
[= 5]
:Pixel tolerance distance within which node is snapped towards the guideline
- centerSnapDistance (optional)
- options (optional)
Ogma.tools.tooltip
- ogma.tools.tooltip.hide()
Hide the tooltip that is currently being displayed.
- ogma.tools.tooltip.isShown()
Indicates if a tooltip is currently displayed.
Returns
-
boolean
-
- ogma.tools.tooltip.onBackgroundClick(handler[, options])
Indicates the tooltip to display when the background is left clicked.
Arguments
- handler
(function (): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onBackgroundDoubleClick(handler[, options])
Indicates the tooltip to display when the background is double clicked.
Arguments
- handler
(function (): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onBackgroundRightClick(handler[, options])
Indicates the tooltip to display when the background is right clicked.
Arguments
- handler
(function (): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onEdgeClick(handler[, options])
Indicates the tooltip to display when a edge is left clicked.
Arguments
- handler
(function (edge: Edge): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onEdgeDoubleClick(handler[, options])
Indicates the tooltip to display when a edge is double clicked.
Arguments
- handler
(function (edge: Edge): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onEdgeHover(handler[, options])
Indicates the tooltip to display when a edge is hovered.
Arguments
- handler
(function (edge: Edge): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onEdgeRightClick(handler[, options])
Indicates the tooltip to display when a edge is right clicked.
Arguments
- handler
(function (edge: Edge): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onNodeClick(handler[, options])
Indicates the tooltip to display when a node is left clicked.
Arguments
- handler
(function (node: Node): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onNodeDoubleClick(handler[, options])
Indicates the tooltip to display when a node is double clicked.
Arguments
- handler
(function (node: Node): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.onNodeHover(handler[, options])
Indicates the tooltip to display when a node is hovered.
Arguments
- handler
(function (node: Node): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
Examples
ogma.tools.tooltip.onNodeHover(function (node) { return '<p>' + node.getId() + '</p>'; });
- handler
- ogma.tools.tooltip.onNodeRightClick(handler[, options])
Indicates the tooltip to display when a node is right clicked.
Arguments
- handler
(function (node: Node): (string|Promise<string>))
:The function that will be called to generate the tooltip. Must return a HTML string.
- options (optional)
(TooltipOptions)
- handler
- ogma.tools.tooltip.refresh()
Refresh the current tooltip.
Ogma.transformations
- ogma.transformations.addEdgeFilter(options)
Hide all edges for which the specified function evaluate to false. The filter is applied as long as it's not removed and is updated when edges are added/removed/their data is updated. Also hides the edges adjacent to the hidden edges.
Arguments
- options
(object|function(edge: Edge): boolean)
- criteria
(function(edge: Edge): boolean)
- duration (optional)
(number)
[= 0]
:Duration of the filtering animation. When filtering is animated, edges are gradually faded, before disappearing completely. Ignored if
enabled
is false. - enabled (optional)
(boolean)
[= true]
:Indicates if the filter must be enabled.
- criteria
Returns
- options
- ogma.transformations.addEdgeGrouping([options])
Group the edges that are parallel and match the same group id together. The groups are automatically updated when the original edges are added, removed or when their data is updated.
Arguments
- options (optional)
(object)
- enabled (optional)
(boolean)
[= true]
:Indicates if the edge grouping must be enabled.
- generator (optional)
(function(edges: EdgeList, groupId: string, transformation: Transformation): EdgeDataAndAttributes)
:Given a list of edges that should be grouped together, must return the new edge (meta-edge) to be added.
- groupIdFunction (optional)
(function(edge: Edge): string)
: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.
- selector (optional)
(function(edge: Edge): boolean)
:Only edges that match this criteria will be grouped with other edges. By default, all the edges will be assigned a group.
- separateEdgesByDirection (optional)
(boolean)
[= false]
: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.
- enabled (optional)
Returns
-
Transformation
:The added transformation
Examples
// Most simple case, groups all parallel edges with the same direction together ogma.transformations.addEdgeGrouping();
- options (optional)
- ogma.transformations.addNeighborGeneration(options)
For each node that match the selector, create one or more neighbor nodes, each identified by a string. If multiple nodes give the same string identifier, they will all share the same neighbor.
Arguments
- options
(object)
- duration (optional)
(number)
[= 0]
- edgeGenerator (optional)
(function(originalNode: Node, generatedNode: Node): RawEdge)
: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.
- enabled (optional)
(boolean)
[= true]
- neighborIdFunction
(function(node: Node): string|Array<string>|null)
: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. - nodeGenerator (optional)
(function(identifier: string, nodes: NodeList): RawNode)
: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.
- selector (optional)
(function(node: Node): boolean)
:If unspecified, defaults to a function that always returns true.
- duration (optional)
Returns
Examples
var transformation = ogma.transformations.addNeighborsGeneration({ selector: function(node){ return node.getData('type') === 'person'; }, neighborIdFunction: function(node){ return node.getData('country'); }, nodeGenerator: function(nodes, countryName) { return { data: { type: 'country', name: countryName, population: nodes.size } }; } });
- options
- ogma.transformations.addNeighborMerging(options[, duration][, enabled])
Hide the nodes that match the selector, and add the data properties specified by
dataFunction
to their neighbors. When the transformation is destroyed or disabled, the data of the affected nodes is restored.Arguments
- options
(object)
- duration (optional)
(number)
[= 0]
- enabled (optional)
(boolean)
[= true]
Returns
Examples
// Hides all the countries, and add a "country" property to their neighbors var transformation = ogma.transformations.addNeighborsMerging({ selector: function(node) { return node.getData('type') === 'country'; } dataFunction: function(node) { return { country: node.getData('name') }; } });
- options
- ogma.transformations.addNodeCollapsing(options)
Hide the nodes that match the specified selector. For each of the hidden nodes, create an edge between each pair of adjacent nodes of this node. In essence, it's transforming the graph such as (A -> B -> C) becomes (A -> C), with B being a node that matches the selector. Note that this will throw in the case of multiple collapsed nodes, for instance a daisy chain of nodes like (A -> B -> C -> D) where B and C are collapsed.
Arguments
- options
(object)
- duration (optional)
(number)
[= 0]
- edgeGenerator (optional)
(function(hiddenNode: Node, node1: Node, node2: Node, edges1: EdgeList, edges2: EdgeList): RawEdge|null)
:Function returning the RawEdge to create for each pair of adjacent nodes.
hiddenNode
is the node that is hidden (matchesselector
).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 eithernode1
ornode2
. 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 andnode2
is used as the target. Ifnull
is returned, no edge is created between the two nodes. If no edge generator is specified, a default edge is created. - enabled (optional)
(boolean)
[= true]
- selector
(function(node: Node): boolean)
:Function indicating which nodes will be hidden.
- duration (optional)
Returns
Examples
var nodeCollapsing = ogma.transformations.addNodeCollapsing({ selector: function(node) { return node.getData('foo') === 'bar' } });
- options
- ogma.transformations.addNodeFilter(options)
Hide all nodes for which the specified function evaluate to false. The filter is applied as long as it's not removed and is updated when nodes are added/removed/their data is updated. Also hides the edges adjacent to the hidden nodes.
Arguments
- options
(object|function(node: Node): boolean)
- criteria
(function(node: Node): boolean)
- duration (optional)
(number)
[= 0]
:Duration of the filtering animation. When filtering is animated, nodes are gradually faded, before disappearing completely. Ignored if
enabled
is false. - enabled (optional)
(boolean)
[= true]
:Indicates if the filter must be enabled.
- criteria
Returns
Examples
// Hides all the nodes for which the `country` data property is not "USA", and remove the filter 1 second after var filter = ogma.addNodeFilter(function (node) { return node.getData('country') === 'USA'; }); filter.whenApplied().then(function () { console.log('filter applied'); return filter.destroy(); }).then(function() { console.log('filter removed'); });
- options
- ogma.transformations.addNodeGrouping([options])
Group the nodes that match the same group id together. The groups are automatically updated when original nodes are added, removed or when their data is updated.
Arguments
- options (optional)
(object)
- duration (optional)
(number)
[= 0]
:Animation time in milliseconds. The animation will be played once after the creation of the group. Ignored if
enabled
is false. - edgeGenerator (optional)
(function(edges: EdgeList, groupId: string, transformation: Transformation): EdgeDataAndAttributes)
:If
groupEdges
istrue
, indicates the function used to generate the new edges from the sub-edges. Ignored ifgroupEdges
isfalse
. - enabled (optional)
(boolean)
[= true]
:Indicates if the grouping must be enabled.
- groupEdges (optional)
(boolean)
[= true]
:Indicates if parallel edges that end up having at least one meta-node extremity should be grouped together (to reduce cluttering).
- groupIdFunction (optional)
(function(node: Node): string)
: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.
- groupSelfLoopEdges (optional)
(boolean)
[= false]
: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.
- nodeGenerator (optional)
(function(nodes: NodeList, groupId: string, transformation: Transformation): NodeDataAndAttributes)
:Given a list of nodes that should be grouped together, must return the new node (meta-node) to be added. If
attributes.x
andattributes.y
are not specified, the meta-node will be put at the center of the nodes. - onCreated (optional)
(function(metaNode: Node, showContents: boolean, subNodes: NodeList, subEdges: EdgeList): Promise<any>)
:This is a callback to be used once the grouping is applied, if you want to apply some positioning on the contents of the group: run a layout or use pre-defined coordinates.
- restorePositions (optional)
(boolean)
[= true]
:When the grouping is disabled/destroyed, indicates if the nodes should be positioned back around the meta-node position
- selector (optional)
(function(node: Node): boolean)
:Only nodes that match this criteria will be grouped with other nodes. By default, all the nodes will be assigned a group.
- separateEdgesByDirection (optional)
(boolean)
[= false]
: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. - showContents (optional)
(function(metaNode: Node): boolean | boolean)
[= false]
:Function that would define if the contents of the group node should be hidden or not. This is called on every transformation update.
- duration (optional)
Returns
-
Transformation
:The added transformation
Examples
// Imagine that each node represents a company. // In this example we group all companies by country, only if the country is a member of the UE. var groupTransformation = ogma.transformations.addNodeGrouping({ selector: function (node) { return node.getData('isCountryMemberOfUE') === true; }, groupIdFunction: function (node) { return node.getData('country'); }, nodeGenerator: function (nodes) { return { // meta-nodes will appear in green with a size of 20 attributes: { color: 'green', size: 20 }, data: { country: nodes.get(0).getData('country'), isCountryMemberOfUE: true } }; } }); groupTransformation.whenApplied().then(function () { console.log('Grouping done!'); });
- options (optional)
- ogma.transformations.addVirtualProperties(options)
Add (or overwrite) some data properties to the specified nodes and edges. When the transformation is disabled/destroyed, the old data is restored.
Arguments
- options
(object)
- edgeDataFunction (optional)
(function(edge: Edge): object)
:Indicates which data properties to add to a edge. If unspecified, no data property will be added to any edge.
- edgeSelector (optional)
(function(edge: Edge): boolean)
:Indicates if the transformation should be applied to a given edge. If unspecified, it is applied to all edges.
- enabled (optional)
(boolean)
[= true]
- nodeDataFunction (optional)
(function(node: Node): object)
:Indicates which data properties to add to a node. If unspecified, no data property will be added to any node.
- nodeSelector (optional)
(function(node: Node): boolean)
:Indicates if the transformation should be applied to a given node. If unspecified, it is applied to all nodes.
- edgeDataFunction (optional)
Returns
Examples
// Very simple example that adds a data property indicating the id of all nodes which match a criteria var virtualProperties = ogma.transformations.addVirtualProperties({ nodeSelector: function(node) { return node.getData('foo') === 'bar' }, nodeDataFunction: function(node) { return { id: node.getId() }; } });
- options
- ogma.transformations.afterNextUpdate()
Returns a Promise that resolves after the next time the transformations are updated
Returns
-
Promise<void>
Examples
// Add a filter ogma.addNodeFilter(node => node.getData('country') === 'USA'); // Adding a node will trigger the refresh of transformations ogma.addNode({id: 'foo', data: {country: 'Brazil'}}); ogma.transformations.afterNextUpdate().then(() => { // The transformations have been re-applied, the added node is now hidden });
-
- ogma.transformations.clear()
Clear all transformations.
Returns
-
Promise<void>
-
- ogma.transformations.getList()
Returns the list of transformations applied to the graph.
Returns
-
Array<Transformation>
-
Ogma.view
- ogma.view.afterNextFrame()
Returns a Promise that resolves after the next frame is rendered.
Returns
-
Promise<void>
-
- ogma.view.beforeNextFrame()
Returns a Promise that resolves before the next frame is rendered.
Returns
-
Promise<void>
-
- ogma.view.forceResize()
Forces the canvas to be re-sized according to the container. Typically useful when the visibility of the Ogma container changes, to notify Ogma that it must refresh the scene.
Examples
// Create a container and hide it let container = document.createElement('div'); div.style.display = 'none'; ogma.setContainer(container); // Display the container and notify Ogma about it div.style.display = 'block'; ogma.view.forceResize();
- ogma.view.get()
Retrieve the current view.
Returns
-
{x: number, y: number, zoom: number, angle: number, width: number, height: number}
-
- ogma.view.getAngle()
Indicates the current angle of the view.
Returns
-
number
:Angle, in radians.
-
- ogma.view.getCenter()
Indicates the center of the view.
Returns
-
{x: number, y: number}
-
- ogma.view.getElementAt(pos, convertToScreenCoordinates)
Returns the element located at the specified screen coordinates.
Arguments
- pos
(object)
- x
(number)
- y
(number)
- x
- convertToScreenCoordinates
(boolean = false)
:Wether or not the function will convert the coordinates to screen space before running the query
Returns
- pos
- ogma.view.getElementsInside(xmin, ymin, xmax, ymax, convertToScreenCoordinates)
Returns elements inside of the rectangle defined by the screen coordinates.
Arguments
- xmin
(number)
:X coordinate of the bottom left corner
- ymin
(number)
:Y coordinate of the bottom left corner
- xmax
(number)
:X coordinate of the top right corner
- ymax
(number)
:Y coordinate of the top right corner
- convertToScreenCoordinates
(boolean = true)
:Wether or not the function will convert the coordinates to screen space before running the query
Returns
- xmin
- ogma.view.getGraphBoundingBox()
Returns the bounding box of the graph, in graph coordinates.
Returns
- ogma.view.getImageData()
Returns a new
ImageData
, containing the pixels that are displayed by the current renderer. If the current renderer is not canvas or WebGL, the method returnsnull
.If the screen has a pixel density greater than one (for example, retina screen), the retrieved ImageData will not be rescaled and will have a bigger width and height than the view.
Note: since it's simply copying pixels, this method is way faster than an image export (
ogma.export.png()
for example).Returns
-
Promise<ImageData|null>
-
- ogma.view.getSize()
Returns the view width and height.
Returns
-
{ width: number, height: number }
-
- ogma.view.getZoom()
Returns the current zoom level. If geo mode is enabled, use
ogma.geo.getZoom
instead.Returns
-
number
-
- ogma.view.graphToScreenCoordinates(coordinates)
Returns a position on the screen from graph coordinates (e.g a node's position).
Arguments
- coordinates
({x: number, y: number})
Returns
-
{x: number, y: number}
- coordinates
- ogma.view.isFullScreen()
Indicates if the full screen mode is currently enabled.
Returns
-
boolean
-
- ogma.view.locateGraph([options])
Centers the view on the graph.
Arguments
- options (optional)
(LocateOptions)
Returns
-
Promise<void>
Examples
ogma.view.locateGraph({ duration: 500 }).then(function () { console.log('Locate done!'); });
- options (optional)
- ogma.view.locateRawGraph(graph[, options])
Centers the view on the specified raw graph.
Arguments
- graph
(RawGraph)
- options (optional)
(LocateOptions)
Returns
-
Promise<void>
Examples
// We center the camera where the graph will be when added to Ogma, // and then we add the graph progressively. ogma.parse.gexfFromUrl('graphs/myBigGraph.gexf').then(function (graph) { ogma.view.locateRawGraph(graph); ogma.setGraph(graph, {batchSize: 1000}); });
- graph
- ogma.view.move(offset[, options])
Move the center of the view by the specified amount of pixels (NOT graph coordinates).
Arguments
- offset
({x: number, y: number})
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- offset
- ogma.view.moveTo(view[, options])
Smoothly animate to the particular view. If you don't provide the
duration
option, the optimal animation duration is used based on the translation distance.Arguments
- view
(object)
- x
(number)
:X coordinate of the center of the view.
- y
(number)
:Y coordinate of the center of the view.
- zoom
(number)
:Zoom level of the view.
- x
- options (optional)
(CameraAnimationOptions)
:For duration and easing
Returns
-
Promise<void>
Examples
ogma.view.moveTo({ x: 10, y: 20, zoom: 5 }) .then(() => console.log('zoomed on view'));
- view
- ogma.view.moveToBounds(target[, options])
Animates the view to the bounding box. If you don't provide the
duration
option, the optimal animation duration is used based on the translation distance.Arguments
- target
(BoundingBox | [number, number, number, number])
:It can be a
BoundingBox
or an Array ofminX
,minY
,maxX
,maxY
in graph coordinates - options (optional)
(CameraAnimationOptions)
:For duration and easing
Returns
-
Promise<void>
Examples
ogma.view.moveToBounds( ogma.getNodes(['id1', 'id2']).getBoundingBox(), ).then(() => console.log('id1 and id2 are in view');
- target
- ogma.view.rotate(angle[, options])
Rotate the view by the specified angle.
Arguments
- angle
(number)
:Angle, in radians.
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- angle
- ogma.view.screenToGraphCoordinates(coordinates)
Returns graph coordinates from a position on the screen.
Arguments
- coordinates
({x: number, y: number})
Returns
-
{x: number, y: number}
- coordinates
- ogma.view.set(view[, options])
Set the view.
Arguments
- view
(object)
- angle (optional)
(number)
:Angle of the view, in radians.
- x (optional)
(number)
:X coordinate of the center of the view.
- y (optional)
(number)
:Y coordinate of the center of the view.
- zoom (optional)
(number)
:Zoom level of the view.
- angle (optional)
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- view
- ogma.view.setAngle(angle[, options])
Set the angle of the view.
Arguments
- angle
(number)
:Angle, in radians.
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- angle
- ogma.view.setCenter(center[, options])
Set the center of the view, in graph coordinates.
Arguments
- center
({x: number, y: number})
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- center
- ogma.view.setFullScreen(value)
Enable or disable the full screen mode.
Arguments
- value
(boolean)
:true
to enable the full screen mode,false
to disable it.
Returns
-
Promise<void>
Examples
ogma.events.onKeyPress('f', function () { ogma.view.setFullScreen(!ogma.view.isFullScreen()); });
- value
- ogma.view.setSize(size)
Set the size of the view. This method only has effect if this instance of Ogma has no container.
Arguments
- size
(object)
- height
(number)
- width
(number)
- height
Returns
-
Promise<void>
- size
- ogma.view.setZoom(zoom[, options])
Set the zoom level. If geo mode is enabled, use
ogma.geo.setZoom
instead.Arguments
- zoom
(number)
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- zoom
- ogma.view.zoomIn([modifier][, options])
Multiply the current zoom level by the specified amount. If geo mode is on, it will fall back to
ogma.geo.setZoom
and use the zoom modifier defined by the projection.Arguments
- modifier (optional)
(number|CameraAnimationOptions)
:If not specified, uses the value used for manual (mouse wheel zoom.
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- modifier (optional)
- ogma.view.zoomOut([modifier][, options])
Divide the current zoom level by the specified amount. If geo mode is on, it will fall back to
ogma.geo.setZoom
and use the zoom modifier defined by the projection.Arguments
- modifier (optional)
(number|CameraAnimationOptions)
:If not specified, uses the value used for manual (mouse wheel) zoom.
- options (optional)
(CameraAnimationOptions)
Returns
-
Promise<void>
- modifier (optional)
Node
- node.isNode
Read-only property that is always
true
. - node.addClass(className[, options])
Add the specified class to the node.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Node>
- className
- node.addClasses(classNames[, options])
Add the specified classes to the node.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Node>
- classNames
- node.getAdjacentEdges([options])
Returns the list of adjacent edges of the node.
Arguments
- options (optional)
(AdjacencyOptions)
Returns
- options (optional)
- node.getAdjacentNodes([options])
Returns the list of adjacent nodes of the node.
Arguments
- options (optional)
(AdjacencyOptions)
Returns
- options (optional)
- node.getAttribute(attributeName)
Returns the value of the specified attribute for the node.
Arguments
- attributeName
(PropertyPath)
:Attribute to retrieve.
Returns
-
any
Examples
node.getAttribute('color'); // "blue"
- attributeName
- node.getAttributes([attributeNames])
Returns an object containing the specified attributes for the node.
Arguments
- attributeNames (optional)
(Array<PropertyPath>)
:List of attributes to include in the object. If not specified, includes all the node attributes.
Returns
Examples
node.setAttributes({x: 50, y: 100, color: 'blue'}); console.log(node.getAttributes(['x', 'y', 'color'])); // {x: 50, y: 100, color: 'blue'}
- attributeNames (optional)
- node.getBoundingBox()
Returns the bounding box of the node, in graph coordinates.
Returns
- node.getClassList()
Returns the list of classes that the node has.
Returns
-
Array<string>
-
- node.getConnectedComponent([options])
Arguments
- options (optional)
(object)
- filter (optional)
(Filter)
[= 'visible']
- returnIds (optional)
(boolean)
[= false]
:Return node ids instead of Nodes
- filter (optional)
Returns
Examples
// detect whether the nodes belong to the same component var node1 = ogma.getNode('1'); var node2 = ogma.getNode('2'); var sameSubGraph = node1.getConnectedComponent().includes(node2);
- options (optional)
- node.getData([property])
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
- property (optional)
(PropertyPath)
Returns
-
any
Examples
// Simple case ogma.getNode('n0').getData('propName'); // Accessing a nested property ogma.getNode('n0').getData(['foo', 'bar']);
- property (optional)
- node.getDegree([options])
Retrieve the number of neighbors of the node.
Arguments
- options (optional)
(object|EdgeDirection)
- direction (optional)
(EdgeDirection)
[= "both"]
:Direction of the edges to follow.
- filter (optional)
(Filter)
[= "visible"]
:Indicates which edges to take into account
- direction (optional)
Returns
-
number
- options (optional)
- node.getGeoCoordinates()
Returns node's geographical coordinate
Returns
- node.getId()
Returns the id of the node.
Returns
- node.getMetaNode()
If the node is grouped inside a meta-node, returns this meta-node. Otherwise, returns null.
Returns
-
Node|null
-
- node.getPosition()
Retrieve the position of the node. This is strictly equivalent to
node.getAttributes(['x', 'y'])
.Returns
-
{x: number, y: number}
-
- 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
-
NodeList|null
-
- node.getTransformation()
Returns the transformation that created the node, if it is virtual. Otherwise returns
null
.Returns
-
Transformation|null
-
- node.hasClass(className)
Indicates if the node has the specified class.
Arguments
- className
(string)
Returns
-
boolean
- className
- node.isInView([options])
Indicates if the node is visible in the current view.
Arguments
- options (optional)
(object)
- margin (optional)
(number)
[= 0]
:Tolerance in pixels.
- margin (optional)
Returns
-
boolean
- options (optional)
- node.isSelected()
Indicates if the node is currently selected.
Returns
-
boolean
Examples
console.log(ogma.getNode('n0').isSelected());
-
- node.isVirtual()
Indicates if the node was created by a transformation (
true
) or not (false
).Returns
-
boolean
-
- 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
-
boolean
-
- node.locate([options])
Centers the view on the node.
Arguments
- options (optional)
(LocateOptions)
Returns
-
Promise<void>
Examples
ogma.getNode('n0').locate();
- options (optional)
- node.pulse([options])
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
- options (optional)
(object)
- duration (optional)
(number)
[= 1000]
:Duration of a pulse (milliseconds)
- endColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.0)"]
:Ending color of the pulse
- endRatio (optional)
(number)
[= 2]
:Where the pulse ends, relative to the node siz (1 = at the node's border)
- interval (optional)
(number)
[= 800]
:Interval between two pulses (milliseconds)
- number (optional)
(number)
[= 1]
:Number of pulses
- startColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.6)"]
:Starting color of the pulse
- startRatio (optional)
(number)
[= 1]
:Where the pulse starts, relative to the node siz (1 = at the node's border)
- width (optional)
(number)
[= 50]
:Width of the pulse in pixels
- duration (optional)
- options (optional)
- node.removeClass(className[, options])
Remove the specified class from the node.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Node>
- className
- node.removeClasses(classNames[, options])
Remove the specified class from the node.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Node>
- classNames
- node.resetAttributes([attributeNames][, options])
Remove all attributes that have been applied through
setAttributes
. Original attributes or attributes applied by the rules are not affected.Arguments
- attributeNames (optional)
(Array<PropertyPath>)
:List of attributes to clear. If no attribute is specified, clear all of them.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Node>
Examples
node.setAttributes({color: 'blue'}); node.resetAttributes();
- attributeNames (optional)
- node.setAttribute(attribute, value[, options])
Set the specified attribute of the node.
Arguments
- attribute
(PropertyPath)
- value
(any)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Node>
Examples
// Change the color of the node node.setAttribute('color', 'blue'); // Change the scale of the top left badge // The two lines do the same thing node.setAttribute('badges.topLeft.scale', 0.5); node.setAttribute(['badges', 'topLeft', 'scale'], 0.5);
- attribute
- node.setAttributes(attributes[, options])
Set the individual attributes of the node.
Arguments
- attributes
(NodeAttributesValue)
:Attributes to update
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Node>
Examples
node.setAttributes({ x: 100, y: 50, color: 'blue', radius: 15 }, { duration: 500 });
- attributes
- node.setData([property], value)
Set the specified data property of the node. If no property is specified, update the whole data object.
Arguments
- property (optional)
(PropertyPath)
- value
(any|function(node: Node): any)
Returns
Examples
// Simple case ogma.getNode('n0').setData('propName', 'propValue'); // Setting a nested property ogma.getNode('n0').setData(['foo', 'bar'], 'value');
- property (optional)
- node.setGeoCoordinates(coords)
Set geographical position of the node. Passing null will erase the coordinates and remove the node from the visualisation in geo mode.
Arguments
- coords
(GeoCoordinate|null)
Returns
-
Promise<Node>
Examples
var node = ogma.getNode('id'); node.setGeoCoodinates({ latitude: 5, longitude: 10 }); console.log(node.getGeoCoordinates()); // { latitude: 5, longitude: 10}
- coords
- node.setSelected(active)
Add or remove the node to/from the selection.
Arguments
- active
(boolean)
:whether to select or unselect the node.
Examples
ogma.getNode('n0').setSelected(true);
- active
- node.toJSON([options])
Returns an object containing the id, attributes and data of the node.
Arguments
- options (optional)
(object)
- attributes (optional)
(Array<PropertyPath>|"all")
[= []]
:List of attributes to retrieve. By default, retrieve all attributes.
- data (optional)
(function (data: any): any)
:Function that takes the node's data in input and return the data to retrieve. By default return the whole object.
- attributes (optional)
Returns
Examples
// Simple case: serialize a node as JSON var toSerialize = node.toJSON(); var serialized = JSON.stringify(toSerialize); // Since the `toJSON()` method doesn't take any argument in this example, it's also possible // to not call it explicitly: var serialized = JSON.stringify(node);
// Only serialize a few attributes and the `customerInfo` data property var toSerialize = node.toJSON({ attributes: ['color', 'radius', 'text.content', 'text.font'], data: function (data) { return data.customerInfo; } });
- options (optional)
- node.toList()
Returns a new NodeList that contains only the node.
Returns
Edge
- edge.isNode
Read-only property that is always
false
. - edge.addClass(className[, options])
Add the specified class to the edge.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Edge>
- className
- edge.addClasses(classNames[, options])
Add the specified classes to the edge.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Edge>
- classNames
- edge.getAttribute(attributeName)
Returns the value of the specified attribute for the edge.
Arguments
- attributeName
(PropertyPath)
:Attribute to retrieve.
Returns
-
any
Examples
edge.getAttribute('color'); // "blue"
- attributeName
- edge.getAttributes([attributeNames])
Returns an object containing the specified attributes for the edge.
Arguments
- attributeNames (optional)
(Array<PropertyPath>)
:List of attributes to include in the object. If not specified, includes all the edge attributes.
Returns
Examples
edge.setAttributes({width: 50, color: 'blue'}); console.log(edge.getAttributes(['width', 'color'])); // {width: 50, color: 'blue'}
- attributeNames (optional)
- edge.getBoundingBox([ignoreCurvature])
Returns the bounding box of the edge, in graph coordinates.
Arguments
- ignoreCurvature (optional)
(boolean)
[= false]
:Use it if you want to only take into account the edge source and target.
Returns
- ignoreCurvature (optional)
- edge.getClassList()
Returns the list of classes that the edge has.
Returns
-
Array<string>
-
- edge.getData([property])
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
- property (optional)
(PropertyPath)
Returns
-
any
- property (optional)
- edge.getExtremities()
Returns a
NodeList
containing the source and the target of the edge.Returns
- edge.getId()
Returns the id of the edge.
Returns
- edge.getMetaEdge()
If the edge is grouped inside a meta-edge, returns this meta-edge. Otherwise, returns null.
Returns
-
Edge|null
-
- edge.getParallelEdges([options])
Retrieves the list of edges parallel to the edge, including the source edge itself.
Arguments
- options (optional)
(object)
- filter (optional)
(Filter)
[= "visible"]
:Indicates which edges to take into account
- filter (optional)
Returns
- options (optional)
- edge.getSource()
Returns the source node of the edge
Returns
- 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
-
EdgeList|null
-
- edge.getTarget()
Returns the target node of the edge
Returns
- edge.getTransformation()
Returns the transformation that created the edge, if it is virtual. Otherwise returns
null
.Returns
-
Transformation|null
-
- edge.hasClass(className)
Indicates if the edge has the specified class.
Arguments
- className
(string)
Returns
-
boolean
- className
- edge.isInView([options])
Indicates if the edge is visible in the current view.
Arguments
- options (optional)
(object)
- margin (optional)
(number)
[= 0]
:Tolerance in pixels.
- margin (optional)
Returns
-
boolean
- options (optional)
- edge.isSelected()
Indicates if the edge is currently selected.
Returns
-
boolean
-
- edge.isVirtual()
Indicates if the edge was created by a transformation (
true
) or not (false
).Returns
-
boolean
-
- 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
-
boolean
-
- edge.locate([options])
Centers the view on the edge.
Arguments
- options (optional)
(LocateOptions)
Returns
-
Promise<void>
Examples
ogma.getEdge('e0').locate();
- options (optional)
- edge.pulse([options])
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
- options (optional)
(object)
- duration (optional)
(number)
[= 1000]
:Duration of a pulse (milliseconds)
- endColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.0)"]
:Ending color of the pulse
- endRatio (optional)
(number)
[= 2]
:Where the pulse ends, relative to the edge siz (1 = at the edge's border)
- interval (optional)
(number)
[= 800]
:Interval between two pulses (milliseconds)
- number (optional)
(number)
[= 1]
:Number of pulses
- startColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.6)"]
:Starting color of the pulse
- startRatio (optional)
(number)
[= 1]
:Where the pulse starts, relative to the edge siz (1 = at the edge's border)
- width (optional)
(number)
[= 10]
:Width of the pulse in pixels
- duration (optional)
- options (optional)
- edge.removeClass(className[, options])
Remove the specified class from the edge.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Edge>
- className
- edge.removeClasses(classNames[, options])
Remove the specified class from the edge.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Edge>
- classNames
- edge.resetAttributes([attributeNames][, options])
Remove all attributes that have been applied through
setAttributes
. Original attributes or attributes applied by the rules are not affected.Arguments
- attributeNames (optional)
(Array<PropertyPath>)
:List of attributes to clear. If no attribute is specified, clear all of them.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Edge>
- attributeNames (optional)
- edge.setAttribute(attribute, value[, options])
Set the specified attribute of the edge.
Arguments
- attribute
(PropertyPath)
- value
(any)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Edge>
Examples
// Change the color of the edge edge.setAttribute('color', 'blue'); // Change the scale of the secondary text // The two lines do the same thing edge.setAttribute('text.secondary.scale', 0.5); edge.setAttribute(['text', 'secondary', 'scale'], 0.5);
- attribute
- edge.setAttributes(attributes[, options])
Set the individual attributes of the edge.
Arguments
- attributes
(EdgeAttributesValue)
:Attributes to update
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<Edge>
Examples
edge.setAttributes({width: 50, color: 'blue'}, { duration: 500 });
- attributes
- edge.setData([property], value)
Set the specified data property of the edge. If no property is specified, update the whole data object.
Arguments
- property (optional)
(PropertyPath)
- value
(any|function(edge: Edge): any)
Returns
- property (optional)
- edge.setSelected(active)
Add or remove the edge to/from the selection.
Arguments
- active
(boolean)
:whether to select or unselect the edge.
- active
- edge.setSource(source)
Set the source node of the edge.
Arguments
- source
(Node)
- source
- edge.setTarget(target)
Set the target node of the edge.
Arguments
- target
(Node)
- target
- edge.toJSON([options])
Returns an object containing the id, source id, target id, attributes and data of the edge.
Arguments
- options (optional)
(object)
- attributes (optional)
(Array<PropertyPath>|"all")
[= []]
:List of attributes to retrieve. By default, retrieve all attributes.
- data (optional)
(function (data: any): any)
:Function that takes the edge's data in input and return the data to retrieve. By default return the whole object.
- attributes (optional)
Returns
- options (optional)
- edge.toList()
Returns a new EdgeList that contains only the edge.
Returns
NodeList
- nodeList.isNode
Read-only property that is always
true
. - nodeList.size
Read-only property that indicates the number of nodes in the list.
- nodeList.addClass(className[, options])
Add the specified class to the nodes.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<NodeList>
- className
- nodeList.addClasses(classNames[, options])
Add the specified classes to the nodes.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<NodeList>
- classNames
- nodeList.concat(nodes)
Arguments
- nodes
(NodeList)
Returns
- nodes
- nodeList.dedupe()
Returns a new NodeList which does not contain any duplicate node.
Returns
- nodeList.fillData([property], value)
Set the specified data property of the nodes with the same value.
Arguments
- property (optional)
(PropertyPath|any)
:Path of the data property to update. If no property is specified, update the whole data object.
- value
(any)
:Value that will be assigned to all the nodes.
Returns
Examples
ogma.getNodes().fillData('propName', 'value');
- property (optional)
- nodeList.filter(callback)
Arguments
- callback
(function(node: Node, index: number): boolean)
Returns
- callback
- nodeList.forEach(callback)
Arguments
- callback
(function(node: Node, index: number))
- callback
- nodeList.get(index)
Returns the node at the specified index.
Arguments
- index
(number)
Returns
- index
- nodeList.getAdjacentEdges([options])
Returns the list of adjacent edges of the nodes.
Arguments
- options (optional)
(AdjacencyOptions)
Returns
- options (optional)
- nodeList.getAdjacentNodes([options])
Returns the list of adjacent nodes of the nodes.
Arguments
- options (optional)
(AdjacencyOptions)
Returns
- options (optional)
- nodeList.getAttribute(attributeName)
Returns an array containing the value of the specified attribute for each node.
Arguments
- attributeName
(PropertyPath)
:Attribute to retrieve.
Returns
-
Array<any>
Examples
var nodeList = ogma.getNodes([0, 1]); nodeList.setAttribute('radius', 7); console.log(nodeList.getAttribute('radius')); // [7, 7]
- attributeName
- nodeList.getAttributes([attributes])
Returns an array of objects containing the specified attributes for each node.
Arguments
- attributes (optional)
(Array<PropertyPath>)
:List of attributes to include in the object. If not specified, includes all the node attributes.
Returns
Examples
var nodeList = ogma.getNodes([0, 1]); nodeList.setAttributes([{x: 50, y: 20, color: 'blue'}, {x: 20, y: 50, color: 'red'}]); console.log(nodeList.getAttributes(['x', 'y', 'color'])); // [{x: 50, y: 20, color: 'blue'}, {x: 20, y: 50, color: 'red'}]
- attributes (optional)
- nodeList.getBoundingBox()
Returns the bounding box of the nodes, in graph coordinates.
Returns
- nodeList.getClassList()
Returns the list of classes that each node has.
Returns
-
Array<Array<string>>
-
- nodeList.getConnectedComponents([options])
Returns weakly connected components of the list of nodes.
Arguments
- options (optional)
(object)
- filter (optional)
(Filter)
[= 'visible']
- returnIds (optional)
(boolean)
[= false]
:Return node ids instead of Nodes
- filter (optional)
Returns
-
Array<NodeList>
- options (optional)
- nodeList.getData([property])
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
- property (optional)
(PropertyPath)
Returns
-
Array<any>
Examples
var nodes = ogma.getNodes(['n0', 'n1']); nodes.setData('foo', [42, 23]); console.log(nodes.getData('foo')); // Displays: "42,23"
- property (optional)
- nodeList.getDegree()
Runs
getDegree
on each node in the list and returns the array of results. - nodeList.getGeoCoordinates()
Returns geographical coordinates of all the nodes in the collection
Returns
-
Array<GeoCoordinate>
-
- nodeList.getId()
Returns the id of each node.
Returns
-
Array<NodeId>
-
- nodeList.getMetaNode()
Run
getMetaNode
on each node in the list and returns the array of results.Returns
-
Array<Node|null>
-
- nodeList.getPosition()
Retrieve the position of each node in the list. This is strictly equivalent to
nodeList.getAttributes(['x', 'y'])
.Returns
-
Array<{x: number, y: number}>
-
- nodeList.getSubNodes()
Run
getSubNodes
on all the nodes in the list and returns the array of resultsReturns
-
Array<NodeList|null>
-
- nodeList.includes(node)
Indicates if the
NodeList
contains the specified node.Arguments
- node
(Node)
Returns
-
boolean
- node
- nodeList.inverse()
Returns a new NodeList containing all the visible nodes that are not in the list.
Returns
- nodeList.isSelected()
Indicates for each node if it is selected.
Returns
-
Array<boolean>
-
- nodeList.isVisible()
Call
isVisible
on each node in the list, and returns the array of results.Returns
-
Array<boolean>
-
- nodeList.locate([options])
Centers the view on the nodes.
Arguments
- options (optional)
(LocateOptions)
Returns
-
Promise<void>
Examples
ogma.getSelectedNodes().locate();
- options (optional)
- nodeList.map(callback)
Arguments
- callback
(function(node: Node, index: number): any)
Returns
-
Array<any>
- callback
- nodeList.pulse([options])
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
- options (optional)
(object)
- duration (optional)
(number)
[= 1000]
:Duration of a pulse (milliseconds)
- endColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.0)"]
:Ending color of the pulse
- endRatio (optional)
(number)
[= 2]
:Where the pulse ends, relative to the node siz (1 = at the node's border)
- interval (optional)
(number)
[= 800]
:Interval between two pulses (milliseconds)
- number (optional)
(number)
[= 1]
:Number of pulses
- startColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.6)"]
:Starting color of the pulse
- startRatio (optional)
(number)
[= 1]
:Where the pulse starts, relative to the node siz (1 = at the node's border)
- width (optional)
(number)
[= 50]
:Width of the pulse in pixels
- duration (optional)
- options (optional)
- nodeList.reduce(callback, initialValue)
Arguments
- callback
(function(accumulator: any, currentValue: Node, index: number): any)
- initialValue
(any)
Returns
-
any
- callback
- nodeList.removeClass(className[, options])
Remove the specified class from the nodes.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<NodeList>
- className
- nodeList.removeClasses(classNames[, options])
Remove the specified class from the nodes.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<NodeList>
- classNames
- nodeList.resetAttributes([attributes][, options])
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
- attributes (optional)
(Array<PropertyPath>)
:List of attributes to clear. If no attribute is specified, clear all of them.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<NodeList>
- attributes (optional)
- nodeList.setAttribute(attribute, values[, options])
Set the specified attribute of all the nodes in the list.
Arguments
- attribute
(PropertyPath)
- values
(any|Array<any>)
: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.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<NodeList>
Examples
var nodes = ogma.getNodes([0, 1]); // Assign the same radius to the two nodes nodes.setAttribute('radius', 7); // Assign different texts to the two nodes nodes.setAttribute('text', ['Node 0', 'Node 1']);
- attribute
- nodeList.setAttributes(attributes[, options])
Set the individual attributes of all the nodes in the list.
Arguments
- attributes
(NodeAttributesValue|Array<NodeAttributesValue>)
: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.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<NodeList>
Examples
var nodeList = ogma.getNodes([0, 1]); nodeList.setAttributes({radius: 50, color: 'blue'}); nodeList.setAttributes([{x: 50, y: 20, color: 'blue'}, {x: 20, y: 50, color: 'red'}], { duration: 500 });
- attributes
- nodeList.setData([property], values)
Set the specified data property of the nodes. If no property is specified, update the whole data object.
Arguments
- property (optional)
(PropertyPath)
:Path of the data property to update.
- values
(Array<any>|function(node: Node): any)
: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
Examples
var nodes = ogma.getNodes(['n0', 'n1']); // Assigning data with a function nodes.setData('aPlusB', function (node) { return node.getData('a') + node.getData('b'); }); // Assigning data using an array nodes.setData('foo', [23, 42]);
- property (optional)
- nodeList.setGeoCoordinates(coordinates[, duration])
Assign geographical coordinates to the nodes in collection
Arguments
- coordinates
(Array<GeoCoordinate|null>|null)
- duration (optional)
(number)
:Animation duration
Returns
-
Promise<NodeList>
Examples
ogma.getNodes().setGeoCoordinates([ { latitude: 5, longitude: 10}, { latitude: 10, longitude: 5} ]); // will trigger a redraw, if geo mode is on
- coordinates
- nodeList.setSelected(active)
Add or remove the nodes from the selection.
Arguments
- active
(boolean|Array<boolean>)
:whether to select or unselect the nodes.
Examples
var nodes = ogma.getNodes(['n0', 'n1', 'm2']); // Select all the nodes nodes.setSelected(true); // Select one of them, and unselect the other two nodes.setSelected([true, false, false]);
- active
- nodeList.slice([start][, end])
Returns a new NodeList which contains only the nodes from index
start
toend
(excludingend
).Arguments
- start (optional)
(number)
- end (optional)
(number)
Returns
- start (optional)
- nodeList.sort(fn)
Arguments
- nodeList.subtract([list])
Arguments
- list (optional)
(NodeList)
:Returns a new NodeList which does noe contain any element from list
Returns
- list (optional)
- nodeList.toArray()
Returns an array of nodes from the NodeList.
Returns
-
Array<Node>
-
- nodeList.toJSON([options])
Runs
toJSON
on all the nodes in the list and returns the list of objects.Arguments
- options (optional)
(object)
- attributes (optional)
(Array<PropertyPath>|"all")
[= []]
- data (optional)
(function (data: any): any)
- attributes (optional)
Returns
-
Array<RawNode>
- options (optional)
- nodeList.toList()
Returns itself.
Returns
EdgeList
- edgeList.isNode
Read-only property that is always
false
. - edgeList.size
Read-only property that indicates the number of edges in the list.
- edgeList.addClass(className[, options])
Add the specified class to the edges.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<EdgeList>
- className
- edgeList.addClasses(classNames[, options])
Add the specified classes to the edges.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<EdgeList>
- classNames
- edgeList.concat(edges)
Arguments
- edges
(EdgeList)
Returns
- edges
- edgeList.dedupe()
Returns a new EdgeList which does not contain any duplicate edge.
Returns
- edgeList.fillData([property], value)
Set the specified data property of the edges with the same value.
Arguments
- property (optional)
(PropertyPath|any)
:Path of the data property to update. If no property is specified, update the whole data object.
- value
(any)
:Value that will be assigned to all the edges.
Returns
- property (optional)
- edgeList.filter(callback)
Arguments
- callback
(function(edge: Edge, index: number): boolean)
Returns
- callback
- edgeList.forEach(callback)
Arguments
- callback
(function(edge: Edge, index: number))
- callback
- edgeList.get(index)
Returns the edge at the specified index.
Arguments
- index
(number)
Returns
- index
- edgeList.getAttribute(attributeName)
Returns an array containing the value of the specified attribute for each edge.
Arguments
- attributeName
(PropertyPath)
:Attribute to retrieve.
Returns
-
any[]
Examples
var edgeList = ogma.getEdges([0, 1]); edgeList.setAttribute('width', 30); console.log(edgeList.getAttribute('width')); // [30, 30]
- attributeName
- edgeList.getAttributes([attributes])
Returns an array of objects containing the specified attributes for each edge.
Arguments
- attributes (optional)
(PropertyPath[])
:List of attributes to include in the object. If not specified, includes all the edge attributes.
Returns
Examples
var edgeList = ogma.getEdges([0, 1]); edgeList.setAttributes([{width: 50, color: 'blue'}, {width: 20, color: 'red'}]); console.log(edgeList.getAttributes(['width', 'color'])); // [{width: 50, color: 'blue'}, {width: 20, color: 'red'}]
- attributes (optional)
- edgeList.getBoundingBox([ignoreCurvature])
Returns the bounding box of the edges, in graph coordinates.
Arguments
- ignoreCurvature (optional)
(boolean)
[= false]
:Use it if you want to only take into account the edge sources and targets.
Returns
- ignoreCurvature (optional)
- edgeList.getClassList()
Returns the list of classes that each edge has.
Returns
-
Array<Array<string>>
-
- edgeList.getData([property])
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
- property (optional)
(PropertyPath)
Returns
-
Array<any>
- property (optional)
- edgeList.getExtremities()
Returns a
NodeList
containing the sources and targets of the edges. Duplicate nodes are not removed.Returns
- edgeList.getId()
Returns the id of each edge.
Returns
-
Array<EdgeId>
-
- edgeList.getMetaEdge()
Run
getMetaEdge
on each edge in the list and returns the array of results.Returns
-
Array<Edge|null>
-
- edgeList.getParallelEdges([options])
Retrieves the list of edges parallel to the edges, including the source edges themselves.
Arguments
- options (optional)
(object)
- filter (optional)
(Filter)
[= "visible"]
:Indicates which edges to take into account
- filter (optional)
Returns
- options (optional)
- edgeList.getSource()
Returns the list of source nodes of the edges
Returns
- edgeList.getSubEdges()
Run
getSubEdges
on all the edges in the list and returns the array of resultsReturns
-
Array<EdgeList|null>
-
- edgeList.getTarget()
Returns the list of target nodes of the edges
Returns
- edgeList.includes(edge)
Indicates if the
EdgeList
contains the specified edge.Arguments
- edge
(Edge)
Returns
-
boolean
- edge
- edgeList.inverse()
Returns a new EdgeList containing all the visible edges that are not in the list.
Returns
- edgeList.isSelected()
Indicates if the edges are currently selected.
Returns
-
Array<boolean>
-
- edgeList.isVisible()
Call
isVisible
on each edge in the list, and returns the array of results.Returns
-
Array<boolean>
-
- edgeList.locate([options])
Centers the view on the edges.
Arguments
- options (optional)
(LocateOptions)
Returns
-
Promise<void>
Examples
ogma.getSelectedEdges().locate();
- options (optional)
- edgeList.map(callback)
Arguments
- callback
(function(edge: Edge, index: number): any)
Returns
-
Array<any>
- callback
- edgeList.pulse([options])
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()
callArguments
- options (optional)
(object)
- duration (optional)
(number)
[= 1000]
:Duration of a pulse (milliseconds)
- endColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.0)"]
:Ending color of the pulse
- endRatio (optional)
(number)
[= 2]
:Where the pulse ends, relative to the edge siz (1 = at the edge's border)
- interval (optional)
(number)
[= 800]
:Interval between two pulses (milliseconds)
- number (optional)
(number)
[= 1]
:Number of pulses
- startColor (optional)
(Color|"inherit")
[= "rgb(0,0,0,0.6)"]
:Starting color of the pulse
- startRatio (optional)
(number)
[= 1]
:Where the pulse starts, relative to the edge siz (1 = at the edge's border)
- width (optional)
(number)
[= 10]
:Width of the pulse in pixels
- duration (optional)
- options (optional)
- edgeList.reduce(callback, initialValue)
Arguments
- callback
(function(accumulator: any, currentValue: Edge, index: number): any)
- initialValue
(any)
Returns
-
any
- callback
- edgeList.removeClass(className[, options])
Remove the specified class from the edges.
Arguments
- className
(string)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<EdgeList>
- className
- edgeList.removeClasses(classNames[, options])
Remove the specified class from the edges.
Arguments
- classNames
(Array<string>)
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<EdgeList>
- classNames
- edgeList.resetAttributes([attributes][, options])
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
- attributes (optional)
(Array<PropertyPath>)
:List of attributes to clear. If no attribute is specified, clear all of them.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<EdgeList>
- attributes (optional)
- edgeList.setAttribute(attribute, value[, options])
Set the specified attribute of all the edges in the list.
Arguments
- attribute
(PropertyPath)
- value
(any|Array<any>)
: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.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<EdgeList>
Examples
var edges = ogma.getEdges([0, 1]); // Assign the same radius to the two edges edges.setAttribute('width', 30); // Assign different texts to the two edges edges.setAttribute('text', ['Edge 0', 'Edge 1']);
- attribute
- edgeList.setAttributes(attributes[, options])
Set the individual attributes of all the edges in the list.
Arguments
- attributes
(EdgeAttributesValue|Array<EdgeAttributesValue>)
: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.
- options (optional)
(AttributeAnimationOptions)
Returns
-
Promise<EdgeList>
Examples
var edgeList = ogma.getEdges([0, 1]); edgeList.setAttributes({width: 50, color: 'blue'}); edgeList.setAttributes([{width: 50, color: 'blue'}, {width: 20, color: 'red'}], { duration: 500 });
- attributes
- edgeList.setData([property], values)
Set the specified data property of the edges. If no property is specified, update the whole data object.
Arguments
- property (optional)
(PropertyPath)
:Path of the data property to update.
- values
(Array<any>|function(edge: Edge): any)
: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
-
EdgeList
:determine which value to assign.
- property (optional)
- edgeList.setSelected(active)
Arguments
- active
(boolean|Array<boolean>)
:whether to select or unselect the edges.
- active
- edgeList.slice([start][, end])
Returns a new EdgeList which contains only the edges from index
start
toend
(excludingend
).Arguments
- start (optional)
(number)
- end (optional)
(number)
Returns
- start (optional)
- edgeList.subtract([list])
Arguments
- list (optional)
(EdgeList)
:Returns a new EdgeList which does noe contain any element from list
Returns
- list (optional)
- edgeList.toArray()
Returns an array of edges from the EdgeList.
Returns
-
Array<Edge>
-
- edgeList.toJSON([options])
Runs
toJSON
on all the edges in the list and returns the list of objects.Arguments
- options (optional)
(object)
- attributes (optional)
(Array<PropertyPath>|"all")
[= []]
- data (optional)
(function (data: any): any)
- attributes (optional)
Returns
-
Array<RawEdge>
- options (optional)
- edgeList.toList()
Returns itself.
Returns
StyleClass
- styleClass.add(elements)
Add the class to the specified node(s)/edge(s). Equivalent to to
elements.addClass(myClass.getName())
.Arguments
- styleClass.clearEdges([filter])
Remove the class from all edges.
Arguments
- filter (optional)
(Filter)
:filter to apply to edges
- filter (optional)
- styleClass.clearNodes([filter])
Remove the class from all nodes.
Arguments
- filter (optional)
(Filter)
:filter to apply to nodes
- filter (optional)
- styleClass.getDefinition()
Returns the node and edge attributes associated with the class.
Returns
- styleClass.getEdges([filter])
Returns the list of edges that have the class. Does not include filtered edges.
Arguments
- filter (optional)
(Filter)
:filter to apply to edges
Returns
- filter (optional)
- 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
-
number
-
- styleClass.getName()
Returns the name of the class.
Returns
-
string
-
- styleClass.getNodes(Filter)
Returns the list of nodes that have the class. Does not include filtered nodes.
Arguments
- Filter:
[filter] filter to apply to nodes
Returns
- Filter:
- styleClass.remove(elements)
Remove the class from the specified node(s)/edge(s). Equivalent to to
elements.removeClass(myClass.getName())
.Arguments
- styleClass.setIndex(index)
Set the index of the class in the internal class array. A higher index class is applied after a lower index class.
Arguments
- index
(number)
- index
- styleClass.update(options)
Updates the attributes assigned to nodes and edges that have that class.
Arguments
- options
(object)
- edgeAttributes (optional)
(EdgeAttributesValue)
- edgeDependencies (optional)
(EdgeDependencies)
- edgeOutput (optional)
(EdgeOutput)
- fullOverwrite (optional)
(boolean)
[= false]
:Indicates if the specified attributes should be merge with current ones (false) or if the specified attributes should entirely replace the current ones.
- nodeAttributes (optional)
(NodeAttributesValue)
- nodeDependencies (optional)
(NodeDependencies)
- nodeOutput (optional)
(NodeOutput)
- edgeAttributes (optional)
Examples
var myClass = ogma.styles.createClass({ name: 'myCustomClass', nodeAttributes: { color: 'green' } }); ogma.getNode('n0').addClass('myCustomClass'); myClass.update({ nodeAttributes: { color: 'red' } }); ogma.getNode('n0').getAttribute('color'); // 'red'
- options
StyleRule
- styleRule.destroy()
Delete the rule. After this is called, a call to any method on this object will throw an error.
Returns
-
Promise<void>
Examples
var rule = ogma.styles.addRule({ nodeAttributes: { text: function (node) { return node.getData('name'); } } }); rule.destroy();
-
- styleRule.getId()
Returns the unique positive integer rule id associated with the rule.
Returns
-
number
-
- 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
-
number
Examples
// Set rule 1 as less priority than rule 2 rule1.setIndex(rule2.getIndex());
-
- styleRule.refresh()
Refresh the rule for all nodes.
Returns
-
Promise<void>
Examples
var myMapping = { person: 'red', country: 'blue', company: 'green' }; var rule = ogma.styles.addRule({ nodeAttributes: { color: function (node) { return myMapping[node.getData('type')]; } } }); // Change a variable referenced by the rule myMapping.company = 'purple'; // Manually refresh the rule rule.refresh();
-
- styleRule.setIndex(index)
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
- index
(number)
Returns
-
Promise<void>
Examples
// Set rule 1 as less priority than rule 2 rule1.setIndex(rule2.getIndex());
- index
- styleRule.update(options)
Updates the attributes and selectors associated with the rule.
Arguments
- options
- edgeAttributes (optional)
(EdgeAttributesValue)
- edgeDependencies (optional)
(EdgeDependencies)
- edgeOutput (optional)
(EdgeOutput)
- edgeSelector (optional)
(EdgeSelector)
- fullOverwrite (optional)
(boolean)
[= false]
:Indicates if the specified attributes should be merged with current ones (false) or if the specified attributes should entirely replace the current ones.
- nodeAttributes (optional)
(NodeAttributesValue)
- nodeDependencies (optional)
(NodeDependencies)
- nodeOutput (optional)
(NodeOutput)
- nodeSelector (optional)
(NodeSelector)
- edgeAttributes (optional)
Returns
-
Promise<void>
- options
- styleRule.whenApplied()
Call the specified function when the rule is applied for the first time.
Returns
-
Promise<StyleRule>
Examples
var rule = ogma.styles.addRule({ nodeAttributes: { text: function (node) { return node.getData('name'); } } }); rule.whenApplied().then(function () { console.log('Attributes updated!'); });
-
- styleRule.delete() deprecated
Alias to
destroy()
Returns
-
Promise<void>
-
Transformation
- transformation.destroy([duration])
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
- duration (optional)
(number)
[= 0]
:Animation duration in ms
Returns
-
Promise<void>
- duration (optional)
- transformation.disable([duration])
Disable the transformation over the specified amount of time.
Arguments
- duration (optional)
(number)
[= 0]
:Animation duration in ms
Returns
-
Promise<void>
- duration (optional)
- transformation.enable([duration])
Enable the transformation over the specified amount of time.
Arguments
- duration (optional)
(number)
[= 0]
:Animation duration in ms
Returns
-
Promise<void>
- duration (optional)
- transformation.getId()
Returns the id of the transformation, a unique strictly positive integer.
Returns
-
number
-
- transformation.getIndex()
Retrieves the index of the transformation in the pipeline.
Returns
-
number
-
- transformation.getName()
Returns the name of the transformation.
Returns
-
"node-filter"|"edge-filter"|"node-grouping"|"edge-grouping"
-
- transformation.refresh()
Refresh the transformation.
Returns
-
Promise<void>
-
- transformation.setIndex(index)
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
- index
Returns
-
Promise<void>
- transformation.toggle([duration])
Toggle the transformation over the specified amount of time.
Arguments
- duration (optional)
(number)
[= 0]
:Animation duration in ms
Returns
-
Promise<void>
- duration (optional)
- transformation.whenApplied()
Returns a Promise that resolves the first time the transformation is applied.
Returns
-
Promise<void>
-
- transformation.delete([duration]) deprecated
Alias for
destroy
.Arguments
- duration (optional)
(number)
[= 0]
Returns
-
Promise<void>
- duration (optional)
NonObjectPropertyWatcher
Retrieved from ogma.schema.watchNodeNonObjectProperty()
or ogma.schema.watchEdgeNonObjectProperty()
.
- nonObjectPropertyWatcher.destroy()
Stops the watcher from being updated
- nonObjectPropertyWatcher.getPath()
Returns the path of the data property being watched
Returns
-
Array<string>
-
- nonObjectPropertyWatcher.getPropertyInfo()
Retrieve some information on the property being watched.
Returns
- nonObjectPropertyWatcher.onUpdate(handler)
Triggers the specified function when the property is updated,
Arguments
- handler
(function (info: PropertyInformation))
- handler
- nonObjectPropertyWatcher.kill() deprecated
Alias for
destroy()
.
ObjectPropertyWatcher
Retrieved from ogma.schema.watchNodeProperties()
or ogma.schema.watchEdgeProperties()
.
- objectPropertyWatcher.destroy()
Stops the watcher from being updated.
- objectPropertyWatcher.getPath()
Returns the path of the data property being watched
Returns
-
Array<string>
-
- objectPropertyWatcher.getProperties()
Returns the names of the sub-property of the watched property.
Returns
-
Array<string>
-
- objectPropertyWatcher.getPropertyInfo(name)
Retrieve some information on the specified sub-property.
Arguments
- name
(string)
Returns
-
PropertyInformation|null
- name
- objectPropertyWatcher.onPropertyAdded(handler)
Triggers the specified function when a new sub-property is added (at least one node has a value for it).
Arguments
- handler
(function (property: string, info: PropertyInformation))
Returns
- handler
- objectPropertyWatcher.onPropertyRemoved(handler)
Triggers the specified function when a new sub-property is removed (no node has a value for it).
Arguments
- handler
(function (property: string, info: PropertyInformation))
Returns
- handler
- objectPropertyWatcher.onPropertyUpdated(handler)
Triggers when a sub-property of the watched property is updated.
Arguments
- handler
(function (property: string, info: PropertyInformation))
Returns
- handler
- objectPropertyWatcher.kill() deprecated
Alias for
destroy()
.
PropertyInformation
Retrieved from watcher.getPropertyInfo()
.
- 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
-
null|{min: number, max: number}
-
- propertyInformation.getCount()
Returns the number of nodes/edges for which the property is different from
undefined
Returns
-
number
-
- propertyInformation.getType()
Returns the type of the property.
Returns
-
"any"|"number"|"undefined"
: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)
Returns the number of nodes/edges for which the property has the specified value.
Arguments
- value
(any)
Returns
-
number
- value
- propertyInformation.getValues()
Returns the different values for this property.
Returns
-
Array<any>
-
- propertyInformation.isNode()
Indicates if it is a node or edge property.
Returns
-
boolean
-
Key types
- NodeAttributes
(object)
Properties
- badges (optional)
(object)
- color (optional)
(Color|Array<Color>)
[= "grey"]
:Color of the node
- detectable (optional)
(boolean)
[= true]
:Indicates if the node is detectable by the mouse.
- draggable (optional)
(boolean)
[= true]
:Indicates if the node is draggable by the user
- halo (optional)
(object|Color|null)
:If not an object, alias for
halo.color
- color (optional)
(Color)
[= null]
:Color of the halo
- hideNonAdjacentEdges (optional)
(boolean)
[= false]
:If true, the halo hides edges which don't have at least one extremity with
halo.hideNonAdjacentEdges
totrue
. - scalingMethod (optional)
(ScalingMethod)
[= "fixed"]
:Indicates if the halo width should be multiplied by the zoom when the node is displayed.
- strokeColor (optional)
(Color)
[= null]
:Color of the stroke of the halo
- strokeWidth (optional)
(PixelSize)
[= 1]
:Width of the stroke of the halo
- width (optional)
(PixelSize)
[= 50]
:Width of the halo, in pixels
- (deprecated) size (optional)
(PixelSize)
:Alias for
width
- color (optional)
- icon (optional)
(object|TextContent)
:If not an object, alias for
icon.content
- color (optional)
(Color)
[= "black"]
:Color used to display the icon text
- content (optional)
(TextContent)
:Text to display inside the icon
- font (optional)
(string)
[= "Arial"]
:Font used to display the icon text
- minVisibleSize (optional)
(number)
[= 12]
:If the node diameter on screen is less than this value, the icon will not be shown
- scale (optional)
(number)
[= 0.7]
:Text size relative to the node diameter
- style (optional)
(FontStyle)
[= "normal"]
:Style applied to the icon.
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- color (optional)
- image (optional)
(object|string|null)
:If not an object, alias for
image.url
- fit (optional)
(boolean)
[= true]
:Indicates if the image should be rescaled to fit the node
- minVisibleSize (optional)
(number)
[= 12]
:If the node diameter on screen is less than this value, the image will not be shown
- scale (optional)
(number)
[= 1]
:Size of the image relative to the node diameter
- tile (optional)
(boolean)
[= false]
: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 befalse
. - url (optional)
(string|null)
[= null]
:URL of the image to display
- (deprecated) duplicate (optional)
(boolean)
:Alias for
duplicate
- (deprecated) rescale (optional)
(boolean)
:Alias for
fit
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- fit (optional)
- innerStroke (optional)
(object|Color|"inherit")
:If not an object, alias for
innerStroke.color
- color (optional)
(Color|"inherit")
[= "white"]
:Color of the node's inner stroke
- minVisibleSize (optional)
(number)
[= 12]
:If the node diameter on screen is less than this value, the inner stroke will not be shown
- scalingMethod (optional)
(ScalingMethod)
[= "fixed"]
:Indicates if the inner stroke width should be multiplied by the zoom when the node is displayed.
- width (optional)
(PixelSize)
[= 2]
:Width of the node's inner stroke
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- color (optional)
- layer (optional)
(LayerValue)
[= 0]
:Z-index of the node. Integer value between 1 and 3.
- layoutable (optional)
(boolean)
[= true]
: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.
- opacity (optional)
(OpacityValue)
[= 1]
:Opacity of the node.
- outerStroke (optional)
(object|Color|"inherit")
:If not an object, alias for
outerStroke.color
- color (optional)
(Color|"inherit")
[= null]
:Color of the node's outer stroke
- minVisibleSize (optional)
(number)
[= 0]
:If the node diameter on screen is less than this value, the outer stroke will not be shown
- scalingMethod (optional)
(ScalingMethod)
[= "fixed"]
:Indicates if the outer stroke width should be multiplied by the zoom when the node is displayed.
- width (optional)
(PixelSize)
[= 5]
:Width of the node's outer stroke
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- color (optional)
- outline (optional)
(object|boolean)
:If not an object, alias for
outline.enabled
- color (optional)
(Color)
[= "rgba(0, 0, 0, 0.36)"]
:Color of the outline
- enabled (optional)
(boolean)
[= false]
:Indicates if the outline should be visible
- minVisibleSize (optional)
(number)
[= 12]
:If the node diameter on screen is less than this value, the outline will ne be shown
- color (optional)
- pulse (optional)
(object|null)
- duration (optional)
(number)
[= 1000]
:Lifespan of one pulse ripple (milliseconds).
- enabled (optional)
(boolean)
[= false]
:If true, shows animated pulse around the node.
- endColor (optional)
(Color)
[= "rgba(0, 0, 0, 0)"]
:End color of the pulse
- endRatio (optional)
(number)
[= 2]
:Where the pulse ends, relative to the node size (2 = 2x size of the node)
- interval (optional)
(number)
[= 800]
:Interval between two pulses (milliseconds).
- startColor (optional)
(Color)
[= "rgba(0, 0, 0, 0.6)"]
:Starting color of the pulse
- startRatio (optional)
(number)
[= 1]
:Where the pulse starts, relative to the node size (1 = at the node's border)
- width (optional)
(number)
[= 50]
:Width of the pulse in pixels
- duration (optional)
- radius (optional)
(PixelSize)
[= 5]
:Indicates the radius of the node (graph size)
- scalingMethod (optional)
(ScalingMethod)
[= "scaled"]
:Indicates if the radius should be multiplied by the zoom when the node is displayed.
- shape (optional)
(NodeShape)
[= "circle"]
:Shape of the node
- text (optional)
(object|TextContent)
:If not an object, alias for
text.content
- align (optional)
(TextAlign)
[= "center"]
:Alignment of the text (for multi-line texts)
- backgroundColor (optional)
(Color|"inherit"|null)
[= null]
:Background color of the text
- color (optional)
(Color|"inherit")
[= "black"]
:Color of the text
- content (optional)
(TextContent)
[= null]
:Text to display
- font (optional)
(string)
[= "Arial"]
:Font used to display the text
- margin (optional)
(PixelSize)
[= 10]
:Additional space (in pixels) between the node and the text
- maxLineLength (optional)
(number)
[= 0]
:If > 1, lines that have more characters than this value will be split across multiple lines. Affects both primary and secondary texts.
- minVisibleSize (optional)
(number)
[= 24]
:If the node diameter on screen is less than this value, the text will not be shown
- padding (optional)
(PixelSize)
[= 2]
:Space between the text and its background's edge, in pixels
- position (optional)
("right"|"left"|"top"|"bottom"|"center")
[= "bottom"]
:Position of the text relative to the node
- scale (optional)
(number)
[= 0.1]
:Text size relative to the node diameter
- scaling (optional)
(boolean)
[= false]
:Indicates if the
size
property (false) or thescale
property (true) must be used to compute the text size. Affects both primary and secondary text. - secondary (optional)
(object|TextContent)
:If not an object, alias for
text.secondary.content
- align (optional)
(TextAlign)
[= "center"]
:Alignment of the secondary text (for multi-line texts)
- backgroundColor (optional)
(Color|"inherit"|null)
[= null]
:Background color of the secondary text
- color (optional)
(Color|"inherit")
[= "black"]
:Color of the secondary text
- content (optional)
(TextContent)
[= null]
:Secondary text content. The secondary text is always displayed below the node.
- font (optional)
(string)
[= "Arial"]
:Font used to display the secondary text
- margin (optional)
(PixelSize)
[= 2]
:Space (in pixels) on top of the secondary text.
- minVisibleSize (optional)
(number)
[= 24]
:If the node diameter on screen is less than this value, the secondary text will not be shown
- padding (optional)
(PixelSize)
[= 2]
:Space (in pixels) between the text and its background's edge
- scale (optional)
(number)
[= 0.08]
:Secondary text size (relative to the node diameter)
- size (optional)
(PixelSize)
[= 10]
:Secondary text size (in pixels)
- style (optional)
(FontStyle)
[= "normal"]
:Secondary text style
- (deprecated) backgroundArrowBaseSize (optional)
(PixelSize)
:Alias for
margin
- (deprecated) backgroundMargin (optional)
(PixelSize)
:Alias for
padding
- align (optional)
- size (optional)
(PixelSize)
[= 12]
:Text size (in pixels)
- style (optional)
(FontStyle)
[= "normal"]
:Style applied to the text
- tip (optional)
(boolean)
[= true]
:Indicates if the margin between the text and the background should be filled with a small arrow pointing towards the node
- (deprecated) backgroundArrowBaseSize (optional)
(PixelSize)
:Alias for
margin
- (deprecated) backgroundMargin (optional)
(PixelSize)
:Alias for
padding
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- align (optional)
- x (optional)
(number)
[= 0]
:X coordinate of the node (graph space)
- y (optional)
(number)
[= 0]
:Y coordinate of the node (graph space)
- (deprecated) hidden (optional)
(boolean)
:Alias for
opacity
(true
-> opacity = 0,false
-> opacity = 1)
- badges (optional)
- EdgeAttributes
(object)
:Default values indicate the system values (when an edge has not been assigned any value for that attribute).
Properties
- adjustAnchors (optional)
(boolean)
[= true]
: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.
- color (optional)
(Color|"source"|"target")
[= "grey"]
:Color of the edge
- detectable (optional)
(boolean)
[= true]
:Indicates if the edge is detectable by the mouse.
- halo (optional)
(object|Color)
:If not an object, alias to
halo.color
- color (optional)
(Color)
[= null]
:Color of the halo
- scalingMethod (optional)
(ScalingMethod)
[= "fixed"]
:Indicates if the halo width should be multiplied by the zoom when the edge is displayed.
- width (optional)
(PixelSize)
[= 10]
:Width of the halo, in pixels
- (deprecated) size (optional)
(PixelSize)
:Alias for
width
- color (optional)
- layer (optional)
(LayerValue)
[= 0]
:Z-index of the node. Integer value between -1 and 3.
- minVisibleSize (optional)
(number)
[= 0]
:If the edge width on screen is less than this value, it will not be displayed
- opacity (optional)
(OpacityValue)
[= 1]
:Opacity of the edge. 0 = transparent, 1 = opaque.
- outline (optional)
(object|boolean)
:If not an object, alias to
outline.enabled
- color (optional)
(Color)
[= "rgba(0, 0, 0, 0.36)"]
:Color of the outline
- enabled (optional)
(boolean)
[= false]
:Indicates if the outline should be visible
- minVisibleSize (optional)
(number)
[= 0]
:If the edge width on screen is less than this value, the outline will ne be shown
- color (optional)
- pulse (optional)
(object)
- duration (optional)
(number)
[= 1000]
:Lifespan of one pulse ripple (milliseconds).
- enabled (optional)
(boolean)
[= false]
:If true, shows animated pulse around the edge.
- endColor (optional)
(Color)
[= "rgba(0, 0, 0, 0)"]
:End color of the pulse
- endRatio (optional)
(number)
[= 2]
:Where the pulse ends, relative to the edge width (2 = 2x width of the edge)
- interval (optional)
(number)
[= 800]
:Interval between two pulses (milliseconds).
- startColor (optional)
(Color)
[= "rgba(0, 0, 0, 0.6)"]
:Starting color of the pulse
- startRatio (optional)
(number)
[= 1]
:Where the pulse starts, relative to the edge width (1 = at the edge border)
- width (optional)
(number)
[= 50]
:Width of the pulse in pixels
- duration (optional)
- scalingMethod (optional)
(ScalingMethod)
[= "scaled"]
:Indicates if the edge width should be multiplied by the zoom when the edge is displayed.
- shape (optional)
(object|PredefinedEdgeShape)
- body (optional)
(EdgeType)
[= "line"]
:Shape of the edge
- head (optional)
(EdgeExtremity)
[= null]
:Head of the edge
- style (optional)
(EdgeStyle)
[= "plain"]
:Style of the edge
- tail (optional)
(EdgeExtremity)
[= null]
:Tail of the edge
- body (optional)
- stroke (optional)
(object)
- color (optional)
(Color|"inherit")
[= "inherit"]
:Color of the edge stroke. If it is "inherit", uses the same color as for the body.
- minVisibleSize (optional)
(number)
[= 0]
:If the edge width on screen is less than this value, the stroke will not be displayed
- width (optional)
(PixelSize)
[= 0]
:Stroke width, in pixels.
- color (optional)
- text (optional)
(object|TextContent)
:If not an object, alias to
text.content
- adjustAngle (optional)
(boolean)
[= true]
:In case the edge is shorter than the text, indicates if the text should be displayed horizontally. Only works for non-scaled texts.
- align (optional)
(TextAlign)
[= "center"]
:Alignment of the text (for multi-line texts)
- backgroundColor (optional)
(Color|"inherit")
[= null]
:Background color of the text
- color (optional)
(Color)
[= "black"]
:Color of the text
- content (optional)
(TextContent)
[= null]
:Text to display
- font (optional)
(string)
[= "Arial"]
:Font used to display the text
- margin (optional)
(PixelSize)
[= 2]
:Space between the text and the edge, in pixels
- maxLineLength (optional)
(number)
[= 0]
:If > 1, lines that have more characters than this value will be split across multiple lines. Affects both primary and secondary texts.
- minVisibleSize (optional)
(PixelSize)
[= 4]
:If the edge width on screen is less than this value, the text will not be shown
- padding (optional)
(PixelSize)
[= 2]
:Space between the text and its background's edge, in pixels
- scale (optional)
(number)
[= 1]
:Text size relative to the edge width
- scaling (optional)
(boolean)
[= false]
:Indicates if the
size
property (false) or thescale
property (true) must be used to compute the text size - secondary (optional)
(object|TextContent)
:If not an object, alias to
text.secondary.content
- align (optional)
(TextAlign)
[= "center"]
:Alignment of the secondary text (for multi-line texts)
- backgroundColor (optional)
(Color|"inherit")
[= null]
:Background color of the secondary text
- color (optional)
(Color)
[= "black"]
:Color of the secondary text
- content (optional)
(TextContent)
[= null]
:Text to display under the primary text
- font (optional)
(string)
[= "Arial"]
:Font used to display the secondary text
- margin (optional)
(PixelSize)
[= 2]
:Space between the secondary text and the edge
- minVisibleSize (optional)
(PixelSize)
[= 4]
:If the edge width on screen is less than this value, the secondary text will not be shown
- padding (optional)
(PixelSize)
[= 2]
:Space between the secondary text and its background's edge, in pixels
- scale (optional)
(number)
[= 0.8]
:Secondary text size (relative to the edge width)
- size (optional)
(PixelSize)
[= 12]
:Secondary text size (in pixels)
- style (optional)
(FontStyle)
[= "normal"]
:Secondary text style
- align (optional)
- size (optional)
(PixelSize)
[= 12]
:Text size (in pixels)
- style (optional)
(FontStyle)
[= "normal"]
:Style applied to the text
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- adjustAngle (optional)
- width (optional)
(PixelSize)
[= 1]
:Width of the edge (graph space)
- (deprecated) hidden (optional)
(boolean)
:Alias for
opacity
(true
-> opacity = 0,false
-> opacity = 1) - (deprecated) strokeWidth (optional)
(PixelSize)
:Alias for
stroke.width
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- adjustAnchors (optional)
Other types
- AdjacencyOptions
(object)
Properties
- options (optional)
- bothExtremities (optional)
(boolean)
[= false]
:Relevant only for
getAdjacentEdges
. Iftrue
, only edges for which both extremities are in theNodeList
are retrieved. - direction (optional)
("both"|"in"|"out")
[= "both"]
:Direction of the edges to follow.
- filter (optional)
(Filter)
[= "visible"]
:Indicates what kind of elements should be retrieved.
- policy (optional)
("union"|"include-sources"|"exclude-sources")
[= "union"]
: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.
- (deprecated) includeSources (optional)
(boolean)
:If specified, overrides the
policy
parameter:true
->"include-sources"
,false
->"exclude-sources"
- bothExtremities (optional)
- options (optional)
- AttributeAnimationOptions
(object|number)
:If a number is specified, it specifies the
duration
property.Properties
- duration (optional)
(number)
[= 0]
:Indicates the duration of the attribute transition, in milliseconds.
- easing (optional)
(Easing)
[= "linear"]
:Indicates the animation easing
- duration (optional)
- Badge
(object)
Properties
- color (optional)
(Color)
[= "white"]
:Fill color of the badge.
- image (optional)
(object|null|string)
:If not an object, alias to
image.url
- scale (optional)
(number)
[= 1]
:Size of the image relative to the badge diameter
- url (optional)
(null|string)
[= null]
:URL of the image to display in the badge
- scale (optional)
- minVisibleSize (optional)
(number)
[= 12]
:If the node diameter on screen is less than this value, the badge will not be displayed
- positionScale (optional)
(number)
[= 1]
:Center of the badge relative to the node size (1 = at the node's border)
- scale (optional)
(number)
[= 0.45]
:Size of the badge relative to the node.
- stroke (optional)
(object)
- color (optional)
(Color|"inherit")
[= "black"]
:Color of the badge stroke
- scalingMethod (optional)
(ScalingMethod)
[= "fixed"]
:Indicates if the badge width should be multiplied by the zoom when the node is displayed.
- width (optional)
(PixelSize)
[= 2]
:Width of the badge stroke
- color (optional)
- text (optional)
(object|TextContent)
:If not an object, alias for
text.content
- color (optional)
("inherit"|Color)
[= "black"]
:Color of the badge text
- content (optional)
(TextContent)
[= null]
:Text to display in the badge
- font (optional)
(string)
[= "Arial"]
:Font to use for the badge text
- paddingLeft (optional)
(number)
[= 0]
:Horizontal padding of the text inside the badge
- paddingTop (optional)
(number)
[= 0]
:Vertical padding of the text inside the badge
- scale (optional)
(number)
[= 0.5]
:Size of the text relative to the badge diameter
- style (optional)
(FontStyle)
[= "normal"]
:Style applied to the badge text
- color (optional)
- (deprecated) threshold (optional)
(number)
:Alias for
minVisibleSize
- color (optional)
- BoundingBox
(object)
Properties
- computeForZoom
(function(zoom: number):BoundingBox)
:Method to include the maximum item sizes to compute the real boundaries at the selected zoom level
- cx
(number)
:X coordinate of the center of the bounding box
- cy
(number)
:Y coordinate of the center of the bounding box
- height
(number)
:Height of the bounding box
- maxFixedSize
(number)
:Maximum fixed size of the elements used to compute the bounding box
- maxScaledSize
(number)
:Maximum scaled size of the elements used to compute the bounding box
- maxX
(number)
:Maximum X coordinate of the bounding box
- maxY
(number)
:Maximum Y coordinate of the bounding box
- minFixedSize
(number)
:Minimum fixed size of the elements used to compute the bounding box
- minScaledSize
(number)
:Minimum scaled size of the elements used to compute the bounding box
- minX
(number)
:Minimum X coordinate of the bounding box
- minY
(number)
:Minimum Y coordinate of the bounding box
- width
(number)
:Width of the bounding box
- computeForZoom
- BrandOptions
(object)
Properties
- className (optional)
(string)
:If specified, this class will be added to the HTML created HTML element.
- horizontalMargin (optional)
(number)
[= 0]
:Indicates the space in pixels between the brand and the top/bottom of the screen (depending on the position)
- position (optional)
("top-left"|"top-right"|"bottom-left"|"bottom-right")
[= "bottom-right"]
:Indicates the position of the brand.
- verticalMargin (optional)
(number)
[= 0]
:Indicates the space in pixels between the brand and the right/left of the screen (depending on the position)
- className (optional)
- CameraAnimationOptions
(object)
Properties
- duration (optional)
(number)
[= 0]
:Duration of the animation, in milliseconds.
- easing (optional)
(EasingFunction)
[= "linear"]
:Easing used by the animation.
- ignoreZoomLimits (optional)
(boolean)
[= false]
:If
false
, the optionsinteractions.zoom.minValue
andinteractions.zoom.maxValue
are ignored. - startAfter (optional)
(number)
[= 0]
: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.
- duration (optional)
- Color
(null|string)
: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"
) ornull
(transparent). - CrossOriginValue
("anonymous"|"use-credentials"|null)
- CursorStyle
(string)
:CSS value which will be assigned to the cursor. List of available values here.
- Dependency
(object|true)
:true
indicates that the rule/class depends on the existence of the node(s)/edge(s), but not on their attributesProperties
- attributes (optional)
("all"|Array<PropertyPath>)
:List of attributes the rule/class depends on
- data (optional)
(boolean)
:Indicates if the result of the rule is based on the node/edge's data
- hover (optional)
(boolean)
:Indicates if the result of the rule changes depending on whether the node/edge is hovered or not
- selection (optional)
(boolean)
:Indicates if the result of the rule changes depending on whether the node/edge is selected or not
- attributes (optional)
- Easing
("linear"|"quadraticIn"|"quadraticOut"|"quadraticInOut"|"cubicIn"|"cubicOut"|"cubicInOut")
- EasingFunction
("linear"|"quadraticIn"|"quadraticOut"|"quadraticInOut"|"cubicIn"|"cubicOut"|"cubicInOut"|function(x: number): number)
- EdgeAttributesValue
(object)
:Object following the same structure as
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
(Edge|EdgeList|EdgeId|Array<Edge|EdgeId>)
- EdgeDataAndAttributes
(object)
Properties
- attributes (optional)
(EdgeAttributes)
- data (optional)
(any)
- id (optional)
(EdgeId)
- attributes (optional)
- EdgeDependencies
(object|null)
:If
null
, indicates that the edge attributes defined by the rule/class does not depend on any attribute of any node/edge. If unspecified, theself
,extremities
andparallelEdges
fields are treated as{attributes: "all", data: true, selection: true, hover: false}
, and theallNodes
andallEdges
fields are treated asnull
.Properties
- allEdges (optional)
(Dependency)
:Indicates that the rule/class for that edge should be updated when the specified attributes of any edge change
- allNodes (optional)
(Dependency)
:Indicates that the rule/class for that edge should be updated when the specified attributes of any node change
- extremities (optional)
(Dependency)
:Indicates that the rule/class for that edge should be updated when the specified attributes of the edge's extremities change
- parallelEdges (optional)
(Dependency)
:Indicates that the rule/class for that edge should be updated when the specified attributes of the node's parallel edges change
- self (optional)
(Dependency)
:Indicates that the rule/class for that edge should be updated when the specified attributes of the edge change
- allEdges (optional)
- EdgeDirection
("both"|"in"|"out")
- EdgeExtremity
(null|"arrow"|"circle-hole-arrow"|"triangle-hole-arrow"|"short-arrow"|"sharp-arrow"|"circle"|"square")
- EdgeId
(string|number)
- EdgeOutput
(object|null)
:If unspecified, the assigned attributes are inferred to the best possible extent from the
EdgeAttributesValue
value.Properties
- attributes (optional)
("all"|Array<PropertyPath>)
:List of edge attributes assigned by the rule/class
- attributes (optional)
- EdgeSelector
(null|function(edge: Edge): boolean)
: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
("plain"|"dotted"|"dashed")
- EdgeType
("line"|"triangle")
- Filter
("visible"|"raw"|"all")
: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.
- FontStyle
("normal"|"bold"|"italic")
- GeoCoordinate
(object)
Properties
- latitude
(number)
:Latitude (degrees)
- longitude
(number)
:Longitude (degrees)
- latitude
- GeoModeOptions
(object)
Properties
- attribution (optional)
(string)
[= 'Map data © <a target="_blank" href="http://osm.org/copyright">OpenStreetMap contributors</a>']
:HTML string that will be displayed on the corner, indicates the source of the tiles.
- attributionOptions (optional)
(BrandOptions)
:Position and options for the attribution message
- backgroundColor (optional)
(Color)
[= 'silver']
:Color of the map background (color of the missing tiles).
- crs (optional)
(L.CRS)
[= L.CRS.EPSG3857]
: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.
- disableNodeDragging (optional)
(boolean)
[= true]
:Disable node dragging when the mode is on. Dragging is disabled by default, because geo mode is not scale-free.
- duration (optional)
(number)
[= 0]
:Duration of the transition when swapping mode.
- latitudePath (optional)
(PropertyPath)
[= 'latitude']
:Node path which contains the latitude.
- longitudePath (optional)
(PropertyPath)
[= 'longitude']
:Node path which contains the longitude.
- maxZoomLevel (optional)
(number)
[= 20]
:Maximum geo-spatial zoom.
- minZoomLevel (optional)
(number)
[= 1]
:Minimum geo-spatial zoom.
- opacity (optional)
(number)
[= 1]
:Map baselayer opacity
- sizeRatio (optional)
(number)
[= 1]
:Multiplier for the node radius an edge width.
- tiles (optional)
(object|L.Layer)
:In addition to the following list, this object supports also Leaflet TileLayer Options and Leaflet WMS TileLayer Options options
- subdomains (optional)
(string)
[= 'abc']
:Format of the URL used to search for tiles.
- tms (optional)
(boolean)
[= false]
:Useful when using a
TMS
service. - url (optional)
(string)
[= 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png']
: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 thetileUrlSubdomains
setting). Possible'{r}'
for tile servers who support retina tiles. - wms (optional)
(boolean)
[= false]
:Useful when using a
WMS
service. For custom WMS parameters the Leaflet WMS TileLayer options can be used as reference for additional parameters to be set
- subdomains (optional)
- wrapCoordinates (optional)
(boolean)
[= true]
: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.
- (deprecated) detectRetina (optional)
(boolean)
[= false]
:If user is on a retina display, tiles of deeper zoom level will be requested to utilize the high resolution.
- (deprecated) tileBuffer (optional)
(number)
[= 2]
: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 theL.TileLayer
options. - (deprecated) tileUrlSubdomains (optional)
(string)
[= 'abc']
:Values with which the '{s}' string in the URL can be replaced. Deprecated, use
tiles.subdomains
instead. - (deprecated) tileUrlTemplate (optional)
(string)
[= 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png']
: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 thetileUrlSubdomains
setting). Possible'{r}'
for tile servers who support retina tiles. Deprecated: usetiles.url
now.
- attribution (optional)
- ImageExportOptions
(object)
Properties
- background (optional)
(Color)
:Color of the background on the output image
- badges (optional)
(boolean)
[= true]
:Whether or not to export badges
- clip (optional)
(boolean)
[= false]
:If
true
, export the current view rather than the whole graph - download (optional)
(boolean)
[= true]
:If true, the user will be prompted a modal window so he can download the exported graph.
- filename (optional)
(string)
[= "graph.png"]
:If
download
is true, the default name for the downloaded file. - filter (optional)
("visible"|"all")
[= "visible"]
:Indicates what elements to export.
- height (optional)
(number)
:If not specified, the height of the canvas will be used.
- imageCrossOrigin (optional)
(string)
:In case node or badge images are coming from a CDN, set this to 'anonymous' to avoid security errors on export.
- imageWatermark (optional)
(object)
- alpha (optional)
(string)
[= 0.65]
:Transparency of the watermark, from 0 to 1 (0 = fully transparent)
- angle (optional)
(string)
[= 0]
:Angle of the watermark (in degrees)
- height (optional)
(string)
:If not specified, the original width of the image will be used.
- repeat (optional)
(string)
[= false]
:Indicates if the watermark should be repeated over the image
- space (optional)
(string)
[= 50]
:If repeating the watermark, space in pixels between the repetitions
- url (optional)
(string)
:Url of the image to use as watermark
- width (optional)
(string)
:If not specified, the original width of the image will be used.
- x (optional)
(string)
:X coordinate of the center of the watermark
- y (optional)
(string)
:Y coordinate of the center of the watermark
- alpha (optional)
- images (optional)
(boolean)
[= true]
:Whether or not to export images
- legend (optional)
(boolean|LegendOptions)
: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. Iftrue
, 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. - margin (optional)
(number)
[= 10]
:Blank space around the graph (in pixels)
- textWatermark (optional)
(object)
- alpha (optional)
(number)
[= 0.65]
:Transparency of the watermark, from 0 to 1 (0 = fully transparent)
- angle (optional)
(number)
[= 0]
:Angle of the watermark (in degrees)
- content (optional)
(string)
:Content of the text watermark
- fontColor (optional)
(Color)
[= "red"]
:Color to use to display the text watermark
- fontFamily (optional)
(string)
[= "Arial"]
:Font used to display the text watermark
- fontSize (optional)
(number)
[= 48]
:Size of the text watermark
- fontStyle (optional)
("bold"|"italic")
:Style to use to display the text watermark
- repeat (optional)
(boolean)
[= false]
:Indicates if the watermark should be repeated over the image
- space (optional)
(number)
[= 50]
:If repeating the watermark, space in pixels between the repetitions
- x (optional)
(number)
:X coordinate of the center of the watermark
- y (optional)
(number)
:Y coordinate of the center of the watermark
- alpha (optional)
- texts (optional)
(boolean)
[= true]
:Whether or not to export texts
- width (optional)
(number)
:If not specified, the width of the canvas will be used.
- background (optional)
- InputSource
("mouse"|"touch")
:Indicates what kind of source emitted the event.
- InputTarget
(Node|Edge|null)
:Element that is clicked/hovered. If it's not
null
, you can check if it's a node or an edge with theirisNode
property. - KeyCode
(number)
:JavaScript key code.
- KeyName
(string)
:Lowercase letter (e.g
"a"
), digit (e.g"3"
) or"shift"|"ctrl"|"cmd"|"alt"|"space"|"enter"|"esc"|"del"|"backspace"
. - LayerValue
(number)
: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
(object)
Properties
- duration (optional)
(number)
:Duration of the animation when the graph is updated
- locate (optional)
(boolean|LocateOptions)
[= false]
:Center on the graph bounding box when the layout is complete. You can also provide padding.
- nodes (optional)
(NodeId[]|NodeList)
: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.
- onEnd (optional)
(function(): void)
:Function called after the last graph update
- onSync (optional)
(function(): void)
:Function called every time the graph is updated
- skipTextDrawing (optional)
(boolean)
[= true]
:Skip drawing labels during the layout. Improves performance and user experience.
- useWebWorker (optional)
(boolean)
[= true]
:Indicates if the layout should be computed inside a web worker.
- duration (optional)
- LegendOptions
(object)
Properties
- backgroundColor (optional)
(Color)
[= "white"]
:Background color of the widgets.
- borderColor (optional)
(Color)
[= "black"]
:Border color of the widgets.
- borderRadius (optional)
(number)
[= 0]
:Border radius of the widgets.
- borderWidth (optional)
(number)
[= 1]
:Border width of the widgets, in pixels.
- circleStrokeWidth (optional)
(number)
[= 3]
:Stroke width of the circles used to indicate the size of the nodes.
- fontColor (optional)
(Color)
[= "black"]
:Font color used to display the widgets' content
- fontFamily (optional)
(string)
[= "Arial"]
:Font used to display the widgets
- fontSize (optional)
(number)
[= 10]
:Font size used to display the widgets' content
- innerMargin (optional)
(number)
[= 10]
:Blank space between a widget's border and its content, in pixels.
- outerMargin (optional)
(number)
[= 5]
:Blank space between two widgets, in pixels.
- position (optional)
("bottom"|"top"|"left"|"right")
[= "bottom"]
:Position of the legend on the canvas.
- shapeColor (optional)
(Color)
[= "grey"]
:Color used for displaying the widget indicating a node or edge shape
- titleFontColor (optional)
(Color)
[= "black"]
:Font color used to display the widgets' title
- titleFontSize (optional)
(number)
[= 12]
:Font size used to display the widgets' title
- titleFunction (optional)
(function(propertyPath: Array<string>): string)
: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.
- titleMaxLength (optional)
(number)
[= 20]
:If a widget's title has more characters that this value, it will be truncated
- titleTextAlign (optional)
("left"|"center")
[= "left"]
:Alignment of the widgets' title
- widgetWidth (optional)
(number)
[= 130]
:Width of a widget, in pixels
- backgroundColor (optional)
- LocateOptions
(object)
Properties
- duration (optional)
(number)
[= 0]
:Duration of the camera movement, in milliseconds.
- easing (optional)
(EasingFunction)
[= "quadraticInOut"]
:Easing function applied to the movement of the camera.
- ignoreZoomLimits (optional)
(boolean)
[= false]
:If
true
, the optionsinteractions.zoom.minValue
andinteractions.zoom.maxValue
are ignored. - maxNodeSizeOnScreen (optional)
(number)
[= 200]
: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.
- padding (optional)
(object|number)
:If a number, indicates the padding for the four sides.
- bottom (optional)
(number)
[= 40]
:Bottom padding (in pixels).
- left (optional)
(number)
[= 40]
:Left padding (in pixels).
- right (optional)
(number)
[= 40]
:Right padding (in pixels).
- top (optional)
(number)
[= 40]
:Top padding (in pixels).
- bottom (optional)
- duration (optional)
- MapPosition
(object)
Properties
- latitude
(number)
:Latitude (degrees)
- longitude
(number)
:Longitude (degrees)
- zoom
(number)
:Map scale
- latitude
- MouseButton
("left"|"right"|"middle")
:Identifies a mouse button.
- NodeAttributesValue
(object)
:Object following the same structure as
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.Examples
ogma.styles.addRule({ nodeAttributes: { text: { // Specifying the same values for the attribute for all nodes font: 'Times' }, // Function for "leaf" property color: function(node) { if (node.getData('type') === 'company') { return 'red'; } else { return 'blue'; } }, innerStroke: function(node) { // Function for property with nested properties if (node.getData('country') === 'Germany') { return { width: 2, color: 'green' }; } else { return { width: 1, color: 'white' }; } }, badges: { topRight: function(node) { return node.getDegree(); } } } });
ogma.styles.addRule({ // It's also possible to provide a function that will return the whole attributes object nodeAttributes: function(node) { if (node.getData('foo') === 'bar') { return { color: 'blue', radius: 4 }; } else { return { color: 'red', radius: 2 }; } } });
- NodeCollection
(Node|NodeList|NodeId|Array<Node|NodeId>)
- NodeDataAndAttributes
(object)
Properties
- attributes (optional)
(NodeAttributes)
- data (optional)
(any)
- id (optional)
(NodeId)
- attributes (optional)
- NodeDependencies
(object|null)
:If
null
, indicates that the node attributes defined by the rule/class does not depend on any attribute of any node/edge. If unspecified, theself
,adjacentNodes
andadjacentEdges
fields are treated as{attributes: "all", data: true, selection: true, hover: false}
, and theallNodes
andallEdges
fields are treated asnull
.Properties
- adjacentEdges (optional)
(Dependency)
:Indicates that the rule/class for that node should be updated when the specified attributes of the node's adjacent edges change
- adjacentNodes (optional)
(Dependency)
:Indicates that the rule/class for that node should be updated when the specified attributes of the node's adjacent nodes change
- allEdges (optional)
(Dependency)
:Indicates that the rule/class for that node should be updated when the specified attributes of any edge change
- allNodes (optional)
(Dependency)
:Indicates that the rule/class for that node should be updated when the specified attributes of any node change
- self (optional)
(Dependency)
:Indicates that the rule/class for that node should be updated when the specified attributes of the node change
- adjacentEdges (optional)
- NodeId
(string|number)
- NodeOutput
(object|null)
:If unspecified, the assigned attributes are inferred to the best possible extent from the
NodeAttributesValue
value.Properties
- attributes (optional)
("all"|Array<PropertyPath>)
:List of node attributes assigned by the rule/class
- attributes (optional)
- NodeSelector
(null|function(node: Node): boolean)
: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
("circle"|"cross"|"diamond"|"pentagon"|"square"|"star"|"equilateral")
- NodeStyleRuleDefinition
(object)
Properties
- options (optional)
- edgeAttributes (optional)
(EdgeAttributesValue)
- edgeDependencies (optional)
(EdgeDependencies)
- edgeOutput (optional)
(EdgeOutput)
- edgeSelector (optional)
(EdgeSelector)
- nodeAttributes (optional)
(NodeAttributesValue)
- nodeDependencies (optional)
(NodeDependencies)
- nodeOutput (optional)
(NodeOutput)
- nodeSelector (optional)
(NodeSelector)
- edgeAttributes (optional)
- options (optional)
- OpacityValue
(number)
: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
ogma.setOptions({backgroundColor: "rgba(128, 128, 128, 0)"})
so the nodes/edges are nicely blended towards the image color. - Options
Properties
- backgroundColor (optional)
(Color)
[= "white"]
:Background color of the canvas.
- cursor (optional)
(object)
- default (optional)
(CursorStyle)
[= "default"]
:A CSS value for the cursor.
- edge (optional)
(CursorStyle)
[= "pointer"]
:Cursor style when an edge is hovered.
- node (optional)
(CursorStyle)
[= "pointer"]
:Cursor style when a node is hovered.
- default (optional)
- detect (optional)
(object)
- edgeErrorMargin (optional)
(number)
[= 7]
:How far of the mouse an edge can be and still be detected, in pixels.
- edgeTexts (optional)
(boolean)
[= true]
:Indicates if the detection of edge texts should be enabled.
- edges (optional)
(boolean)
[= true]
:Indicates if the detection of edges should be enabled.
- nodeErrorMargin (optional)
(number)
[= 5]
:How far of the mouse a node can be and still be detected, in pixels.
- nodeTexts (optional)
(boolean)
[= true]
:Indicates if the detection of node texts should be enabled.
- nodes (optional)
(boolean)
[= true]
:Indicates if the detection of nodes should be enabled.
- edgeErrorMargin (optional)
- directedEdges (optional)
(boolean)
[= false]
:If true, edges of opposing directions will be not be mixed together visually.
- edgesAlwaysCurvy (optional)
(boolean)
[= false]
:If true, all edges will be curved.
- imgCrossOrigin (optional)
(CrossOriginValue)
[= "anonymous"]
:Indicates the value of the
crossOrigin
field for DOM images. - interactions (optional)
(object)
- gesture (optional)
(object)
- enabled (optional)
(boolean)
[= true]
:Indicates if zooming/rotating using two fingers should be enabled.
- hideEdgeTexts (optional)
(boolean)
[= false]
:Indicates if the edge texts should be hidden when zooming/rotating the view using two fingers.
- hideEdges (optional)
(boolean)
[= false]
:Indicates if the edges should be hidden when zooming/rotating the view using two fingers.
- hideNodeTexts (optional)
(boolean)
[= false]
:Indicates if the node texts should be hidden when zooming/rotating the view using two fingers.
- hideNodes (optional)
(boolean)
[= false]
:Indicates if the nodes should be hidden when zooming/rotating the view using two fingers.
- enabled (optional)
- drag (optional)
(object)
- cursor (optional)
(CursorStyle)
[= 'move']
:Cursor style to be applied while dragging the node
- enabled (optional)
(boolean)
[= true]
:Indicates if dragging nodes with the mouse should be enabled.
- cursor (optional)
- pan (optional)
(object)
- enabled (optional)
(boolean)
[= true]
:Indicates if moving the view with the mouse should be enabled.
- hideEdgeTexts (optional)
(boolean)
[= false]
:Indicates if the edge texts should be hidden when moving the view.
- hideEdges (optional)
(boolean)
[= false]
:Indicates if the edges should be hidden when moving the view.
- hideNodeTexts (optional)
(boolean)
[= false]
:Indicates if the node texts should be hidden when moving the view.
- hideNodes (optional)
(boolean)
[= false]
:Indicates if the nodes should be hidden when moving the view.
- enabled (optional)
- rotation (optional)
(object)
- enabled (optional)
(boolean)
[= true]
:Indicates if rotating the view with the mouse should be enabled.
- hideEdgeTexts (optional)
(boolean)
[= false]
:Indicates if the edge texts should be hidden when rotating the view.
- hideEdges (optional)
(boolean)
[= false]
:Indicates if the edges should be hidden when rotating the view.
- hideNodeTexts (optional)
(boolean)
[= false]
:Indicates if the node texts should be hidden when rotating the view.
- hideNodes (optional)
(boolean)
[= false]
:Indicates if the nodes should be hidden when rotating the view.
- enabled (optional)
- selection (optional)
(object)
- enabled (optional)
(boolean)
[= true]
:Indicates if selection with the mouse should be enabled
- multiSelectionKey (optional)
(KeyName|null)
[= "ctrl"]
:Indicates the key that must be pressed to select multiple nodes/edges at a time.
- enabled (optional)
- zoom (optional)
(object)
- duration (optional)
(number)
[= 150]
:Indicate the duration of a manual zoom.
- easing (optional)
(EasingFunction)
[= "quadraticOut"]
:Easing function to use for the zoom.
- enabled (optional)
(boolean)
[= true]
:Indicates if zoom on mouse wheel should be enabled.
- hideEdgeTexts (optional)
(boolean)
[= false]
:Indicates if the edge texts should be hidden when zooming manually.
- hideEdges (optional)
(boolean)
[= false]
:Indicates if the edges should be hidden when zooming manually.
- hideNodeTexts (optional)
(boolean)
[= false]
:Indicates if the node texts should be hidden when zooming manually.
- hideNodes (optional)
(boolean)
[= false]
:Indicates if the nodes should be hidden when zooming manually.
- maxValue (optional)
(null|ZoomBoundaryFunction)
: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. - minValue (optional)
(null|ZoomBoundaryFunction)
: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. - modifier (optional)
(number)
[= 1.8]
:Indicate the zoom multiplier on the manual zoom.
- onDoubleClick (optional)
(boolean)
[= false]
:Indicates if zoom on double click should be enabled.
- duration (optional)
- gesture (optional)
- minimumHeight (optional)
(number)
[= 300]
:Minimum container height in pixels.
- minimumWidth (optional)
(number)
[= 300]
:Minimum container width in pixels.
- mouse (optional)
(object)
- disableWheelUntilMouseDown (optional)
(boolean)
[= false]
:If true, the canvas will not take the focus of the mouse until the user clicks on it.
- doubleClickTimer (optional)
(boolean)
[= 500]
:After a click, amount of time after which a second click won't trigger a double click event
- enabled (optional)
(boolean)
[= true]
:Indicates if the mouse should be enabled
- wheelEnabled (optional)
(boolean)
[= true]
:Indicates if the mouse wheel should be enabled.
- disableWheelUntilMouseDown (optional)
- renderer (optional)
(RendererType)
[= "webgl"]
: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
). - texts (optional)
(object)
- hideUntilFontsLoaded (optional)
(boolean)
[= true]
: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. - preventOverlap (optional)
(boolean)
[= true]
:Detect and remove overlapping of texts.
- hideUntilFontsLoaded (optional)
- touch (optional)
(object)
- enabled (optional)
(boolean)
[= true]
:Indicates if the touch should be enabled
- enabled (optional)
- transformations (optional)
(object)
- updateOnDataChange (optional)
(boolean)
[= true]
:Indicates if the transformations should be re-computed when the data of a node or edge changes.
- updateOnDataChange (optional)
- backgroundColor (optional)
- PixelSize
(number|string)
: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 asX percent of the default value
.X
should be parsable usingparseFloat
. - PredefinedEdgeShape
("line"|"arrow"|"tapered"|"dashed"|"dotted")
:These are valid values to ensure retro-compatibility with Ogma < 2.2
- PropertyPath
(string|Array<string>)
- RawEdge
(object)
Properties
- attributes (optional)
(EdgeAttributes)
- data (optional)
(any)
- id (optional)
(EdgeId)
- source
(NodeId)
- target
(NodeId)
- attributes (optional)
- RawGraph
(object)
Properties
- RawNode
(object)
Properties
- attributes (optional)
(NodeAttributes)
- data (optional)
(any)
- id (optional)
(NodeId)
- attributes (optional)
- RendererErrorCode
("NO_WEBGL"|"NO_ANGLE_INSTANCED_ARRAYS"|"OTHER"|null)
:A non-null value indicates that an error has occurred and provides information on that error.
"NO_WEBGL"
indicates that WebGL is not available, most likely a browser or GPU issue.
"NO_ANGLE_INSTANCED_ARRAYS
" indicates that the ANGLE_instanced_arrays WebGL extension is not available. Also most likely a browser or GPU issue.
"OTHER"
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
("requested"|"ok"|"error")
:Indicates a renderer state.
"requested"
is fired right after Ogma is initialized or therenderer
option has been changed, and means that the renderer has not been initialized yet.
"ok"
indicates that the renderer has been initialized and runs properly.
"error"
indicates that an error has occurred that prevents the renderer from running. - RendererType
("webgl"|"canvas"|"svg"|null)
- ScalingMethod
("scaled"|"fixed")
- StyleClassDefinition
(object)
Properties
- options (optional)
- edgeAttributes (optional)
(EdgeAttributesValue)
- edgeDependencies (optional)
(EdgeDependencies)
- edgeOutput (optional)
(EdgeOutput)
- nodeAttributes (optional)
(NodeAttributesValue)
- nodeDependencies (optional)
(NodeDependencies)
- nodeOutput (optional)
(NodeOutput)
- edgeAttributes (optional)
- options (optional)
- TextAlign
("left"|"center")
- TextContent
(string|number|null)
- TextPosition
('right' | 'left' | 'top' | 'bottom' | 'center')
- TooltipOptions
(object)
Properties
- options (optional)
- autoAdjust (optional)
(boolean)
[= true]
:When the mouse is at the edge of the screen, indicates if the tooltip position should be corrected so it fits in the canvas.
- className (optional)
(string)
:If specified, this class name will be added to tooltip.
- delay (optional)
(number)
[= 0]
:Delay in milliseconds before the tooltip is shown when the node is hovered.
- position (optional)
("top"|"bottom"|"left"|"right"|"cssDefined")
[= "top"]
: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.
- autoAdjust (optional)
- options (optional)
- View
(object)
Properties
- angle
(number)
- x
(number)
- y
(number)
- zoom
(number)
- angle
- WatcherOptions
(object|PropertyPath)
:If a string or array is specified, it indicates the
path
property.Properties
- filter (optional)
("visible"|"all")
[= "visible"]
: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.
- path (optional)
(PropertyPath)
:Path of the data property to watch. If not specified, watch the root property.
- unwindArrays (optional)
(boolean)
[= false]
:If
true
, array values will be treated as multiple individual values instead of one
- filter (optional)
- ZoomBoundaryFunction
(function(params: {smallestNodeSize: number, biggestNodeSize: number, graphWidth: number, graphHeight: number, viewWidth: number, viewHeight: number}): number)
Properties
- biggestNodeSize
(number)
:Diameter of the biggest node (graph space)
- graphHeight
(number)
:Height of the graph (graph space)
- graphWidth
(number)
:Width of the graph (graph space)
- smallestNodeSize
(number)
:Diameter of the smallest node (graph space)
- viewWidth
(number)
:Width of the view (pixels)
- biggestNodeSize