采用 HT 开发网络拓扑图非常容易，例如《入门手册》的第一个小例子麻雀虽小五脏俱全：http://www.hightopo.com/guide/guide/core/beginners/examples...而因为 HT 技术基于 HTML5，因此大部分工业控制 Web SCADA 客户都采用了 WebSocket 的实时通讯方式，关于 WebSocket 的使用可参考这篇文章：3D拓扑自动布局之Node.js...其实自动布局无法提供算法进行图元摆放，以便达到业务展示的需求，可参考《电信网络拓扑图自动布局 - 曲线布局》和《电信网络拓扑图自动布局 - 总线布局》，这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤，其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用，如果需要数据存储可参考《HT...，不收任何约束，可以随心所欲的设计你的网络拓扑图整体系统架构。
开发需求背景 今天领导派了一个小活，要求我将公司的物联网平台的网络拓扑图画出来。做一个数据展示的页面，集成到现有的iot平台上。 说到拓扑图，大家都也都比较清楚，能够清晰地表示网络链路的链接关系。...网络拓扑图是指由网络节点设备和通信介质构成的网络结构图。...一般的拓扑图都是这样子的 还有这一种 这些设计图都是架构师使用软件画出来的，数据都是固定的，不支持动态修改，没有动效，而我们需要支持动态添加网络节点。需要有动效。...先给大家看看，下面来详细讲解如何使用echarts一步一步完成这个拓扑图的。 技术调研 接到需求后我调研了几个物联网仪表盘后，我觉得使用echart来试试，因为d3太难了。...拓扑图中需要与几个实体，代表链路中的每一个设备，一个设备可能有进线，有出线，也有可能有多条线，线的条数都不能固定的。因为随着设备的增加，中央机器到达各个设备的线也是逐渐增加的。
[TOC] 0x00 快速入门 为什么要画拓扑图？ 答：拓扑图可以向用户或者他人表达我们的设计思想与理念,以及展示设计的特点/目的/功能。...对于我们系统规划人员来说无论是做网络规划/系统设计/网络管理，画拓扑图是一个最基本能力; 对于我们网络管理员来说,画拓扑图/排列图可以记录企业网络连接/设计/规划等一系列重要资料,为管理和后期排错，故障解决...，例行维护以及交接(与继任者)减轻负担 画拓扑图常常采用工具： Microsoft Visio：具有专业外观图表,以便理解/记录和分析信息数据/系统和过程; PowerPoint 如何画拓扑图？...Step1.先看单位画好的拓扑图进行模拟照画 Step2.到机房看看具体的机器设备与走线连接情况,为后面画出机房图做准备 Step3.找到单位已经规划/部署好的网络(相关文档),记录设备的位置/连接关系画拓扑图...Steo4.在自己的空闲时间从零开始画拓扑图,先从最小/最简单的网络画起,然后再逐渐壮大成一个大型网络; 画拓扑图的注意事项： 需要简单明了/间接 合理的用不同字号/颜色/颜色标注; 多个机柜进行分类如
简单说来就是：拓扑图是泛化的说法，电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等，简单说就是节点连线构成的这些都是这里指的拓扑图。...用 HT 开发一个网络拓扑图是非常容易的一件事，只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图： ? 这个例子非常基础，几乎完成了服务器与客户端在拓扑上的所有功能。...我还做了很多样式部分的设计，毕竟给大家看的例子不能太丑嘛~ 我们在最开始就说明一下，HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案， 其包含通用组件、拓扑组件和 3D 渲染引擎等丰富的图形界面开发类库...，用户只需要引入 ht.js 即可，而且跟别的任何东西完全不冲突，因为 HT 只是声明了一个全局变量 ht，仅此而已。...虚线的形成是搭建在连线之上的，步骤有 3 个： 引入 ht-dashflow.js 文件 ; 将连线的样式属性 edge.dash.flow 设置为 true； 在场景组件中打开虚线流动的开关，这里就是
前言 发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇，所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明，我写了一个...
具体说我一个月没有更新博客了，也没啥解释的了，都是我的问题，关于这个拓扑图实现过程中有什么问题，可以私信我，或者下面评论！看到了我都会回复的！
这个时候就需要使用到网络拓扑结构，使用不同拓扑结构的就会形成网络拓扑图，那么网络拓扑图是什么意思？网络拓扑图有哪些分类？下面小编就为大家来详细介绍一下。...image.png 一、网络拓扑图是什么意思？...所谓网络拓扑图就是网络节点和通信介质一起构成的网络结构图，其实通俗来说就是不同拓扑结构的展示效果图，网络拓扑图可以清晰地显示各种网络节点设备的位置，以及与其他设备连接在一起的通信介质，毕竟不同的网络拓扑结构连接方式都是一样的...，通过网络拓扑图可以清楚的看到不同结构的具体构成方式。...二、网络拓扑图有哪些分类？
逻辑与(&&)逻辑与本身没什么好讲的，但在JS中使用它编写的代码异常简约漂亮//什么真值假值，我就不解释了，直接上代码------------------------------------------
这两张图片展示的是设置graphView对应div的background属性来设置拓扑图背景，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景的位置和大小并没有发生改变...以下是具体的代码实现，代码很简单，通过gv.getView()来获取graphView拓扑图组件对应的div，再向div中设置background属性。...(f, rect){...})方法来绘制拓扑图组件的水印效果，左边的图片展示的是页面初始效果，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景和水印的位置和大小均发生了改变...，都跟随拓扑图的缩放和移动而改变。 ...，右边展示的是拓扑图通过缩小和拖拽图元位置后的效果，从效果上可以看出，拓扑图的背景和图元的位置和大小均发生了改变，都跟随拓扑图的缩放和移动而改变。
这篇文章写的案例就是总线拓扑中的一个分支，我们一步一步来搭建这个拓扑图形。 示例图片： ?...拓扑图形组件 ht.graph.GraphView (以下简称 GarphView)是 HT 框架中 2D功能最丰富的组件，其相关类库都在 ht.graph包下。 ...框架的组件指的是可视化可交互的视图控件，HT 框架基于 HTML5 技术，因此HT组件的可视化部分本质就是 HTML 的元素， 大部分 HT 组件与 DataModel 数据模型绑定，用户通过操作纯 js...HT 对 HTML5 技术封装的目的在于提高开发效率和可维护性，但并不意味着不允许用户直接操作 HTML 原生元素， 有 HTML5 开发经验的程序员，在了解 HT 系统机制的前提下，大可运用各种 HTML5...ht.Default.setImage('server', 'images/server.png') 进行注册，再将注册名称设置到模型上 server.setImage('server') 直接设置路径方式开发方便
先上个图片： using System; using System.Collections.Generic; using System.Linq; using...
“zabbix network map”可以简单的理解为动态网络拓扑图，可以针对业务来配置zabbix map，通过map可以了解应用的整体状况：服务器是否异常、网络是否有故障、应用当前什么状态。...如果你不需要这些东西，至少你可以通过network map绘制一张网络拓扑图。
这样看着好像不太明确到底拓扑图上的哪部分是树列表上的元素？...也顺便复习一下（这里只显示其中一个节点的代码）： var server = new ht.Node(); //服务器节点 graphView.dm().add(server); // 将服务器节点添加进拓扑图组件的数据容器中...我们会发现，拓扑图中的服务器节点以及客户端节点底部也多了 setName 设置的名称！...}else if(data instanceof ht.Edge){ //如果是 ht.Edge 类型的节点时 return edge_icon } } 选中树上的节点，拓扑图中的对应节点也会被选中...，反过来，选中拓扑图中的节点，树上的节点也会被选中。
这篇文章写的案例就是总线拓扑中的一个分支，我们一步一步来搭建这个拓扑图形。 示例图片： ?...拓扑图形组件介绍 拓扑图形组件 ht.graph.GraphView (以下简称 GarphView)是 HT 框架中 2D功能最丰富的组件，其相关类库都在 ht.graph包下。...框架的组件指的是可视化可交互的视图控件，HT 框架基于 HTML5 技术，因此HT组件的可视化部分本质就是 HTML 的元素， 大部分 HT 组件与 DataModel 数据模型绑定，用户通过操作纯 js...HT 对 HTML5 技术封装的目的在于提高开发效率和可维护性，但并不意味着不允许用户直接操作 HTML 原生元素， 有 HTML5 开发经验的程序员，在了解 HT 系统机制的前提下，大可运用各种 HTML5...ht.Default.setImage('server', 'images/server.png') 进行注册，再将注册名称设置到模型上 server.setImage('server') 直接设置路径方式开发方便
大脑网络的分层拓扑激发了旨在开发任何拓扑图学习方法的研究。一个流行的例子是装配演算[25, 26], 这是一种赫布学习方法, 可以执行与认知现象有关的不同操作。
画拓扑图的方式有很多，在线软件，Visio，PPT，都是方法。 问题是你要怎么从0到1，怎么样用拓扑图完美地把你的网络逻辑结构、思路呈现出来。 没经验的朋友真的不知道从哪里上手。...今天就给你来一篇绘制拓扑图详解，从一页白纸开始，教你怎么从0到1亲手绘制一张拓扑图。 01、什么是网络拓扑（Topology）？...02、拓扑图案例分析 01 Case1 上图用于描绘一个F5负载均衡器的典型双臂组网场景。由于此处是为了描述F5双臂组网的实现机制，因此拓扑呈三层架构：防火墙、核心层的交换机与F5、服务器。...03、拓扑图绘制步骤 以下是在PPT上绘制拓扑的大体步骤，当然，这只是个参考或建议： 1. 首先在纸上画个草稿，熟练之后，做到拓扑在心中 2....根据物理网络环境，结合客户业务逻辑结构，最终落地成逻辑的网络拓扑图，其实体现的是工程师对客户网络环境、网络需求、网络协议等的综合理解。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
