Labels

Node labels

For node labels, it is possible to show/hide them, specify the data to be displayed as labels, and change the display position.

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

const initialConfigs = vNG.defineConfigs({
  node: {
    label: {
      visible: true,
      fontFamily: undefined,
      fontSize: 11,
      lineHeight: 1.1,
      color: "#000000",
      margin: 4,
      direction: "south",
      text: "name",
    },
  },
})
const configs = reactive(initialConfigs)
</script>

<template>
  <div class="demo-control-panel">
    <el-tabs type="border-card">
      <el-tab-pane label="Content">
        <div class="control">
          <label>Field to show on the label:</label>
          <el-select v-model="configs.node.label.text">
            <el-option label="id" value="id" />
            <el-option label="name" value="name" />
            <el-option label="type" value="type" />
          </el-select>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Appearance">
        <demo-label-config-panel
          v-model:visible="configs.node.label.visible"
          v-model:fontFamily="configs.node.label.fontFamily"
          v-model:fontSize="configs.node.label.fontSize"
          v-model:lineHeight="configs.node.label.lineHeight"
          v-model:color="configs.node.label.color"
          v-model:margin="configs.node.label.margin"
          v-model:direction="configs.node.label.direction"
        />
      </el-tab-pane>
    </el-tabs>
  </div>

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

import { Nodes, Edges, Layouts } from "v-network-graph"

const nodes: Nodes = {
  node1: { id: "node1", name: "Node 1", type: "Type A" },
  node2: { id: "node2", name: "Node 2", type: "Type B" },
  node3: { id: "node3", name: "Node 3", type: "Type A" },
  node4: { id: "node4", name: "Node 4\nMultiline", type: "Type C\nMultiline" },
  node5: { id: "node5", name: "Node 5\nMultiline", type: "Type D\nMultiline" },
}

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

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 80, y: 80 },
    node3: { x: 160, y: 0 },
    node4: { x: 240, y: 80 },
    node5: { x: 320, y: 0 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

TIP

In the above example, the key in the node object is specified as configs.node.text. Instead of a key, you can also specify a function that returns a string with the node object as an argument ((node) => string). If so, the return value of the executed function will be displayed as a label.

Override node labels

It is possible to replace an element with an override-node-label slot.
In the following example, two labels are displayed per node.

<script setup lang="ts">
import data from "./data"
</script>

<template>
  <v-network-graph :nodes="data.nodes" :edges="data.edges" :layouts="data.layouts">
    <template
      #override-node-label="{
        nodeId, scale, text, x, y, config, textAnchor, dominantBaseline
      }"
    >
      <text
        x="0"
        y="0"
        :font-size="9 * scale"
        text-anchor="middle"
        dominant-baseline="central"
        fill="#ffffff"
      >{{ nodeId }}</text>
      <text
        x="0"
        y="0"
        :font-size="config.fontSize * scale"
        :text-anchor="textAnchor"
        :dominant-baseline="dominantBaseline"
        :fill="config.color"
        :transform="`translate(${x} ${y})`"
      >{{ text }}</text>
    </template>
  </v-network-graph>
</template>

import { Nodes, Edges, Layouts } from "v-network-graph"

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

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

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 80, y: 80 },
    node3: { x: 160, y: 0 },
    node4: { x: 240, y: 80 },
    node5: { x: 320, y: 0 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

The props provided by the override-node-label slot are as follows:

props	type	description
nodeId	string	node Id
scale	number	scale factor linked to zoom
text	string	label text
x	number	x position
y	number	y position
config	NodeLabelStyle	style config for labels
shape	CircleShapeStyle / RectangleShapeStyle	shape config of node
textAnchor	"middle" / "start" / "end"	text-anchor for SVG <text>
dominantBaseline	"central" / "text-top" / "hanging"	dominant-baseline for SVG <text>

See here for custom types

Automatic adjustment position

Depending on the positional relationship of the nodes, labels may overlap with edges and become difficult to read. For such cases, it is possible to automatically adjust the position of the label display according to the positional relationship of the nodes.

If configs.node.label.directionAutoAdjustment is set to true, the node label will try to avoid overlapping with edges. If it is determined that the edge overlaps at any position, it will be displayed at the position specified in configs.node.label.direction.

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

const initialConfigs = vNG.defineConfigs({
  node: {
    label: {
      visible: true,
      direction: "south",
      directionAutoAdjustment: true,
    },
  },
})
const configs = reactive(initialConfigs)
</script>

<template>
  <div class="demo-control-panel">
    <el-checkbox v-model="configs.node.label.directionAutoAdjustment">Enable auto adjustment</el-checkbox>
  </div>

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

import { Nodes, Edges, Layouts } from "v-network-graph"

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

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

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

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

TIP

The default implementation determines the display position by determining the possibility of overlap between the edge to which its own node is connected and own node label. It does not determine if the label overlaps with edges between other nodes to which the node is not connected.

To specify the display position of a label in a different way from the default, specify a function that implemented the ideal processing in the configs.node.label.directionAutoAdjustment.

This function is executed for each node, and the arguments and return value are as follows.

Arguments:

{
    nodeId: string;
    pos: { x: number, y: number};
    oppositeNodes: {
      [edgeId]: {
        nodeId: string,
        pos: { x: number, y: number}
      }
    };
}

Return value:

"center" | "north" | "north-east" | "east"
| "south-east" | "south" | "south-west" | "west" | "north-west"
| null

Edge labels

For edge labels, use slots similar to custom labels for nodes.

<script setup lang="ts">
import data from "./data"
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="data.configs"
  >
    <template #edge-label="{ edge, ...slotProps }">
      <v-edge-label :text="edge.label" align="center" vertical-align="above" v-bind="slotProps" />
    </template>
  </v-network-graph>
</template>

import { Nodes, Edges, Layouts, defineConfigs } from "v-network-graph"

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

const edges: Edges = {
  edge1: { source: "node1", target: "node2", label: "1 Gbps" },
  edge2: { source: "node2", target: "node3", label: "100 Mbps" },
  edge3: { source: "node2", target: "node4", label: "100 Mbps" },
}

const configs = defineConfigs({
  node: {
    label: {
      visible: false,
    },
  },
})

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 80 },
    node2: { x: 200, y: 80 },
    node3: { x: 360, y: 0 },
    node4: { x: 360, y: 160 },
  },
}

export default {
  nodes,
  edges,
  configs,
  layouts,
}

Demo

Source

Data

The props provided by the edge-label slot are as follows:

props	type	description
edgeId	string	edge Id
edge	Edge	user defined edge object
config	EdgeLabelStyle	style config for edge labels
area	{source: {above: 0, below: 0}, target: {above: 0, below: 0} }	coordinates of the area to display labels
hovered	boolean	whether hovered or not
selected	boolean	whether selected or not

See here for custom types

You can draw the elements as you want using the properties provided by the slot, but you can use <v-edge-label> to automatically calculate the display position and rotation.
Supported attributes are listed below.

props / attrs	type	description
area	(same as edge-label slot)	coordinates of the area to display labels
config	EdgeLabelStyle	style config for edge labels
text	string	text to display
align	"center" / "source" / "target"	horizontal direction to align text
vertical-align	"center" / "above" / "below"	vertical direction to align text
(other)	any	pass through to <text> element

INFO

Of the props provided in the edge-label slot, edgeId and edge are not required for <v-edge-label>. Other props should always be passed on to <v-edge-label> by using v-bind or by specifying them directly.

Multiple edge labels

In many cases, the labels of an edge not only indicate the edge itself, but also the result of the interaction of the nodes connected to the edge.
In the following example, we show three labels per edge. One displays the ID of the edge, and two display the ever-changing data at both ends of the edge.
The data being displayed is a random number.

<script setup lang="ts">
import { reactive, onMounted, onUnmounted } from "vue"
import data from "./data"

type TrafficData = Record<string, Record<string, number>>

const traffics = reactive<TrafficData>({
  node1: { node2: 0 },
  node2: { node1: 0, node3: 0, node4: 0 },
  node3: { node2: 0, node4: 0 },
  node4: { node2: 0, node3: 0 },
})

let timerId: any = null
onMounted(() => {
  // generate random numbers
  timerId = setInterval(() => {
    for (const t of Object.values(traffics)) {
      for (const key of Object.keys(t)) {
        t[key] = Math.round(Math.random() * 1000)
      }
    }
  }, 1000)
})

onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId)
  }
})
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="data.configs"
  >
    <template #edge-label="{ edgeId, edge, scale, ...slotProps }">
      <v-edge-label
        :text="edgeId"
        align="center"
        vertical-align="below"
        v-bind="slotProps"
      />
      <v-edge-label
        :text="`${traffics[edge.source][edge.target]} k`"
        align="source"
        vertical-align="above"
        v-bind="slotProps"
        fill="#ff5500"
        :font-size="12 * scale"
      />
      <v-edge-label
        :text="`${traffics[edge.target][edge.source]} k`"
        align="target"
        vertical-align="above"
        v-bind="slotProps"
        fill="#ff5500"
        :font-size="12 * scale"
      />
    </template>
  </v-network-graph>
</template>

import { Nodes, Edges, Layouts, defineConfigs } from "v-network-graph"

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

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

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 80 },
    node2: { x: 200, y: 80 },
    node3: { x: 360, y: 0 },
    node4: { x: 360, y: 160 },
  },
}

const configs = defineConfigs({
  node: {
    label: {
      visible: true,
    },
  },
})

export default {
  nodes,
  edges,
  layouts,
  configs,
}

Demo

Source

Data

Customize the edge label style

If you use <v-edge-label> component, the labels of edges can be customized from the config like the node labels.

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

const verticalAlign = ref("above")

const configs = reactive(
  vNG.defineConfigs({
    node: {
      label: {
        visible: false,
      },
    },
    edge: {
      label: {
        fontFamily: undefined,
        fontSize: 11,
        lineHeight: 1.1,
        color: "#000000",
        margin: 4,
        background: {
          visible: true,
          color: "#ffffff",
          padding: {
            vertical: 1,
            horizontal: 4,
          },
          borderRadius: 2,
        },
      },
    },
  })
)
</script>

<template>
  <div class="demo-control-panel">
    <el-tabs type="border-card">
      <el-tab-pane label="Label">
        <demo-label-config-panel
          v-model:fontFamily="configs.edge.label.fontFamily"
          v-model:fontSize="configs.edge.label.fontSize"
          v-model:color="configs.edge.label.color"
          v-model:margin="configs.edge.label.margin"
          v-model:location="verticalAlign"
        />
      </el-tab-pane>
      <el-tab-pane label="Background">
        <demo-label-background-config-panel
          v-model:visible="configs.edge.label.background.visible"
          v-model:paddingVertical="configs.edge.label.background.padding.vertical"
          v-model:paddingHorizontal="configs.edge.label.background.padding.horizontal"
          v-model:color="configs.edge.label.background.color"
          v-model:borderRadius="configs.edge.label.background.borderRadius"
        />
      </el-tab-pane>
    </el-tabs>
  </div>

  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  >
    <template #edge-label="{ edge, ...slotProps }">
      <v-edge-label
        :text="edge.label"
        align="center"
        :vertical-align="verticalAlign"
        v-bind="slotProps"
      />
    </template>
  </v-network-graph>
</template>

import { Nodes, Edges, Layouts } from "v-network-graph"

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

const edges: Edges = {
  edge1: { source: "node1", target: "node2", label: "1 Gbps" },
  edge2: { source: "node2", target: "node3", label: "100 Mbps" },
  edge3: { source: "node2", target: "node4", label: "100 Mbps" },
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 80 },
    node2: { x: 200, y: 80 },
    node3: { x: 360, y: 0 },
    node4: { x: 360, y: 160 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

Modify the style of edge labels when hovering/selecting edges

The edge-label slot prop contains a flag to get the edge selection/hover state. This can be combined with the style of the edge-label.

<script setup lang="ts">
import * as vNG from "v-network-graph"
import data from "./data"

const configs = vNG.defineConfigs({
  node: {
    label: {
      visible: false,
    },
  },
  edge: {
    selectable: true,
    hoverable: true,
    label: {
      fontSize: 11,
      color: "#000000",
    },
  },
})
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  >
    <template #edge-label="{ edge, hovered, selected, ...slotProps }">
      <v-edge-label
        :class="{ hovered, selected }"
        :text="edge.label"
        align="center"
        vertical-align="above"
        v-bind="slotProps"
      />
    </template>
  </v-network-graph>
</template>

<style lang="css">
/* In some cases, :deep() selector may be necessary. */
.v-ng-edge-label {
  transition: fill 0.1s;
}
.v-ng-edge-label.hovered {
  fill: #3355bb;
  font-weight: bold;
}
.v-ng-edge-label.selected {
  fill: #dd8800;
  font-weight: bold;
}
</style>

import { Nodes, Edges, Layouts } from "v-network-graph"

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

const edges: Edges = {
  edge1: { source: "node1", target: "node2", label: "1 Gbps" },
  edge2: { source: "node2", target: "node3", label: "100 Mbps" },
  edge3: { source: "node2", target: "node4", label: "100 Mbps" },
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 80 },
    node2: { x: 200, y: 80 },
    node3: { x: 360, y: 0 },
    node4: { x: 360, y: 160 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Demo

Source

Data

Summarized edge labels

Labels for summarized edges use a different slot than for normal edges.

<script setup lang="ts">
import { Edge } from "v-network-graph"
import data from "./data"

function summarizedEdgeLabel(edges: Record<string, Edge>) {
  const edgeList = Object.values(edges)
  return `${edgeList[0].label}~${edgeList[edgeList.length - 1].label}`
}
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="data.configs"
  >
    <!-- The slot for individual edge labels -->
    <template #edge-label="{ edge, ...slotProps }">
      <v-edge-label
        :text="edge.label"
        align="center"
        vertical-align="above"
        v-bind="slotProps"
      />
    </template>
    <!-- The slot for summarized edge labels -->
    <template #edges-label="{ edges, ...slotProps }">
      <v-edge-label
        :text="summarizedEdgeLabel(edges)"
        align="center"
        vertical-align="above"
        v-bind="slotProps"
      />
    </template>
  </v-network-graph>
</template>

import { Nodes, Edges, Layouts, defineConfigs } from "v-network-graph"

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

const edges: Edges = {
  edge1: { source: "node1", target: "node2", label: "edge 1" },
  edge2: { source: "node2", target: "node3", label: "edge 2" },
  edge3: { source: "node2", target: "node3", label: "edge 3" },
  edge4: { source: "node2", target: "node3", label: "edge 4" },
  edge5: { source: "node2", target: "node3", label: "edge 5" },
  edge6: { source: "node2", target: "node3", label: "edge 6" },
  edge7: { source: "node2", target: "node3", label: "edge 7" },
  edge8: { source: "node2", target: "node3", label: "edge 8" },
  edge9: { source: "node2", target: "node3", label: "edge 9" },
  edge10: { source: "node2", target: "node4", label: "edge 10" },
}

const configs = defineConfigs({
  node: {
    label: {
      visible: false,
    },
  },
})

const layouts: Layouts = {
  nodes: {
    node1: { x: 0, y: 80 },
    node2: { x: 200, y: 80 },
    node3: { x: 360, y: 0 },
    node4: { x: 360, y: 160 },
  },
}

export default {
  nodes,
  edges,
  configs,
  layouts,
}

Demo

Source

Data