HT for Web 轻松构建组态拓扑结构

news2024/11/15 8:50:19

在现代的数据可视化和网络管理中,拓扑图是一种非常重要的工具。它可以直观地展示节点(Node)和节点之间的关系(Edge)。无论是在 2D 还是 3D 环境中,拓扑图都可以帮助我们更好地理解和管理复杂的系统。

然而,由于这些拓扑图通常极为复杂,传统的手动布局方式不仅繁琐且耗时。鉴于此,图扑软件自研 HT for Web 产品(以下简称为 HT)推出了自动布局、弹力布局插件,从根本上解决了这一问题。

这些案例不仅限于 2D 和 3D 拓扑图,还涉及到 GIS 场景的应用,展示了广泛的应用场景和强大的功能。

自动布局在 2D 中的运用

图扑软件 HT 自动布局插件总共有七种布局方式:圆形布局、对称布局、层次布局、朝北布局、朝南布局、朝东布局和朝西布局。

在拓扑图的制作过程中,我们会使用自动布局来进行初始布局操作。然而,自动布局并非万能良药,无法在所有情况下都完全达到我们的预期效果。因此,通常在自动布局之后,我们也会对图纸进行一些手动微调,以达到优质的展示效果。

以上图示例为例,图内拓扑是从左到右布局的效果。尽管节点之间呈简单的树形层次关系,但节点位置错落不齐,并且需要使用多种类型的连线,所以单纯使用自动布局达不到预期的效果。接下来简单介绍一下这个 demo 的实现步骤:

1.在图纸上创建好节点并设定节点之间的连线关系后,我们可以使用自动布局来进行初始布局操作。在示例中,我们希望展示一个从左到右的布局,这时可以使用自动布局工具中的朝东布局(towardeast)来实现这一效果。设置自动布局的相关代码:

let autoLayout = new ht.layout.AutoLayout(view, {
gap: 30
});
layout(false);
function layout(animate) {
autoLayout.setAnimate(animate);
autoLayout.layout('towardeast', function () {
view.fitContent(animate);
});
}

朝东布局(towardeast)仅适用于树形层次结构。如果图纸中存在非树形层次结构的连线,在初始布局时可以先不进行连线操作,待自动布局完成后再创建相应的连线。

2.手动调整节点的位置:在获取到节点后,通过 node.setPosition ({x: 100, y: 100}) 方法重新设置其位置。最终可以得到如下的效果图:

3.经过步骤 2 后,整体拓扑仍显杂乱。此时,可以根据节点的位置等因素,调整连线的类型、间距和锚点等属性。同时,还可以修改连线的颜色和宽度等样式属性,以实现理想效果。调整完成后的效果如下:

4.最后再加上一些文本内容,一个完整的拓扑图就完成了。

自动布局在 3D 中的运用

随着 OpenGL 和 WebGL 等图形技术的发展,3D 视觉表达方式越来越受到重视。拓扑图的呈现方式也从传统的 2D 展示逐渐转向更立体和动态的 3D 展现。图扑 HT 的自动布局功能不仅在 2D 中广泛应用,在 3D 中也同样适用。

无论是在 2D 还是 3D 环境中,自动布局的使用方式都是一致的。在 3D 环境中,自动布局实际上设置的是 3D 坐标中的 xz 平面。对于 3D 场景中独有的的 y 轴,则需要通过 node.setElevation(elevation) 方法来进行设置。

只设置了自动布局产生的效果如下:

根据层级设置不同 y 轴坐标产生的效果:

弹力布局

弹力布局又称之为导向布局,根据节点之间的斥力、相互连接的节点之间存在在引力运行,并且会逐渐达到收敛稳定的平衡状态。弹力布局具有指向性,通常用于标识物与物、人与人之间的关系,这种布局方式特别有助于表达元素之间的关联性和依赖性,使用户直观地观察到各个元素之间的交互和联系。

接下来用一个示例来演示弹力布局的实现过程,示例效果如下:

在图纸上创建好节点并设置好节点间的连线关系后,就可添加弹力布局相关代码。在实例化 ht.layout.ForceLayout 时,可以传入 DataModel 、GraphView 和 Graph3dView 三种参数。默认仅对未选中图元进行布局,如果参数为 GraphView 和 Graph3dView 时,则视图组件的 isMovable 和 isVisible 函数将影响图元是否可布局,图元 style 上的 layoutable 属性也可设为 false 阻止图元参与布局。

const forceLayout = new ht.layout.ForceLayout(view);
forceLayout.start(); // 启动弹力布局
forceLayout.setNodeRepulsion(0.7) // 设置节点间斥力,值越大节点间斥力越大,节点布局越分散。
forceLayout.setEdgeRepulsion(0.7) // 设置节点间斥力,值越大连线节点间斥力越大,连线节点布局越分散。
view.setZoom(0.38); // 设置图纸缩放值

在 3D 中也可使用 ht.layout.Force3dLayout 类来设置弹力布局,具体设置方式同 ht.layout.ForceLayout。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1966577.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JAVA(多线程)day 7.31

ok了家人们今天学习多线程, 一.多线程相关概念 1.1 并行与并发 并行:在同一时刻,有多个任务在多个 CPU 上同时执行。 并发:在同一时刻,有多个任务在单个 CPU 上交替执行。 1.2 多线程 cpu同时执行多个程序。 好处…

Mix、Lab是一种生活状态#Mixlab夏日T恤

shadow:这款怎么样? 混合实验家 千*然 15:53: " 夸夸,帅爆 logo很有细胞活力啊! 再开个白款,夏天凉快!大T,冲! ” shadow: 往常都是孵化社区成员的项目&#xff0c…

非线性面板数据实证模型及 Stata 具体操作步骤

目录 一、引言 二、文献综述 三、理论原理 四、实证模型 五、稳健性检验 六、程序代码及解释 一、引言 在当今的经济和社会研究中,非线性面板数据模型的应用日益广泛。这类模型能够更好地捕捉数据中的复杂关系,为研究者提供更深入和准确的分析结果。…

json-server(快速搭建本地 RESTful API 的工具)

json-server 是什么? Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源,并提供了一组简单的路由和端点,可以模拟后端服务器的行为。 github地址:GitHub - typicode/json-server: Get a full fake REST API with zero coding in less…

VS code-解决云服务器重装镜像后vs code无法连接的问题

问题描述:从centos换到ubantu后,xshell能直接连接上(没有更改ssh配置信息),但是vscode连不上(配置文件因为端口号和ip是一样的,也没法改) 解决办法: 找到vs code config…

从DevOps到DevSecOps是怎样之中转变?

DevSecOps是DevOps实践的自然演进,其重点是将安全集成到软件开发和部署流程中。在DevOps和DevSecOps发展之前,企业通常在在软件部署前进行集中的安全测试,导致安全介入严重滞后,漏洞分风险无法及时修复,影响上线交付。…

MGTR-250M 以电折水设备-助力取水计量监测体系建设

一体式以电折水智能终端通过高度集成化设计,巧妙融合了空气开关、开关电源、隔离变压器、接触器、智能电表、RTU、4G通信模块、定位模块等八大核心功能,不仅展现了经济高效和智能运维的双重优势,更以其超强的安全防护能力确保了使用的高度安全…

CV相关知识

在计算机科学和人工智能领域,"CV" 通常指的是 "Computer Vision"(计算机视觉)。计算机视觉是研究如何使计算机能够从图像或视频中获取、处理和理解视觉信息的科学和技术。计算机视觉的目标是使计算机能够自动执行人类视觉…

干净清爽的网页给用户浏览体验的重要性!此刻便展现了出来

干净清爽的网页给用户浏览体验的重要性 艾斯视觉作为ui设计和前端开发从业者,其观点始终认为:网页已成为信息传播和交流的重要平台。一个干净清爽的网页设计不仅能够吸引用户的眼球,更能提升用户的浏览体验,从而在激烈的网络竞争…

完整模型训练套路 试写 以CIFAR10分类数据集为例

思路步骤: 第一步准备数据集:(训练集,测试集) import torchvisionTrain_dataset torchvision.datasets.CIFAR10("./data",True,transformtorchvision.transforms.ToTensor()) Test_Dataset torchvision…

小程序记账系统2024

小程序记账系统2024,编号weixin002 下载在最后 技术栈: 前台:js 后台:java 展示: 下载地址: CSDN现在上传有问题,有兴趣的朋友先收藏.正常了贴上下载地址 备注:

十二星座男、被戴绿帽后有啥反应 。

白羊座——火爆型 金牛座——沉默型 双子座——智慧型 巨蟹座——自毁型 狮子座——暴力型 处女座——喊包型 天秤座——潇洒型 天蝎座——有仇必报型 射手座——气过就算型 摩羯座——冷傲型 双鱼座——大方伟大型 水瓶座——飘忽型

Shell脚本的进程管理

进程管理是系统管理的重要方面,通过对进程的监控、启动、停止和重启,可以保证系统的稳定运行。Shell脚本是一种强大的工具,可以对进程进行自动化管理,提高效率和准确性。 参考:shell脚本进程管理 - CSDN文库 shell脚本…

JavaScript(四)——JavaScript 语法

目录 JavaScript 语法 JavaScript 字面量 JavaScript 变量 JavaScript 操作符 JavaScript 语句 JavaScript 关键字 JavaScript 注释 JavaScript 数据类型 JavaScript 函数 JavaScript 字母大小写 JavaScript 字符集 驼峰命名法 小驼峰命名法 大驼峰命名法&#xf…

DrissionPage,一个超实用的 Python 库!

更多资料获取 📚 个人网站:ipengtao.com 大家好,今天为大家分享一个超实用的 Python 库 - DrissionPage。 Github地址:https://github.com/g1879/DrissionPage 在网页数据抓取和自动化测试中,Selenium 和 Requests 是…

LeetCode-35 - 在排序数组中查找元素的第一个和最后一个位置

力扣35题 题目描述:在排序数组中查找元素的第一个和最后一个位置 给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 你必…

N-way K-shot Few shot learning

首先需要明确的是少样本领域的数据划分和大规模监督学习方法的数据划分不一样。在大规模监督学习方法中,训练集和测试集是混合后按比例随机切分,训练集和测试集的数据分布一致。以分类问题为例,切分后训练集中的类别和测试集中的类别相同&…

二进制部署k8s单master集群

一、常见的K8S部署方式 1、Minikube Minikube是一个工具,可以在本地快速运行一个单节点微型K8S,仅用于学习、预览K8S的一些特性使用。 https://kubernetes.io/docs/setup/minikube 2、Kubeadmin Kubeadmin也是一个工具,提供kubeadm init…

大模型之技术概述

本文作为大模型综述第一篇,介绍大模型技术基本情况。 目录: 1.大模型技术的发展历程 2.大模型技术的生态发展 3.大模型技术的风险与挑战 1.大模型技术的发展历程 2006 年 Geoffrey Hinton 提出通过逐层无监督预训练的方式来缓解由于梯度消失而导致的…

HTML连接样式CSS和表格,表单

HTML连接样式CSS <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <-设置背景都是红色-> <body style"background-color:red;"> <-设置…