Creates a new NVL instance.
The DOM element to display the graph in
An Array of nodes
An Array of relationships
Options for the NVL instance
Callbacks triggered on NVL events
Adds nodes and relationships to NVL and updates existing nodes and relationships.
An Array of nodes to be added or updated
An Array of relationships to be added or updated To update nodes or relationships, they must have an id that matches the id of the node or relationship to be updated. Only the properties that are provided will be updated. If an existing property is not provided, it will not be changed.
Adding and updating nodes and relationships
import { NVL } from '@neo4j-nvl/base'
const nvl = new NVL(document.getElementById('frame'), [{ id: '0' }], [])
const nodes = [
{ id: '1', label: 'Node 1', color: '#e04141' },
{ id: '2', label: 'Node 2', color: '#e09c41' }
]
const relationships = [
{ id: '12', from: '1', to: '2' }
]
// Adds new nodes and relationships
nvl.addAndUpdateElementsInGraph(nodes, relationships)
// Updates an existing relationship
nvl.addAndUpdateElementsInGraph([], [{ id: '12', color: '#e0df41' }])
Adds nodes and relationships in the current scene.
The nodes to be added.
The relationships to be added.
Updates pan and zoom fit the specified nodes in the viewport.
The ids of the nodes to fit on the screen,
Optional
zoomOptions: ZoomOptionsspecific options on how to transition the zoom
If the zoom level required to fit the provided nodes is outside of the range provided by the
NvlOptions.minZoom and NvlOptions.maxZoom options,
and NvlOptions.allowDynamicMinZoom is set to false
,
the zoom level will be set to the closest valid zoom level,
even if the given nodes do not fit the viewport yet.
Internal
Returns the current options.
The current options.
Gets the nodes and relationships that have been hit by a pointer event.
The mouse event.
The graph elements to check for hits. Defaults to ['node', 'relationship'].
Options for the hit test.
A NvlMouseEvent with the HitTargets property containing the nodes and relationships that have been hit by the pointer event.
const container = document.getElementById('frame')
const nvl = new NVL(container, [{ id: '0' }], [])
// Get the nodes and relationships that have been hit by a pointer event.
container?.addEventListener('click', (evt) => {
const { nvlTargets } = nvl.getHits(evt)
console.log('clicked elements:', nvlTargets)
})
Returns the nodes that are currently in the visualization.
The rels
property of the returned object is always empty.
An array of the nodes in the visualization.
Returns the node position that is currently stored in the visualisation for a given id.
The id of the node position that should be returned.
The position information for the given id, or undefined if there is no such node or the layout has not yet run with that node.
Returns the relationship data that is currently stored in the visualisation for a given id.
The id of the relationship that should be returned.
The relationship or undefined if there is no relationship with the given id.
Returns the relationships that are currently in the visualization.
An array of the relationships in the visualization.
Gets the currently selected relationships.
An array of all currently selected relationships.
Restarts the NVL instance.
new options for the NVL instance
whether or not to retain the current node positions New options will be merged with current options
Saves the entire graph visualization canvas as a png to the client.
The filename and background color of the png.
Optional
backgroundThe background color of the png file. The size of the png file will be as large as the entire graph at the default zoom level. Can result in a very large file.
Optional
filename?: stringThe filename of the png file.
Saves the current view of the graph visualization canvas as a png to the client.
The filename and background color of the png.
Optional
backgroundThe background color of the png file. The size of the png file will be the size of the canvas in the DOM.
Optional
filename?: stringThe filename of the png file.
Experimental
Restarts NVL with or without WebGL support.
Whether or not WebGL should be disabled. Not to be confused with setUseWebGLRenderer, which only affects the rendering method
Changes the layout type.
The layout type.
Updates the configuration of the current layout.
The layout configuration.
Sets the node positions based on data provided
The positions that the nodes should be set to.
whether or not the current layout algorithm should update the graph after setting the node positions. False by default.
Sets the zoom of the viewport to a specific value.
The desired panX value.
The desired panY value. When updating both the zoom level and pan coordinates, use setZoomAndPan instead of calling setZoom and setPan separately to avoid jittering.
Internal
Toggles between the WebGL and Canvas rendering.
Whether or not WebGL renderer should be used.
use setRenderer instead.
Sets the zoom of the viewport to a specific value.
The desired zoom level. When updating both the zoom level and pan coordinates, use setZoomAndPan instead of calling setZoom and setPan separately to avoid jittering. If the zoom level is outside of the range provided by the NvlOptions.minZoom and NvlOptions.maxZoom options, the zoom level will be set to the closest valid zoom level. If NvlOptions.allowDynamicMinZoom is set to true, the NvlOptions.minZoom option will be ignored of the current graph does not fit the viewport.
Sets the zoom and pan of the viewport to specific values.
The desired zoom level.
The desired panX value.
The desired panY value. When only updating the zoom level or pan coordinates, use setZoom or setPan instead. If the zoom level is outside of the range provided by the NvlOptions.minZoom and NvlOptions.maxZoom options, the zoom level will be set to the closest valid zoom level. If NvlOptions.allowDynamicMinZoom is set to true, the NvlOptions.minZoom option will be ignored of the current graph does not fit the viewport.
Updates relationships in the current scene with the provided array of nodes and relationships.
The updated nodes.
The updated relationships. Ignores any nodes or relationships that do not exist in the current scene. To update nodes or relationships, they must have an id that matches the id of the node or relationship to be updated. Only the properties that are provided will be updated. If an existing property is not provided, it will not be changed.
Updating nodes and relationships
import { NVL } from '@neo4j-nvl/base'
const nodes = [
{ id: '1', label: 'Node 1', color: '#e04141' },
{ id: '2', label: 'Node 2', color: '#e09c41' }
]
const relationships = [
{ id: '12', from: '1', to: '2' }
]
const nvl = new NVL(document.getElementById('frame'), nodes, relationships)
// Updates an existing node and relationship
nvl.updateElementsInGraph([{ id: '1', selected: true }], [{ id: '12', color: '#e0df41' }])
Class for a NVL instance.
Example
This is a basic setup for a NVL instance.