Skip to content

Basic Usage

Minimal example

With the default settings of just specifying node and edge data, you can pan, zoom in/out with the mouse wheel, and drag nodes. It also supports multi-touch, with the ability to move multiple nodes separately at the same time, and pinch to zoom.

Node positions

The positional coordinates of each node can be specified.

By specifying the layouts property as a two-way binding (v-model:layouts), you can get the position changes by dragging nodes reactively.

Pan and zoom

Using the methods provided by v-network-graph, it is possible to pan to the center and perform a zoom that fits the content. The current zoom level can be retrieved via two-way binding for zoom-level prop.

Pan and zoom when initial display

The behavior of pan and zoom in the initial layout can be changed with configs.view.autoPanAndZoomOnLoad.
The available options are as follows:

valuedescription
"center-content"(default)
Pan the specified network graph so that its center is at the center of the display area
"fit-content"Adjust the pan and zoom so that the specified network graph fits into the display area
"center-zero"Pan coordinates (0, 0) to the center of the display area
falseIt does not automatically pan or zoom, so the upper left corner of the display area is at coordinates (0, 0)

The configs.view.autoPanAndZoomOnLoad config takes effect on load, so if you change the select box, press the "Recreate" button to reconstruct the component.

Processing before initial display

If you want to do some processing before displaying the network graph, use the hook specified in configs.view.onBeforeInitialDisplay.
Asynchronous functions can also be specified as hooks. If you specify an asynchronous function, the display can be delayed until it completes.

The following is an example assuming asynchronous processing of network data from a server. After the data is applied by the process specified in configs.view.onBeforeInitialDisplay, the initial pan and zoom values specified in configs.view.autoPanAndZoomOnLoad are applied.

Disable mouse operations

Panning, zooming in/out with the mouse wheel, and dragging nodes can each be enabled/disabled.