。

这种结构不仅涉及物理布局#xff0c;即物理拓扑#xff0c;还可以涉及逻辑或虚拟的连接方式#…

拓扑结构在计算机网络设计和通信领域中非常重要因为它描述了网络中的设备即“点”如何相互连接即通过“线”。

这种结构不仅涉及物理布局即物理拓扑还可以涉及逻辑或虚拟的连接方式即逻辑拓扑。

图扑软件自研

产品曾参与搭建了众多拓扑可视化解决方案。

如机房通信拓扑可视化实现通过图形图像直观展示机房内部网络设备、服务器、存储设备以及之间连接关系的技术。

帮助

管理员和网络工程师更加直观地理解机房的网络结构便于故障排查、网络优化和规划扩展。

中ht.Node

上可显示图片图标这使得创建拓扑图时能够直观地表示每一个“点”的特征。

至于拓扑图中的“线”即用于体现两个节点之间关系的元素可由

ht.Edge

类型承担这一任务。

ht.Edge用于连接起始和目标两个节点两个节点间可以有多条ht.Edge存在也允许起始和目标为同一节点。

在搭建

中dm.setBackground(rgb(240,237,237));

设置背景

dm.setHierarchicalRendering(true);

const

createNode(symbols/电信/icon_交换机.json,

交换机);const

createNode(symbols/电信/icon_路由.json,

300,

中创建节点并将它们通过连线相连。

实际应用中的情形往往更为复杂需要根据实际数据构建拓扑结构。

在这个过程中核心步骤依旧是首先创建

ht.Node

实例来实现节点之间的连接。

接下来让我们通过复杂一些的示例来演示。

创建节点

为了批量创建节点并方便管理节点数据示例中定义了结构化的数据格式并将数据存储在一个

JSON

symbols/user/900-word/电信拓扑图标/icon_核心交换机.json,

icon//

symbols/user/900-word/电信拓扑图标/icon_核心交换机.json,

position:

symbols/user/900-word/电信拓扑图标/空白服务器.json,

position:

ht.Default.xhrLoad(./equipment.json,

function

文件中定义了连线中最重要的几个因素起始节点、目标节点、连线颜色。

source:

ht.Default.xhrLoad(./connectData.json,

function

rgba(0,0,0,0.18),})dm.add(edge);

dm.moveToTop(edge);

到这里基本上整个拓扑的效果都已经展示出来了但是可能还存在一些问题。

如终端路由之间的连线被服务器挡住了可能会被认为是路由

1—服务器

在这个示例内两个路由之间的连线需要跨域多个其他的连线为了使得连线更加美观易懂于是我就这条连线采用了

points

的连线方式这种方式有极高的灵活性可在连线路径上自由地添加控制点从而实现非常多样化的效果。

points

]});ht.Default.setImage(fromArrow,

width:

[fromArrow]});edge.addStyleIcon(toArrow,

position:

连线添加流动动画效果。

这种效果可用于表示数据传输、能源流动或任何类型的动态连接。

使用

ht-flow.js

flow.element.shadow.begincolor:

rgba(255,

flow.element.shadow.visible流动阴影是否可见。

flow.element.autorotate是否自动朝向根据连线的角度自动朝向。

ht.Edge

flow.element.shadow.begincolor:

rgba(240,

属性该属性支持将流动的元素设置为图片或图标还支持设置为多个图片/图标流动的效果。

在流动上设置图标需要先注册图标

]})ht.Default.setImage(dataIcon2,

width:

直观性将抽象的关系和数据通过图形呈现使得人们可以直观地理解和分析系统或网络的结构。

互动性现代拓扑可视化工具通常支持用户与图形的交互操作如缩放、拖拽节点、探索节点之间的路径等进一步提升了分析的深度和广度。

动态性能够实时反映系统或网络的变化及时展现新增元素和调整后的结构关系对于监控和管理系统状态尤为重要。

灵活性用户可以根据需要选择不同的布局算法调整图形的展示方式更好地适应不同的分析场景。