服务器拓扑图:使用 VueJS设计网络拓扑图(topology graph)

关于服务器拓扑图的问题,在topology graph中经常遇到, 我正在使用 vueJS 和 v-network-graph 库设计网络拓扑图。

我正在使用 vueJS 和 v-network-graph 库设计网络拓扑图。

有了这个,我可以实现下图。

Network graph

我的要求是,在节点之间的每个链接我想显示图标,如下图所示。

Expected Graph

有人可以帮助,我如何实现这一点?或者如果除了 v-network-graph 之外的任何其他库也可以检查。

谢谢你的答案。

1

我是v-network-graph的作者。
在边缘上覆盖任何对象都可以通过使用v-network-graph"edge-overlay"插槽来实现,这是 v0.6.1 中实现的功能,因此需要 v0.6.1 或更高版本。

提供一个示例。

<!-- 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,
};

Here是上述代码的显示图像。

请注意,如果您需要"edge-overlay"插槽的其他示例,可以在 v-network-graph 的“示例”站点的以下页面上找到。
https://dash14.github.io/v-network-graph/examples/appearance.html#place-any-object-on-the-edge

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(769)
怎样使pdf文件变小:Matplotlib使刻度标签字体变小
上一篇
Creo五边面:创建 CSS五边形形状(pentagon shap)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(17条)