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

news2024/10/5 23:30:05

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

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

一、基本认识

首先，我们先了解下基础术语：

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

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

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

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

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

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

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

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

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

Sigma为此提供了三种方法：

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

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

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

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

属性名	说明
`id`	节点的唯一标识
`x` 和 `y`	决定节点在画布上的位置。它们通常使用布局算法设置，但也可以手动指定。（无布局默认情况下需要手动指定）