我正在使用 vueJS 和 v-network-graph 库设计网络拓扑图。
有了这个,我可以实现下图。
我的要求是,在节点之间的每个链接我想显示图标,如下图所示。
有人可以帮助,我如何实现这一点?或者如果除了 v-network-graph 之外的任何其他库也可以检查。
谢谢你的答案。
我是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 = "";
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
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(17条)