Constructor
# new Helios(config, networkopt)
constructor description
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
config |
Object
|
The configuration object | ||
elementID |
string
|
<optional> |
"helios" | The ID of the element to attach the canvas to |
density |
boolean
|
<optional> |
false | Whether to display the density |
nodes |
Object
|
<optional> |
{} | The nodes object. should be a dictionary of node IDs and node attributes. |
edges |
Array.<Object>
|
<optional> |
[] | The edges array of objects. Each object should have source and target attributes. |
network |
Network
|
<optional> |
null | Alternavely, a network object can be passed directly. If this is the case, the nodes and edges parameters are ignored. |
config.use2D |
boolean
|
<optional> |
false | Whether to use 2D mode |
config.orthographic |
boolean
|
<optional> |
false | Whether to use orthographic projection instead of perspective |
config.hyperbolic |
boolean
|
<optional> |
false | Whether to use hyperbolic mode |
config.fastEdges |
boolean
|
<optional> |
false | Whether to use fast edges (edges have always 1 pixel width) |
config.forceSupersample |
boolean
|
<optional> |
false | Whether to force supersampling (improves quality of the render even for high density displays) |
config.autoStartLayout |
boolean
|
<optional> |
true | Whether to start the layout automatically |
config.autoCleanup |
boolean
|
<optional> |
true | Whether to automatically cleanup helios if canvas or element is removed (useful for react and vue) |
config.webglOptions |
Object
|
<optional> |
defaults | The webgl options object. See getContext for more information. Defaults to { antialias: true, powerPreference: "high-performance", desynchronized: true, } |
- See:
-
- Network#addNodes
- Network#addEdges
- Network
Example
// create a new helios object
let helios = new Helios({
elementID: "helios",
nodes: {
"0": {label: "Node 0"},
"1": {label: "Node 1"},
"2": {label: "Node 2"},
"3": {label: "Node 3"},
},
edges: [
{source: "0", target: "1"},
{source: "1", target: "2"},
{source: "2", target: "3"},
{source: "3", target: "0"},
],
});
Classes
Methods
# additiveBlending(enableAdditiveBlending) → {Helios|this}
Enables or disables additive blending (Useful for dark backgrounds).
Parameters:
Name | Type | Description |
---|---|---|
enableAdditiveBlending |
boolean
|
Whether to enable additive blending. |
- The Helios instance for chaining, or the current value if no argument is provided.
Helios
|
this
Examples
// Enable additive blending.
helios.additiveBlending(true);
// Disable additive blending.
helios.additiveBlending(false);
# attributesTrackers() → {Object}
attributesTrackers getter.
- The tracked attributes.
Object
Example
// Get the tracked attributes.
let attributesTrackers = helios.attributesTrackers();
# backgroundColor(color) → {Array.<number>|this}
Set the background color of the graph.
Parameters:
Name | Type | Description |
---|---|---|
color |
Array.<number>
|
The background color of the graph in RGB or RGBA formats as 3 or 4 float entries from 0.0 to 1.0. |
The background color of the panel or the current Helios instance for chaining.
Array.<number>
|
this
Examples
// Set the background color of the graph to red
helios.backgroundColor([1.0,0,0,1.0]);
// Get the background color of the graph
let backgroundColor = helios.backgroundColor();
# centerOnNodes(nodes, duration)
Center view on nodes with animation.
Parameters:
Name | Type | Description |
---|---|---|
nodes |
Array.<number>
|
Node
|
The nodes to center on. |
duration |
number
|
The duration of the animation in milliseconds. |
Examples
// Center on node with id 1
helios.centerOnNodes([1], 1000);
// Center on node with id 1 and 2
helios.centerOnNodes([1, 2], 1000);
// Center on node with id 1 and node object
helios.centerOnNodes([1, helios.network.nodes[2]], 1000);
return {this} The current instance of Helios for chaining.
# cleanup(keepGLContext)
Manually cleanup the Helios instance.
Parameters:
Name | Type | Description |
---|---|---|
keepGLContext |
boolean
|
Whether to keep the WebGL context alive. |
Examples
// Cleanup the Helios instance.
helios.cleanup();
// Cleanup the Helios instance and keep the WebGL context alive.
helios.cleanup(true);
# edgeColor(colorInput, edgeIDopt) → {number|this}
Set the color of the edges.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
colorInput |
number
|
function
|
The color of the edges or a function that returns the color of the edges. | |
edgeID |
string
|
<optional> |
The ID of the edge to set the color of. If not specified, the color of all edges will be set. |
The color of the edges or the current Helios instance for chaining.
number
|
this
Examples
// Set the color of all edges to red
helios.edgeColor([1, 0, 0, 1]);
// Set the color of a specific edge to red
helios.edgeColor([1, 0, 0, 1], "edgeID");
// Set the color of all edges to a random color
helios.edgeColor(() => {
return [Math.random(), Math.random(), Math.random(), 1];
});
// Set the color of all edges based on an edge attribute called `altColor`
helios.edgeColor((edge) => {
return edge.altColor;
});
# edgeWidth(widthInput, edgeIndexopt) → {number|this}
Set the width of the edges.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
widthInput |
number
|
function
|
The width of the edges. If a function is provided, it will be called for each edge. The function should return a number or an array of two numbers, the width at the source and target. | |
edgeIndex |
number
|
<optional> |
The index of the edge. If not provided, the width will be set for all edges. |
- The width of the edge if no arguments are provided, otherwise the Helios instance for chaining.
number
|
this
Examples
// Set the width of all edges to 5.
helios.edgeWidth(5);
// Set the width of the edge with index 0 to 5.
helios.edgeWidth(5, 0);
// Set the width of all edges to a random number between 1 and 10.
helios.edgeWidth(sourceNode, targetNode, edgeIndex) => {
return Math.random() * 9 + 1;
});
// Set the width of all edges to 5 at source and 2 at target.
helios.edgeWidth(sourceNode, targetNode, edgeIndex) => {
return [5, 2];
});
// Set the width of the edge with altSizes properties from source and target.
helios.edgeWidth(sourceNode, targetNode, edgeIndex) => {
return [sourceNode.altSizes, targetNode.altSizes];
});
# edgesColorsFromNodes(edgesColorsFromNodes) → {Helios|this}
Enables or disables updating the edge colors to match the node colors.
Parameters:
Name | Type | Description |
---|---|---|
edgesColorsFromNodes |
boolean
|
Whether to update the edge colors to match the node colors. |
- The Helios instance for chaining, or the current value if no argument is provided.
Helios
|
this
Example
// Enable updating the edge colors to match the node colors.
helios.edgesColorsFromNodes(true);
# edgesGlobalOpacityBase(opacity) → {Helios|this}
Set/get edge global opacity base. The opacity of each edge is calculated as: opacity = globalBase + globalScale * edgeOpacity
Parameters:
Name | Type | Description |
---|---|---|
opacity |
number
|
The global opacity base of the edges. |
- The Helios instance for chaining, or the current global opacity if no argument is provided.
Helios
|
this
Example
// Set the global opacity base of the edges to 0.5.
helios.edgesGlobalOpacityBase(0.5);
# edgesGlobalOpacityScale(opacity) → {Helios|this}
Set/get edge global opacity scale. The opacity of each edge is calculated as: opacity = globalBase + globalScale * edgeOpacity
Parameters:
Name | Type | Description |
---|---|---|
opacity |
number
|
The global opacity scale of the edges. |
- The Helios instance for chaining, or the current global opacity if no argument is provided.
Helios
|
this
Example
// Set the global opacity of the edges to 0.5.
helios.edgesGlobalOpacityScale(0.5);
# edgesGlobalWidthBase(width) → {Helios|this}
Set/get edge global width base. The width of each edge is calculated as: width = globalBase + globalScale * edgeWidth
Parameters:
Name | Type | Description |
---|---|---|
width |
number
|
The global width base of the edges. |
- The Helios instance for chaining, or the current global width if no argument is provided.
Helios
|
this
Example
// Set the global width base of the edges to 0.5.
helios.edgesGlobalWidthBase(0.5);
# edgesGlobalWidthScale(width) → {Helios|this}
Set/get edge global width scale. The width of each edge is calculated as: width = globalBase + globalScale * edgeWidth
Parameters:
Name | Type | Description |
---|---|---|
width |
number
|
The global width scale of the edges. |
- The Helios instance for chaining, or the current global width if no argument is provided.
Helios
|
this
Example
// Set the global width of the edges to 0.5.
helios.edgesGlobalWidthScale(0.5);
# edgesWidthFromNodes(edgesWidthFromNodes) → {Helios|this}
Enables or disables updating the edge widths to match the node widths.
Parameters:
Name | Type | Description |
---|---|---|
edgesWidthFromNodes |
boolean
|
Whether to update the edge widths to match the node widths. |
- The Helios instance for chaining, or the current value if no argument is provided.
Helios
|
this
Example
// Enable updating the edge widths to match the node widths.
helios.edgesWidthFromNodes(true);
# exportFigure(filename, options)
Exports the current figure to an image file.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
filename |
string
|
The filename for the exported image, including the extension (e.g., "image.png"). | ||
options |
Object
|
An object containing export options. | ||
scale |
number
|
<optional> |
1.0 | The scale factor for the exported image. |
supersampleFactor |
number
|
<optional> |
4.0 | The supersampling factor for the exported image. |
width |
number
|
null
|
<optional> |
null | The width of the exported image. If null, the current canvas width is used. |
height |
number
|
null
|
<optional> |
null | The height of the exported image. If null, the current canvas height is used. |
backgroundColor |
string
|
null
|
<optional> |
null | The background color of the exported image. If null, the current background color is used. |
Example
helios.exportFigure("figure.png", {
scale: 1.0,
supersampleFactor: 4.0,
width: 800,
height: 600,
backgroundColor: "#FFFFFF",
});
# getCenterNodes() → {Array.<Node>}
Get the nodes being centered on.
The nodes being centered on.
Array.<Node>
Example
// Get the nodes being centered on
let nodes = helios.getCenterNodes();
# getProjectedPositions(nodes) → {Float32Array}
Project the positions of the nodes provided to the screen (using the projection matrix).
Parameters:
Name | Type | Description |
---|---|---|
nodes |
Array.<Node>
|
number
|
The nodes or indices of nodes to project. |
- The projected positions of the nodes.
Float32Array
Example
// Get the projected positions of all nodes.
let projectedPositions = helios.getProjectedPositions(helios.network.nodes);
# isReady() → {boolean}
Returns whether the Helios instance is ready to be used.
- Whether the Helios instance is ready to be used.
boolean
Example
// Check if Helios is ready to be used.
if (helios.isReady()) {
// Helios is ready, do something.
} else {
// Helios is not ready yet, wait or handle the error.
}
# labelsMaxPixels(labelsMaxPixels) → {Helios|this}
Get or set labels buffer size
Parameters:
Name | Type | Description |
---|---|---|
labelsMaxPixels |
number
|
The maximum number of pixels for the labels buffer. |
- The Helios instance for chaining, or the current value if no argument is provided.
Helios
|
this
Example
// Set the maximum number of pixels for the labels buffer to 10000.
helios.labelsMaxPixels(10000);
# nodeColor(colorInput, nodeIDopt) → {Array.<number>|this}
Set the color of the nodes.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
colorInput |
Array.<number>
|
function
|
The color of the nodes in RGB or RGBA formats as 3 or 4 float entries from 0.0 to 1.0 or a function that returns the color of the nodes. | |
nodeID |
string
|
<optional> |
The ID of the node to set the color of. If not specified, the color of all nodes will be set. |
The color of the nodes or the current Helios instance for chaining.
Array.<number>
|
this
Examples
// Set the color of all nodes to red
helios.nodeColor([1.0,0,0,1.0]);
// Set the color of a specific node to red
helios.nodeColor([1.0,0,0,1.0], "nodeID");
// Set the color of all nodes to a random color
helios.nodeColor((node) => {
return [Math.random(), Math.random(), Math.random(), 1.0];
});
// Set the color of all nodes based on an node attribute called `altColor`
helios.nodeColor((node) => {
return node.altColor;
});
# nodeOutlineColor(colorInput, nodeIDopt) → {Array.<number>|this}
Set the color of the node outlines.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
colorInput |
Array.<number>
|
function
|
The color of the node outlines or a function that returns the color of the node outlines. Uses RGBA or RGBA formatted array. | |
nodeID |
string
|
<optional> |
The ID of the node to set the color of. If not specified, the color of all nodes will be set. |
The color of the node outlines or the current Helios instance for chaining.
Array.<number>
|
this
Examples
// Set the color of all node outlines to red
helios.nodeOutlineColor([1, 0, 0, 1]);
// Set the color of a specific node outline to red
helios.nodeOutlineColor([1, 0, 0, 1], "nodeID");
// Set the color of all node outlines to a random color
helios.nodeOutlineColor(() => {
return [Math.random(), Math.random(), Math.random(), 1];
});
// Set the color of all node outlines based on an node attribute called `altColor`
helios.nodeOutlineColor((node) => {
return node.altColor;
});
# nodeOutlineWidth(widthInput, nodeIDopt) → {number|this}
Set the width of the node outlines.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
widthInput |
number
|
function
|
The width of the node outlines or a function that returns the width of the node outlines. | |
nodeID |
string
|
<optional> |
The ID of the node to set the width of. If not specified, the width of all nodes will be set. |
The width of the node outlines or the current Helios instance for chaining.
number
|
this
Examples
// Set the width of all node outlines to 5
helios.nodeOutlineWidth(5);
// Set the width of a specific node outline to 5
helios.nodeOutlineWidth(5, "nodeID");
// Set the width of all node outlines to a random width
helios.nodeOutlineWidth(() => {
return Math.random() * 10;
});
// Set the width of all node outlines based on an node attribute called `altWidth`
helios.nodeOutlineWidth((node) => {
return node.altWidth;
});
// Set the width of all node outlines based on an node attribute called `altWidth`
helios.nodeOutlineWidth((node) => {
return node.altWidth;
});
# nodeSize(sizeInput, nodeIDopt) → {number|this}
Set the size of the nodes.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
sizeInput |
number
|
function
|
The size of the nodes or a function that returns the size of the nodes. | |
nodeID |
string
|
<optional> |
The ID of the node to set the size of. If not specified, the size of all nodes will be set. |
The size of the nodes or the current Helios instance for chaining.
number
|
this
Examples
// Set the size of all nodes to 10
helios.nodeSize(10);
// Set the size of a specific node to 10
helios.nodeSize(10, "nodeID");
// Set the size of all nodes to a random size
helios.nodeSize(() => {
return Math.random() * 10;
});
// Set the size of all nodes based on an node attribute called `altSize`
helios.nodeSize((node) => {
return node.altSize;
});
# nodesGlobalOpacityBase(opacity) → {Helios|this}
Set/get node global opacity base. The opacity of each node is calculated as: opacity = globalBase + globalScale * nodeOpacity
Parameters:
Name | Type | Description |
---|---|---|
opacity |
number
|
The global opacity base of the nodes. |
- The Helios instance for chaining, or the current global opacity if no argument is provided.
Helios
|
this
Examples
// Set the global opacity base of the nodes to 0.5.
helios.nodesGlobalOpacityBase(0.5);
// Get the global opacity base of the nodes.
let base = helios.nodesGlobalOpacityBase();
# nodesGlobalOpacityScale(opacity) → {Helios|this}
Set/get node global opacity scale. The opacity of each node is calculated as: opacity = globalBase + globalScale * nodeOpacity
Parameters:
Name | Type | Description |
---|---|---|
opacity |
number
|
The global opacity scale of the nodes. |
- The Helios instance for chaining, or the current global opacity if no argument is provided.
Helios
|
this
Examples
// Set the global opacity of the nodes to 0.5.
helios.nodesGlobalOpacityScale(0.5);
// Get the global opacity of the nodes.
let scale = helios.nodesGlobalOpacityScale();
# nodesGlobalOutlineOpacityScale(opacity) → {Helios|this}
Set/get node global outline opacity scale. The outline opacity of each node is calculated as: opacity = globalBase + globalScale * nodeOutlineOpacity
Parameters:
Name | Type | Description |
---|---|---|
opacity |
number
|
The global outline opacity scale of the nodes. |
- The Helios instance for chaining, or the current global outline opacity if no argument is provided.
Helios
|
this
Examples
// Set the global outline opacity of the nodes to 0.5.
helios.nodesGlobalOutlineOpacityScale(0.5);
// Get the global outline opacity of the nodes.
let scale = helios.nodesGlobalOutlineOpacityScale();
# nodesGlobalOutlineWidthBase(width) → {Helios|this}
Set/get node global outline width base. The outline width of each node is calculated as: width = globalBase + globalScale * nodeOutlineWidth
Parameters:
Name | Type | Description |
---|---|---|
width |
number
|
The global outline width base of the nodes. |
- The Helios instance for chaining, or the current global outline width if no argument is provided.
Helios
|
this
Examples
// Set the global outline width base of the nodes to 0.5.
helios.nodesGlobalOutlineWidthBase(0.5);
// Get the global outline width base of the nodes.
let base = helios.nodesGlobalOutlineWidthBase();
# nodesGlobalOutlineWidthScale(width) → {Helios|this}
Set/get node global outline width scale. The outline width of each node is calculated as: width = globalBase + globalScale * nodeOutlineWidth
Parameters:
Name | Type | Description |
---|---|---|
width |
number
|
The global outline width scale of the nodes. |
- The Helios instance for chaining, or the current global outline width if no argument is provided.
Helios
|
this
Examples
// Set the global outline width of the nodes to 0.5.
helios.nodesGlobalOutlineWidthScale(0.5);
// Get the global outline width of the nodes.
let scale = helios.nodesGlobalOutlineWidthScale();
# nodesGlobalSizeBase(size) → {Helios|this}
Set/get node global size base. The size of each node is calculated as: size = globalBase + globalScale * nodeSize
Parameters:
Name | Type | Description |
---|---|---|
size |
number
|
The global size base of the nodes. |
- The Helios instance for chaining, or the current global size if no argument is provided.
Helios
|
this
Examples
// Set the global size base of the nodes to 0.5.
helios.nodesGlobalSizeBase(0.5);
// Get the global size base of the nodes.
let base = helios.nodesGlobalSizeBase();
# nodesGlobalSizeScale(size) → {Helios|this}
Set/get node global size scale. The size of each node is calculated as: size = globalBase + globalScale * nodeSize
Parameters:
Name | Type | Description |
---|---|---|
size |
number
|
The global size scale of the nodes. |
- The Helios instance for chaining, or the current global size if no argument is provided.
Helios
|
this
Examples
// Set the global size of the nodes to 0.5.
helios.nodesGlobalSizeScale(0.5);
// Get the global size of the nodes.
let scale = helios.nodesGlobalSizeScale();
# onCleanup(callback) → {this}
Set the callback for when Helios is cleaned up and properly disposed.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for when Helios is cleaned up
let helios = Helios("elementID",networkData);
helios.onCleanup(() => {
console.log("Helios is cleaned up");
});
# onDraw(callback) → {this}
Set the callback for the draw event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the draw event
helios.onDraw(() => {
console.log("The graph was drawn");
});
# onEdgeClick(callback) → {this}
Set the callback for the edge click event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
- See:
The current Helios instance for chaining.
this
Example
// Set the callback for the edge click event
helios.onEdgeClick((edge) => {
console.log("The edge " + edge.id + " was clicked");
});
# onEdgeDoubleClick(callback) → {this}
Set the callback for the edge double click event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
- See:
The current Helios instance for chaining.
this
Example
// Set the callback for the edge double click event
helios.onEdgeDoubleClick((edge) => {
console.log("The edge " + edge.id + " was double clicked");
});
# onEdgeHoverEnd(callback) → {this}
Set the callback for the edge hover end event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
- See:
The current Helios instance for chaining.
this
Example
// Set the callback for the edge hover end event
helios.onEdgeHoverEnd((edge) => {
console.log("The edge " + edge.id + " was no longer hovered");
});
# onEdgeHoverMove(callback) → {this}
Set the callback for the edge hover move event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
- See:
The current Helios instance for chaining.
this
Example
// Set the callback for the edge hover move event
helios.onEdgeHoverMove((edge) => {
console.log("The edge " + edge.id + " was hovered");
});
# onEdgeHoverStart(callback) → {this}
Set the callback for the edge hover start event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
- See:
The current Helios instance for chaining.
this
Example
// Set the callback for the edge hover start event
helios.onEdgeHoverStart((edge) => {
console.log("The edge " + edge.id + " was hovered");
});
# onLayoutStart(callback) → {this}
Set the callback for the layout start event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
- See:
-
- Helios#onLayoutStop
- Helios#onLayoutTick
- Helios#onLayoutEnd
The current Helios instance for chaining.
this
Example
// Set the callback for the layout start event
helios.onLayoutStart(() => {
console.log("The layout has started");
});
# onLayoutStop(callback) → {this}
Set the callback for the layout stop event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
- See:
-
- Helios#onLayoutStart
- Helios#onLayoutTick
The current Helios instance for chaining.
this
Example
// Set the callback for the layout stop event
helios.onLayoutStop(() => {
console.log("The layout has stopped");
});
# onNodeClick(callback) → {this}
Set the callback for the node click event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the node click event
helios.onNodeClick((node) => {
console.log("The node " + node.id + " was clicked");
});
# onNodeDoubleClick(callback) → {this}
Set the callback for the node double click event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the node double click event
helios.onNodeDoubleClick((node) => {
console.log("The node " + node.id + " was double clicked");
});
# onNodeHoverEnd(callback) → {this}
Set the callback for the node hover end event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the node hover end event
helios.onNodeHoverEnd((node) => {
console.log("The node " + node.id + " was no longer hovered");
});
# onNodeHoverMove(callback) → {this}
Set the callback for the node hover move event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the node hover move event
helios.onNodeHoverMove((node) => {
console.log("The node " + node.id + " was hovered");
});
# onNodeHoverStart(callback) → {this}
Set the callback for the node hover start event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the node hover start event
helios.onNodeHoverStart((node) => {
console.log("The node " + node.id + " was hovered");
});
# onReady(callback) → {this}
Set the callback for when Helios is ready and properly initialized.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for when Helios is ready
let helios = Helios("elementID",networkData);
helios.onReady(() => {
console.log("Helios is ready");
});
# onResize(callback) → {this}
Set the callback for the resize event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the resize event
helios.onResize((width, height) => {
console.log("The canvas was resized to " + width + "x" + height);
});
# onRotation(callback) → {this}
Set the callback for the rotation event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the rotation event
helios.onRotation((rotation) => {
console.log("The rotation is now " + rotation);
});
# onZoom(callback) → {this}
Set the callback for the zoom event.
Parameters:
Name | Type | Description |
---|---|---|
callback |
function
|
The callback function. |
The current Helios instance for chaining.
this
Example
// Set the callback for the zoom event
helios.onZoom((zoom) => {
console.log("The zoom is now " + zoom);
});
# pauseLayout() → {this}
Pauses the layout computation of the network visualization.
Returns the current Helios instance for chaining
this
# pickNode(x, y) → {Node}
Pick a node at the given screen coordinates.
Parameters:
Name | Type | Description |
---|---|---|
x |
number
|
The x coordinate of the point to pick. |
y |
number
|
The y coordinate of the point to pick. |
- The node at the given point, or null if no node was picked.
Examples
// Pick a node at the center of the canvas.
let node = helios.pickNode(helios.canvasElement.width / 2, helios.canvasElement.height / 2);
if(node !== null) {
console.log("Picked node " + node.index);
}
// Pick a node at the center of the canvas, and highlight it.
let node = helios.pickNode(helios.canvasElement.width / 2, helios.canvasElement.height / 2);
if(node !== null) {
console.log("Picked node " + node.index);
helios.highlightNode(node);
}
# pickeableEdges(pickables) → {Helios|this}
Enables or disables edges that can be pickeable
Parameters:
Name | Type | Description |
---|---|---|
pickables |
Array.<number>
|
"all"
|
The indices of the edges that can be pickeable, or "all" to make all edges pickeable. |
- The Helios instance for chaining, or the current value if no argument is provided.
Helios
|
this
Examples
// Enable pickeable edges for [0,1,2,3]
helios.pickeableEdges([0, 1, 2, 3]);
// Enable pickeable edges for all edges
helios.pickeableEdges("all");
# redraw() → {this}
Will hint force Helios to redraw the network.
- Helios#event:redraw
- Helios#event:draw
- Helios#event:HoverEvent
Returns this for chaining.
this
Examples
// Redraw the network
helios.redraw();
// Update geometry and redraw the network
helios.update().redraw();
# render(immediateopt) → {this}
Will hint or force Helios to render the network.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
immediate |
boolean
|
<optional> |
false | If true, the render will be performed immediately, otherwise it will be scheduled. |
Returns this for chaining.
this
Examples
// Render the network
helios.render();
// Update geometry and render the network
helios.update().render();
# resumeLayout() → {this}
Resumes the layout computation of the network visualization after it has been paused.
Returns the current Helios instance for chaining
this
# semanticZoomExponent(semanticZoomExponent) → {this|number}
Set the semantic zoom exponent.
Parameters:
Name | Type | Description |
---|---|---|
semanticZoomExponent |
number
|
The semantic zoom exponent. |
Returns this for chaining if semanticZoomExponent is defined, otherwise returns the current semantic zoom exponent.
this
|
number
Examples
// Set the semantic zoom exponent to 0.5
helios.semanticZoomExponent(0.5);
// Get the current semantic zoom exponent
let semanticZoomExponent = helios.semanticZoomExponent();
# shadedNodes(enableShadedNodes) → {Helios|this}
Enables or disables shaded nodes.
Parameters:
Name | Type | Description |
---|---|---|
enableShadedNodes |
boolean
|
Whether to enable shaded nodes. |
- The Helios instance for chaining, or the current value if no argument is provided.
Helios
|
this
Example
// Enable shaded nodes.
helios.shadedNodes(true);
# trackAttribute(trackerName, attribute) → {Helios|this}
Set the attribute to track.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
trackerName |
string
|
A tracker name so that it can be untracked later. | ||
attribute |
string
|
function
|
The attribute to track. If a string, it is the name of the attribute of the node to track (use "index" for index and "node" for the node itself). If a function, it is a function that takes a node and its index as arguments and returns the attribute to track. * @param {Object} options - The configuration object | ||
options.minProportion |
string
|
<optional> |
0.001 | The minimum proportion of the screen that a node must occupy to be tracked. |
options.smoothness |
string
|
<optional> |
0.8 | The smoothness of the tracking. The higher the value, the more the tracking is smoothed. |
options.maxLabels |
string
|
<optional> |
20 | The maximum number of labels to display. If -1, all labels are displayed. |
options.calculateCentroid |
string
|
<optional> |
false | If true, the centroid of the tracked nodes is calculated and expored as the 3rd and 4th (x and y) elements of the tracker results. |
options.onTrack |
function
|
<optional> |
null | A callback function that is called when a node is tracked. It takes the attribute entries and relative proportions as argument and the tracker (attributeProportions,tracker)=>{} |
- The Helios instance for chaining.
Helios
|
this
Examples
// Track the index of the nodes, with a minimum proportion of 0.001, a smoothness of 0.8 and a maximum of 10 labels.
helios.trackAttribute("indexTracker","index",{minProportion:0.001,smoothness:0.8,maxLabels:20});
// Track the community attribute of the nodes, with a minimum proportion of 0.001, a smoothness of 0.8 and a maximum of 20 labels.
helios.trackAttribute("communityTracker","community",{minProportion:0.001,smoothness:0.8,maxLabels:20});
# trackingNodeUpdateInterval(interval) → {Helios|this}
Set/get tracker node update interval.
Parameters:
Name | Type | Description |
---|---|---|
interval |
number
|
The interval in milliseconds. |
- The Helios instance for chaining, or the current interval if no argument is provided.
Helios
|
this
Examples
// Set the tracker node update interval to 200ms.
helios._trackingBufferUpdateInterval(200);
// Get the tracker node update interval.
let interval = helios._trackingBufferUpdateInterval();
console.log(interval);
# trackingUpdateInterval(interval) → {Helios|this}
Set/get tracker update interval
Parameters:
Name | Type | Description |
---|---|---|
interval |
number
|
The interval in milliseconds. |
- The Helios instance for chaining, or the current interval if no argument is provided.
Helios
|
this
Examples
// Set the tracker update interval to 33ms.
helios._trackingUpdateInterval(33);
// Get the tracker update interval.
let interval = helios._trackingUpdateInterval();
console.log(interval);
# triggerHoverEvents(event, shallCancel)
Forces triggering hover events based on the current mouse position.
Parameters:
Name | Type | Description |
---|---|---|
event |
Event
|
The MouseEvent object associated with the triggering event (e.g., mousemove, touchmove). |
shallCancel |
boolean
|
If true, the method returns immediately without triggering any events. |
Example
helios.triggerHoverEvents(event, false);
# untrackAttribute(attribute) → {Helios|this}
Untrack the attribute.
Parameters:
Name | Type | Description |
---|---|---|
attribute |
string
|
function
|
The attribute to untrack. If a string, it is the name of the attribute of the node to untrack (use "index" for index and "node" for the node itself). If a function, it is a function that takes a node and its index as arguments and returns the attribute to untrack. |
- The Helios instance for chaining.
Helios
|
this
Example
// Untrack the index of the nodes.
helios.untrackAttribute("indexTracker");
# update(immediateopt, nodesopt, edgesopt) → {this}
Will hint or force Helios to update the network geometry.
this method needs to be called after any changes to the network data
or visual properties.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
immediate |
boolean
|
<optional> |
false | If true, the update will be performed immediately, otherwise it will be scheduled. |
nodes |
boolean
|
<optional> |
true | If true, the node geometry will be updated. |
edges |
boolean
|
<optional> |
true | If true, the edge geometry will be updated. |
Returns this for chaining.
this
Examples
// Update the network geometry
helios.update();
// Update the network geometry immediately
helios.update(true);
# updateAttributeTrackers() → {Helios|this}
Pick a node at the given screen coordinates.
- The Helios instance (for chaining).
Helios
|
this
# updateDensityMap() → {this}
Updates the density map with the current node positions.
Returns the current Helios instance for chaining.
this
# updateEdgesGeometry(forceopt) → {this}
Updates the geometry and buffers used for rendering edges.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
force |
boolean
|
<optional> |
false | Forces the update of the geometry and buffers. |
Returns the current Helios instance for chaining.
this
# updateNodesGeometry() → {this}
Force update of Nodes Geometry.
Returns the current Helios instance for chaining.
this
# zoomFactor(zoomFactor, durationopt) → {this|number}
Set the zoom factor.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
zoomFactor |
number
|
The zoom factor. | |
duration |
number
|
<optional> |
The duration of the zoom animation in milliseconds. |
Returns this for chaining if zoomFactor is defined, otherwise returns the current zoom factor.
this
|
number
Examples
// Set the zoom factor to 0.5
helios.zoomFactor(0.5);
// Set the zoom factor to 0.5 with an animation duration of 500 milliseconds
helios.zoomFactor(0.5, 500);
// Get the current zoom factor
let zoomFactor = helios.zoomFactor();