问用VueJS设计网络拓扑图

EN

<!-- App.vue -->
<script setup lang="ts">
import { defineConfigs } from "v-network-graph";
import data from "./data";

const WIRELESS_ICON = "&#xe63e";

const configs = defineConfigs({
  node: {
    selectable: true,
  },
});
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  >
    <!-- Use CSS to define references to external fonts.
         To use CSS within SVG, use <defs>. -->
    <defs>
      <!-- Cannot use <style> directly due to restrictions of Vue. -->
      <!-- eslint-disable-next-line vue/require-component-is -->
      <component is="style">
        <!-- eslint-disable prettier/prettier -->
        @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src:
        url(https://fonts.gstatic.com/s/materialicons/v97/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
        format('woff2'); }
        .edge-icon { pointer-events: none; }
        <!-- eslint-enable -->
      </component>
    </defs>
    <template #edge-overlay="{ edge, scale, length, pointAtLength }">
      <!-- source side -->
      <g v-if="edge.isSourceWireless" class="edge-icon">
        <!-- pointAtLength():Calculate the coordinates advanced
             the specified length from the source side. -->
        <circle
          :cx="pointAtLength(30 * scale).x"
          :cy="pointAtLength(30 * scale).y"
          :r="10 * scale"
          stroke="#444"
          :stroke-width="1 * scale"
          fill="#fff"
        />
        <text
          v-bind="pointAtLength(30 * scale)"
          font-family="Material Icons"
          text-anchor="middle"
          dominant-baseline="central"
          :font-size="16 * scale"
          v-html="WIRELESS_ICON"
        />
      </g>
      <!-- target side -->
      <g v-if="edge.isTargetWireless" class="edge-icon">
        <!-- length: The total length of the edge. -->
        <circle
          :cx="pointAtLength(length - 30 * scale).x"
          :cy="pointAtLength(length - 30 * scale).y"
          :r="10 * scale"
          stroke="#444"
          :stroke-width="1 * scale"
          fill="#fff"
        />
        <text
          v-bind="pointAtLength(length - 30 * scale)"
          font-family="Material Icons"
          text-anchor="middle"
          dominant-baseline="central"
          :font-size="16 * scale"
          v-html="WIRELESS_ICON"
        />
      </g>
    </template>
  </v-network-graph>
</template>

// data.ts
import { Nodes, Edges, Layouts } from "v-network-graph";

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
  node4: { name: "N4" },
  node5: { name: "N5" },
  node6: { name: "N6" },
};

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

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

export default {
  nodes,
  edges,
  layouts,
};