【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.mzph.cn/news/829213.shtml

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

相关文章

python coverage如何使用

Python的coverage.py是一个测量代码覆盖率的工具,它可以告诉你在测试中哪些代码被执行了,哪些没有。这对于确保你的测试覆盖了所有情况非常有用。以下是如何使用coverage.py的基本步骤: ### 安装 首先,你需要安装coverage.py。你…

如何实现直播声卡反向给手机充电功能呢?

在数字化时代的浪潮中,声卡作为多媒体系统的核心组件,扮演着声波与数字信号相互转换的关键角色。它不仅能够将来自各类音源的原始声音信号转换为数字信号,进而输出到各类声响设备,更能够通过音乐设备数字接口(MIDI)发出合成乐器的…

Eudic欧路词典for Mac:专业英语学习工具

Eudic欧路词典for Mac,作为专为Mac用户设计的英语学习工具,凭借其简捷高效的特点,成为众多英语学习者不可或缺的助手。 Eudic欧路词典for Mac v4.6.4激活版下载 这款词典整合了多个权威词典资源,如牛津、柯林斯、朗文等&#xff0…

​「Python大数据」词频数据渲染词云图导出HTML

前言 本文主要介绍通过python实现数据聚类、脚本开发、办公自动化。词频数据渲染词云图导出HTML。 一、业务逻辑 读取voc数据采集的数据批处理,使用jieba进行分词,去除停用词词频数据渲染词云图将可视化结果保存到HTML文件中二、具体产出 三、执行脚本 python wordCloud.p…

mysql中日期函数now()和sysdate()的区别

说明: 在mysql数据库中,now()、sysdate() 都是获取系统当前日期时间 区别: 示例脚本: select sleep(2),now(),sysdate() from dual; 输出: 小结: 1、 now()和sysdate()都可以获取系统当前日期时间 2、区别…

第30篇 RPC概述

RPC(Remote Procedure Call,远程过程调用)是一种编程技术,使得开发者能够像调用本地函数一样调用位于不同进程、不同主机上的函数或服务。这种技术隐藏了底层网络通信细节,使得分布式系统中的组件能够无缝协作&#xf…

【无标题】getchar gets scanf

getchar与putchar的用法 getchar一次只接收一个字符 #include<stdio.h>int main() { char ch 0;while ((ch getchar()) ! \n){putchar(ch);} } #include <stdio.h> #define SPACE // SPACE表示一个空格字符 int main() { char ch; ch getch…

优化SQL的方法

来自组内分享&#xff0c;包含了比较常使用到的八点&#xff1a; 避免使用select * union all代替union 小表驱动大表 批量操作 善用limit 高效的分页 用连接查询代替子查询 控制索引数量 一、避免使用select * 消耗数据库资源 消耗更多的数据库服务器内存、CPU等资源。 消…

训练深度神经网络,使用反向传播算法,产生梯度消失和梯度爆炸问题的原因?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 反向传播是神经网络训练的精髓。它是根据上一个迭代获得的误差&#xff08;即损失&#xff09;对神经网络的权重进行微调的做法。权重的适当调整可确保较低的误差&#xff0c;从而通过提高模型的泛化能…

Android Glide 获取动图的第一帧

一、说明 Glide 可以加载 2 种动图&#xff0c;一种是 Gif 图&#xff0c;另一种是 Webp 动图。 有时候我们需要获取动图的第一帧&#xff0c;并以封面的形式显示&#xff0c;那该怎样获取呢&#xff1f; 二、获取 Webp 第一帧 我这儿的 Webp 显示用到了一个三方库&#xf…

【LLM】系统的评估与优化

文章目录 系统的评估与优化评估 LLM 应用的方式人工评估简单自动评估使用大模型进行评估混合评估 评估并优化生成部分提升直观回答质量标明知识来源&#xff0c;提高可信度构造思维链增加一个指令解析 评估并优化检索部分评估检索效果优化检索的思路 思考对比各种LLM评估方法的…

将游戏界面与注册/登录界面连接到一起

一、 导包 在注册页面中导入一个import subprocess包 二、 使用代码将其连接到一起 在循环中加入下面这一行代码&#xff0c;用来实现效果 subprocess.run(["python", "game代码.py"]

Faust勒索病毒:了解变种faust,以及如何保护您的数据

导言&#xff1a; 近年来&#xff0c;网络安全问题日益严峻&#xff0c;其中勒索病毒成为了一种日益猖獗的威胁。在众多勒索病毒中&#xff0c;.faust勒索病毒以其高度的隐秘性和破坏性引起了广泛关注。本文91数据恢复将深入剖析.faust勒索病毒的威胁特点&#xff0c;并提出相…

实现SpringMVC底层机制(一)

文章目录 1.环境配置1.创建maven项目2.创建文件目录3.导入jar包 2.开发核心控制器文件目录1.流程图2.编写核心控制器SunDispatcherServlet.java3.类路径下编写spring配置文件sunspringmvc.xml4.配置中央控制器web.xml5.配置tomcat&#xff0c;完成测试1.配置发布方式2.配置热加…

【stomp 实战】Spring websocket使用详解和基本原理

spring框架对websocket有很好的支持&#xff0c;stomp协议作为websocket的子协议&#xff0c;Spring也做了很多封装&#xff0c;让我们在开发中易于使用。 学习使用Spring的Websocket模块&#xff0c;当然最好的办法就是看官网说明了。本篇文章对官网做一些简述和个人的理解。 …

采集 Kubernetes 容器日志最佳实践

前言 指标、日志、链路是可观测的三大支柱&#xff0c;日志主要用于记录代码执行的痕迹&#xff0c;方便定位和排查问题。当前主流的应用都是以容器的方式运行在 Kubernetes 集群&#xff0c;由于容器的动态性&#xff0c;容器可能会频繁地创建和销毁。日志的采集和持久化变得…

用例整体执行及pytest.ini文件

在我们写代码的过程中&#xff0c;一般都是右键或者命令行去执行一个用例 但是当我们写完后&#xff0c;需要整体执行一遍。那应该怎么搞呢&#xff1f; 我们可以在根目录下新建一个main.py或者run.py之类的文件&#xff0c;文件内容如下&#xff1a; if __name__ "__ma…

Android --- SQlite数据存储

使用 SQLite 保存数据 | Android Developers (google.cn) SQLiteOpenHelper 类包含一组用于管理数据库的实用 API。当您使用此类获取对数据库的引用时&#xff0c;系统仅在需要时才执行可能需要长时间运行的数据库创建和更新操作&#xff0c;而不是在应用启动期间执行。您仅…

4-用户权限控制(后端)

在计算机系统中&#xff0c;用户权限控制是一种机制&#xff0c;用于限制用户对系统资源的访问和操作。它可以确保只有经过授权的用户可以执行特定的操作&#xff0c;并限制未经授权的用户的访问权限。 用户权限控制通常涉及以下几个方面&#xff1a; 用户认证&#xff1a;用户…

JAVA实现easyExcel批量导入

注解类型描述ExcelProperty导入指定当前字段对应excel中的那一列。可以根据名字或者Index去匹配。当然也可以不写&#xff0c;默认第一个字段就是index0&#xff0c;以此类推。千万注意&#xff0c;要么全部不写&#xff0c;要么全部用index&#xff0c;要么全部用名字去匹配。…