Lite Component

v-network-graph-lite (VNetworkGraphLite) is a lighter version of v-network-graph for networks with thousands of nodes and edges. It draws each node and edge as a single SVG element, and a node label as one more, so dragging, zooming and force layouts stay smooth with that many objects.

app.use(VNetworkGraph) registers it along with v-network-graph. It takes the same props except paths and selected-paths, and you can define its configs with vNG.defineLiteConfigs().

Differences from v-network-graph

• Supported: node shapes and their states (hover, selected), node labels, dragging, selection and hover of nodes and edges, edge markers and margins, multiple edges between the same nodes, self-loop edges, z-order, custom layers, the grid, box selection, the view methods and the SVG export.
• Not supported: paths, curved edges, summarized edges, edge labels, focus rings, label backgrounds, the slots override-node, override-node-label, edge-overlay, edge-label and edges-label, and transitionWhile().

If you pass one of the unsupported slots, the component ignores it and logs a warning to the console.

Draw a large network

The example below lays out 1000 nodes and about 1700 edges with a force layout. You can change the number of nodes up to 2000.

<script setup lang="ts">
import * as vNG from "v-network-graph"
import {
  ForceLayout,
  ForceNodeDatum,
  ForceEdgeDatum,
} from "v-network-graph/lib/force-layout"
import { reactive, ref, shallowRef, watch } from "vue"

const nodeCount = ref(1000)
const network = shallowRef(buildNetwork(nodeCount.value))

// A new network for a new count, leaving the graph being replaced as it is
watch(nodeCount, count => {
  if (count) network.value = buildNetwork(count)
})

const configs = reactive(
  vNG.defineLiteConfigs({
    view: {
      layoutHandler: new ForceLayout({
        positionFixedByDrag: false,
        createSimulation: (d3, nodes, edges) => {
          const forceLink = d3
            .forceLink<ForceNodeDatum, ForceEdgeDatum>(edges)
            .id(d => d.id)
          return d3
            .forceSimulation(nodes)
            .force("edge", forceLink.distance(15).strength(0.5))
            .force("charge", d3.forceManyBody().strength(-20))
            .force("center", d3.forceCenter().strength(0.05))
            .alphaMin(0.001)
        },
      }),
    },
    node: {
      normal: {
        radius: 2,
        color: "#4466cc",
      },
      label: {
        visible: false,
      },
    },
    edge: {
      normal: {
        width: 1,
        color: "#99999999",
      },
    },
  })
)

// A tree, with each node also linked to the next of its siblings
function buildNetwork(count: number) {
  const idNums = [...Array(count)].map((_, i) => i)

  // nodes
  const nodes: vNG.Nodes = Object.fromEntries(idNums.map(id => [`node${id}`, {}]))

  // edges
  const parentOf = (n: number) => Math.floor((n - 1) / 3)
  const makeEdgeEntry = (id1: number, id2: number) => {
    return [`edge${id1}-${id2}`, { source: `node${id1}`, target: `node${id2}` }]
  }
  const edges: vNG.Edges = Object.fromEntries([
    ...idNums.slice(1).map(n => makeEdgeEntry(parentOf(n), n)),
    ...idNums
      .slice(1, -1)
      .filter(n => parentOf(n) === parentOf(n + 1))
      .map(n => makeEdgeEntry(n, n + 1)),
  ])
  return { count, nodes, edges }
}
</script>

<template>
  <div class="demo-control-panel">
    <label>Node count:</label>
    <el-input-number v-model="nodeCount" :min="100" :max="2000" :step="100" />
    <label>(&lt;= 2000)</label>
  </div>

  <!-- Mounted again for a new network, so that the layout starts over -->
  <v-network-graph-lite
    :key="network.count"
    :zoom-level="0.2"
    :nodes="network.nodes"
    :edges="network.edges"
    :configs="configs"
  />
</template>

Demo

Source

While a force layout runs, the component draws the nodes first and updates the layouts prop up to view.layoutsUpdateInterval milliseconds later (300 by default). To get the positions as they are drawn, call getLayouts().