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.

Disable mouse operations

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