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.

<script setup lang="ts">
const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}

const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}
</script>

<template>
  <v-network-graph :nodes="nodes" :edges="edges" />
</template>

Demo

Source

Node positions

The positional coordinates of each node can be specified.

<script setup lang="ts">
const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}
const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}
const layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
}
</script>

<template>
  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
  />
</template>

Demo

Source

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

<script setup lang="ts">
import { ref, computed } from "vue"

const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}
const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}
const layouts = ref({
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
})
const layoutsText = computed(() => {
  return JSON.stringify(layouts.value, null, 2)
})
</script>

<template>
  <v-network-graph
    v-model:layouts="layouts"
    :nodes="nodes"
    :edges="edges"
  />
  <pre class="layouts">{{ layoutsText }}</pre>
</template>

<style scoped>
.layouts {
  position: absolute;
  inset: auto 10px 10px auto;
  padding: 10px;
  background: #ffff0044;
  border-radius: 4px;
  font-size: 10px;
  line-height: 11px;
}
</style>

Demo

Source

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.

<script setup lang="ts">
import { ref } from "vue"
import * as vNG from "v-network-graph"

const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}
const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}
const layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
}
const configs = vNG.defineConfigs({
  view: {
    minZoomLevel: 0.1,
    maxZoomLevel: 16,
  },
})

const zoomLevel = ref(1)

// ref="graph"
const graph = ref<vNG.Instance>()
</script>

<template>
  <div class="demo-control-panel">
    <el-button @click="graph?.panToCenter()">To center</el-button>
    <el-button @click="graph?.fitToContents()">Fit</el-button>
    <el-button @click="graph?.zoomIn()">Zoom In</el-button>
    <el-button @click="graph?.zoomOut()">Zoom Out</el-button>
    <el-slider-custom-zoom v-model="zoomLevel" />
  </div>

  <v-network-graph
    ref="graph"
    v-model:zoom-level="zoomLevel"
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
    :configs="configs"
  />
</template>

Demo

Source

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:

value	description
"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
false	It 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.

<script setup lang="ts">
import { reactive, ref } from "vue"
import * as vNG from "v-network-graph"

const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}

const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}

const layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
}

const initialConfigs = vNG.defineConfigs({
  view: {
    autoPanAndZoomOnLoad: "center-content",
    fitContentMargin: "8%",
  },
})
const configs = reactive(initialConfigs)

const recreateCount = ref(0)
function recreate() {
  recreateCount.value++
}

function isFitContentSelected(configs: vNG.UserConfigs) {
  return configs.view?.autoPanAndZoomOnLoad === "fit-content"
}
</script>

<template>
  <div class="demo-control-panel" style="gap: 6px">
    <el-select v-model="configs.view.autoPanAndZoomOnLoad">
      <el-option label='"center-content"' value="center-content" />
      <el-option label='"fit-content"' value="fit-content" />
      <el-option label='"center-zero"' value="center-zero" />
      <el-option label="false" :value="false" />
    </el-select>
    <el-select
      v-if="isFitContentSelected(configs)"
      v-model="configs.view.fitContentMargin"
      style="width: 80px"
    >
      <el-option label="0" value="0" />
      <el-option label="8%" value="8%" />
      <el-option label="40px" value="40px" />
    </el-select>
    <el-button @click="recreate">Recreate</el-button>
  </div>

  <v-network-graph
    :key="recreateCount"
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
    :configs="configs"
  />
</template>

Demo

Source

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.

<script setup lang="ts">
import { reactive, ref } from "vue"
import * as vNG from "v-network-graph"

const nodes = ref({})
const edges = ref({})
const layouts = ref({ nodes: {} })

const sleep = (seconds: number) => new Promise(resolve => {
  setTimeout(resolve, seconds * 1000)
})

async function loadNetworkAsync() {
  // Emulate loading network information from a server.
  nodes.value = {}
  edges.value = {}
  layouts.value = { nodes: {} }

  await sleep(1)

  const network = {
    nodes: {
      node1: { name: "Node 1" },
      node2: { name: "Node 2" },
      node3: { name: "Node 3" },
      node4: { name: "Node 4" },
    },
    edges: {
      edge1: { source: "node1", target: "node2" },
      edge2: { source: "node2", target: "node3" },
      edge3: { source: "node3", target: "node4" },
    },
    layouts: {
      nodes: {
        node1: { x: 0, y: 0 },
        node2: { x: 50, y: 50 },
        node3: { x: 100, y: 0 },
        node4: { x: 150, y: 50 },
      },
    }
  }

  nodes.value = network.nodes
  edges.value = network.edges
  layouts.value = network.layouts
}

const initialConfigs = vNG.defineConfigs({
  view: {
    autoPanAndZoomOnLoad: "fit-content",
    onBeforeInitialDisplay: async () => {
      await loadNetworkAsync()
    },
    fitContentMargin: "20%",
  },
})
const configs = reactive(initialConfigs)

const recreateCount = ref(0)
function recreate() {
  // Recreate v-network-graph component
  recreateCount.value++
}
</script>

<template>
  <div class="demo-control-panel">
    <el-button @click="recreate">Recreate</el-button>
  </div>

  <v-network-graph
    :key="recreateCount"
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
    :configs="configs"
  />
</template>

Demo

Source

Disable mouse operations

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

<script setup lang="ts">
import { reactive } from "vue"
import * as vNG from "v-network-graph"

const nodes = {
  node1: { name: "Node 1" },
  node2: { name: "Node 2" },
  node3: { name: "Node 3" },
  node4: { name: "Node 4" },
}

const edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node2", target: "node3" },
  edge3: { source: "node3", target: "node4" },
}

const layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 50 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 50 },
  },
}

const configs = reactive(
  vNG.defineConfigs({
    view: {
      panEnabled: true,
      zoomEnabled: true,
    },
    node: {
      draggable: true,
    },
  })
)
</script>

<template>
  <div class="demo-control-panel">
    <el-checkbox v-model="configs.view.panEnabled">Pan enabled</el-checkbox>
    <el-checkbox v-model="configs.view.zoomEnabled">Zoom enabled</el-checkbox>
    <el-checkbox v-model="configs.node.draggable">Node draggable</el-checkbox>
  </div>

  <v-network-graph
    :nodes="nodes"
    :edges="edges"
    :layouts="layouts"
    :configs="configs"
  />
</template>

Demo

Source