【React】Sigma.js框架网络图-入门篇(2)

通过《【React】Sigma.js框架网络图-入门篇》有了基本认识

由于上一篇直接给出了基本代码示例,可能看着比较复杂也不知道是啥意思;
今天从理论入手重新认识下!

一、基本认识

首先,我们先了解下基础术语:

  • 图(Graph):由节点(Node)和边(Edge)组成的一种数据结构,用于描述事物之间的关系
  • Node:节点,表示事物
    • 例如:python、java、编程语言…
  • Edge:边,表示事物之间的关系
    • 例如:
    • python -> 编程语言
    • java -> 编程语言
    • 编程语言 -> python
    • 编程语言 -> java

通过上诉转化为Graph展示:
在这里插入图片描述

二、Sigma.js 生命周期

2.1 sigma初始化

参数说明
Graphology实例这对于 sigma 的运行至关重要。它提供了 sigma 可视化的图形数据结构。
DOM Element此元素充当图形可视化的容器,并在 sigma 实例的整个生命周期中保持一致。
Settings (Optional)可以在实例化期间提供初始设置以配置 sigma 的行为。
setSettingupdateSetting方法允许在实例化后修改设置。

实例化期间提供的图(Graph)可以稍后使用该setGraph方法进行更新。

2.2 两步渲染机制

sigma渲染涉及两个主要步骤:数据处理、将其可视化。

  1. 数据处理
    在渲染之前,sigma 必须处理数据。这涉及诸如调用nodeReduceredgeReducer设置以及为 WebGL 渲染器索引数据之类的任务。
  2. 渲染
    数据处理后,sigma通过在canvas(画布元素)中生成可视化图形。

2.3 自动渲染触发器

Sigma在特定场景下自动调用处理和渲染方法:

场景说明
Graphology EventsGraphology 实例发出与数据更新相关的事件时,sigma 会负责必要的渲染。 开发人员不需要管理这个。
Settings Updates对设置的任何修改都会触发重新渲染。
User Interactions通过鼠标或触摸设备的交互导致相机更新和后续渲染。

2.4 手动渲染触发器

在某些情况下,可能需要手动启动处理和渲染步骤。

例如:
如果外部因素改变了nodeReduceredgeReducer使用的状态,
则必须执行处理和渲染以实现正确的可视化。

Sigma为此提供了三种方法:

方法说明
refresh该方法处理数据然后呈现。也就是视图重载
scheduleRefresh使用requestAnimationFrame安排下一帧的refresh
如果已安排刷新,则不会安排另一次刷新,从而避免冗余。
此方法对于去抖动很有用,因为refresh有时会占用大量资源。
scheduleRender安排下一帧的渲染,但前提是尚未安排render渲染和refresh刷新。

注意: 渲染方法是私有的。 当需要重新渲染时,开发时应始终使用scheduleRender

三、Sigma.js 数据基本构成

Sigma.js 使用Graphology作为其底层图模型
对数据(NodeEdge等)有个基本数据结构规定(可视为系统关键词,定义扩展字段时不要重叠)

3.1 公共属性

属性名说明
size表示节点的半径。
作用于Node时,越大的值将渲染越大的节点;
作用于Edge时,越大的值将渲染越粗的线;
color以字符串形式表示节点的颜色。CSS named colors
它处理十六进制值(例如:#e22653)和CSS命名的颜色(例如deeppink)。
label节点显示名称
hidden布尔属性。如果设置为true,则不会显示该节点。
forceLabel设置为true时,无论缩放级别或其他条件如何,都将始终显示节点的标签。
zIndex决定节点的显示顺序。 zIndex 值较高的节点将绘制在 zIndex 值较低的节点之上。
注意:只有当sigma设置zIndex为true时,zIndex属性才有效

3.2 Node节点

  • 最小构成字段:
属性名说明
id节点的唯一标识
xy决定节点在画布上的位置。它们通常使用布局算法设置,但也可以手动指定。
(无布局默认情况下需要手动指定)
  • 其他预定属性
属性名说明
type定义了节点的视觉展示形态,如:circle, square

3.3 Edge

  • 最小构成字段:
属性名说明
source基于哪个节点
target到哪个节点

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

随笔 | 宿舍矛盾

室友A:睡觉时间比较早 室友B:睡觉时间比较晚,起床时间也晚 室友C:睡的晚,起的早 我:睡的时间随机,起的较早 事件1: 某一个星期四的中午,我正在听歌。室友C跟我说:我们去打扫卫生吧。于是&am…

CPPTest实例分析(C++ Test)

1 概述 CppTest是一个可移植、功能强大但简单的单元测试框架,用于处理C中的自动化测试。重点在于可用性和可扩展性。支持多种输出格式,并且可以轻松添加新的输出格式。 CppTest下载地址:下载地址1  下载地址2 下面结合实例分析下CppTest如…

【Linux网络】FTP服务

目录 一、FTP简介 1.FTP-文件传输协议 2.FTP的两种模式 二、安装配置FTP 1.安装环境 2.对文件的操作 3.切换目录 4.设置匿名用户 5.图形化界面登录 6.白名单与黑名单 重点与难点 一、FTP简介 1.FTP-文件传输协议 FTP是FileTransferProtocol(文件传输协…

【论文笔记 | 异步联邦】PORT:How Asynchronous can Federated Learning Be?

1. 论文信息 How Asynchronous can Federated Learning Be?2022 IEEE/ACM 30th International Symposium on Quality of Service (IWQoS). IEEE, 2022,不属于ccf认定 2. introduction 2.1. 背景: 现有的异步FL文献中设计的启发式方法都只反映设计空…

php反序列化字符串逃逸

字符串逃逸 字符串逃逸是通过改变序列化字符串的长度造成的php反序列化漏洞 一般是因为替换函数使得字符串长度发生变化,不论变长还是变短,原理都大致相同 在学习之前,要先了解序列化字符串的结构,在了解结构的基础上才能更好理解…

ASP.NET某企业信息管理系统的设计与实现

摘 要 信息管理系统就是我们常说的MIS(Management Information System),它是一个计算机软硬件资源以及数据库的人-机系统。经过对题目和内容的分析,选用了Microsoft公司的ASP.NET开发工具,由于它提供了用于从数据库中访问数据的强大工具集,使用它可以建立开发比较完善的数据库…

汽车底盘域的学习笔记

前言:底盘域分为传统车型底盘域和新能源车型底盘域(新能源系统又可以分为纯电和混动车型,有时间可以再研究一下) 1:传统车型底盘域 细分的话可以分为四个子系统 传动系统 行驶系统 转向系统 制动系统 1.1传动系…

第29天:安全开发-JS应用DOM树加密编码库断点调试逆向分析元素属性操作

第二十九天 一、JS技术-DOM树操作及安全隐患 1.DOM:文档操作对象 获取HTML代码中函数的值,可以操作网页代码内容,实现自主或用户交互动作反馈 安全问题:本身的前端代码通过DOM技术实现代码的更新修改,但是更新修改如…

鸿蒙APP开发页面组件之间的属性关系

我们将对于多页面以及更多有趣的功能展开叙述,这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式(UiAbility),样式的书写、状态管理以及动画等方面进行探讨 页面之间…

Web前端一套全部清晰 ③ day2 HTML 标签综合案例

别让平淡生活&#xff0c;耗尽所有向往 —— 24.4.26 综合案例 —— 一切都会好的 网页制作思路&#xff1a;从上到下&#xff0c;先整体到局部&#xff0c;逐步分析制作 分析内容 ——> 写代码 ——>保存——>刷新浏览器&#xff0c;看效果 <!DOCTYPE html> &l…

OSPF域间路由

注&#xff1a;区域&#xff08;area&#xff09;是以接口进行划分的 描述&#xff1a; R1的g0/0/1接口属于area 0 √ R1属于区域0和区域1 1.设计原则 1、OSPF区域的设计原则&#xff1a; 骨干区域有且只能存在一个 非骨干区域必须和骨干区域相连 多区域时&#…

SystemUI KeyButtonView setDarkIntensity 解析

继承自 ImageView KeyButtonDrawable intensity为0时按键颜色为白色。 intensity为1时黑色为的调用堆栈&#xff1a; java.lang.NullPointerException: Attempt to invoke virtual method int java.lang.String.length() on a null object referenceat com.android.systemui.…

【JAVA】UDP与TCP套接字编程

目录 一、UDP数据报套接字编程 1、DatagramSocket API 2、DatagramPacket API 3、InetSocketAddress API 4、示例一 5、示例二 二、TCP流套接字编程 1、ServerSocket API 2、Socket API 3、TCP中的长短连接 4、示例一 5、示例二 一、UDP数据报套接字编程 1、Datag…

施耐德 Unity Pro 编程软件导入导出变量

适用范围 施耐德中高端PLC&#xff0c;使用的编程软件为 UnityPro &#xff08;最新版更名为 Ecostructure Control Expert&#xff09; 中端 PLC&#xff1a;Premium&#xff0c;M340高端 PLC&#xff1a;Quantum&#xff0c;M580 导出/导入变量 导出变量可导出【变量和 FB…

Java设计模式 _创建型模式_原型模式(Cloneable)

一、原型模式 1、原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能比较好。一般对付出较大代价获取到的实体对象进行克隆操作&#xff0c;可以提升性能。 2、实现思路&#xff1a; &#xff08;1&#xff09;、需要克隆的…

C基础语法速览

叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.数据类型1.1.数据类型的常见分类1.2.数据类型的符号修饰1.3.数据…

面向对象设计与分析40讲(25)中介模式、代理模式、门面模式、桥接模式、适配器模式

文章目录 门面模式代理模式中介模式 之所以把这几个模式放到一起写&#xff0c;是因为它们的界限比较模糊&#xff0c;结构上没有明显的差别&#xff0c;差别只是语义上。 这几种模式在结构上都类似&#xff1a; 代理将原本A–>C的直接调用变成&#xff1a; A–>B–>…

git 基础知识(全能版)

文章目录 一 、git 有三个分区二、git 基本操作1、克隆—git clone2、拉取—git fetch / git pull3、查看—git status / git diff3.1 多人开发代码暂存技巧 本地代码4、提交—git add / git commit / git push5、日志—git log / git reflog6、删除—git rm ‘name’7、撤销恢…

【C++】详解初始化列表,隐式类型转化,类静态成员,友元

前言 初始化列表是对构造函数内容的补充&#xff0c;小编会详细的讲解初始化列表的概念&#xff0c;特性&#xff0c;注意点。这是本篇内容的重头戏&#xff0c;小编会先提一个问题来抛砖引玉。 隐式类型转换顾名思义&#xff0c;首先它不需要主动转换&#xff0c;然后就是不同…

关于SSL加密,您应该知道什么?

SSL加密&#xff0c;全称为安全套接字层加密&#xff0c;是一种网络安全协议&#xff0c;主要用于在网络通信中提供隐私和数据完整性。它通过在客户端和服务器之间建立一个加密的通道&#xff0c;确保数据在传输过程中不被窃取或篡改。随着互联网的普及和电子商务的快速发展&am…