NetV.js：一个基于网络的用于大规模图和网络的高效可视化的库

1 论文概述
- 1.1 文章摘要
- 1.2 引言
- 1.3 文章脉络
2 相关工作
3 设计
- 3.1 设计要求
- 3.2 设计细节
- - 3.2.1 图模型管理器
  - 3.2.2 渲染引擎
  - 3.2.3 交互管理器
  - 3.2.4 布局插件
  - 3.2.5 标签插件
  - 3.2.6 选择插件
4 使用案例
- 4.1 基本图形绘制
- 4.2自定义风格
- 4.3 交互
- 4.4 插件
- 4.5 大规模的图
5 实验
6 结论
7 NetV.js使用
8 收获

1 论文概述

2021年发表在Visual Informatics上的文章，介绍了浙大陈为老师发布的图数据Web端可视化工具库-NetV.js。

1.1 文章摘要

图形可视化在社交媒体网络、蛋白质-蛋白质相互作用网络和交通网络等领域发挥着重要作用。许多可视化设计工具和编程工具包在图形相关的应用程序中得到了广泛的应用。然而，一个关键的挑战仍然是大规模图数据的高效可视化。在本研究中，我们提出了NetV.js，这是一个开源的、基于WebGL的JavaScript库，支持以交互帧速率在普通计算机上快速可视化大规模图形数据(多达5万个节点和100万条边)。实验结果表明，我们的库优于现有的工具包(Sigma.js, D3.js, Cytoscape.js和Stardust)的性能和内存消耗。

关键词：图、图可视化、网络可视化、节点-链接图

1.2 引言

图可视化在多个领域发挥着重要作用。一系列可视化创作工具已经开发出来，以方便图形可视化的设计和创建。其中，d3.js极大地降低了基于web的可视化创作的难度，并增强了可视化社区的能力，随后出现了许多基于web的图形可视化工具。

在各种类型的可视化表示中，节点-链接图是最受欢迎的，因为它可以显示拓扑结构和连接。开发人员使用一般的可视化创作工具如D3.js，P4和stardust来操作节点链接图的可视化元素时需要特别注意。可视化节点链接图的一些类似的要求可以被抽象和封装到相关的接口中，以减少工作量。

一些图形可视化编写工具，如Cytoscape.js和Sigma.js，通过封装图形可视化的相关接口，为开发人员隐藏不相关的接口(如控制链接的位置)，以及暴露与图形相关的接口(如访问节点的邻近区域)，为开发提供了极大的方便。然而，大多数工具在实时显示图形数据方面的能力有限。如第5节所述，在可视化节点数大于5000的图形时会出现严重的延迟，从而导致用户体验不佳。

没有现成的工具能同时满足编写可用性和用户可访问性的要求。我们分析了节点链接图可视化设计需求，并贡献了NetV.js (https: //netv.zjuvag.org/)，一个基于web的高性能可视化库。它通过一套与节点链接相关的特性和接口提供了高可用性，并利用GPU的高性能渲染能力增加了用户的可访问性。我们使用比较实验来评估我们的系统。

1.3 文章脉络

引言 Introduction
相关工作 Related Work
库的设计 Design
使用案例 Examples
实验 Experiment
结论 Conclusion

2 相关工作

许多库(工具，语法和框架)已经为基于图的应用程序所提供。一开始，开发人员使用传统的编程语言来构建图形可视化应用程序，如C Sharp、c++、javaScript和Python。开发人员需要具备熟练的编程技能，并理解实现机制。与此同时，他们花了大量时间进行开发和调试。为了使这个过程更容易，可视化语法和框架允许在可视化的可视化通道上进行详细配置，代表包括D3.js [10], ECharts [20],Vega [28], and Vega-Lite [29]。

然而，开发人员仍然需要仔细地选择复杂的API来构建图形，因为api是为通用的可视化而不是图可视化应用程序设计的。另外，图可视化工具，如Cytoscape.js [18]， Sigma.js[19]，和Gephi[30]，设计和实现特定的功能，以简化构建过程。

同时，数据量在效率方面也带来了很大的挑战。有些库[30,31,32]使用HTML canvas来绘制可视元素，因此性能较低。PixiJS [31]， P5[15]和Stardust[17]都使用基于GPU的技术来适应大量的元素。然而，它们并不是专门为图形可视化设计的，并且包含了对图形可视化来说不必要的冗余APIs。然而，它们的渲染效率有很大的提升潜力。

NetV.js的目标是高效地可视化大规模节点-链接图。它利用基于图形处理器的可视化框架来提高渲染性能和设计友好的简洁编程接口，以有效地操纵图形元素。

3 设计

3.1 设计要求

为了探索NetV.js的设计空间，我们采访了三位图可视化方面的专家，研究了Gephi[30]、Cytoscape.js[18]、SNAP[32]、Sigma.js[19]、GraphViZ[33]等图形可视化工具。我们总结了以下高性能节点链接图可视化的设计要求:

R1 一个抽象的图形模型来处理图形数据。在节点链接图中，可视元素(图形标记)与数据元素(节点和链接)一一对应。开发人员只需要操作图形数据元素，而不需要访问可视元素。为了简化原始数据的操作和可视化，开发人员需要一个抽象的图形模型。应该支持以下几个特性:

R1.1 Node-link连接。图的基本特征是每条链连接两个节点。在绘制节点-链接图时，开发人员只需要专注于修改节点位置，而忽略链接的位置。链接的位置应自动确定。
R1.2 邻居可达性。图的另一个特征是一个节点到它的邻居节点和邻居链路之间的连接。我们发现，一些图可视化系统支持突出显示被聚焦节点的邻居节点和链接。三位专家一致认为，图模型需要支持一个节点访问它的邻居。
R1.3 基本图论算法。图算法在一些场景中发挥着重要作用。例如，一些重要的度量(如节点度、节点中心性)可以突出显示感兴趣的点(POIs)，而最短路径查找算法可以帮助开发人员跟踪个两个节点之间的关联。

R2 用于大规模节点链接图的高帧率。帧率会影响用户体验。当帧率较低时，用户界面会响应缓慢，甚至停止响应。根据我们对三位专家的采访，一个关于高性能渲染的经验法则是“达到30帧每秒(FPS)来渲染拥有10万多个视觉元素的节点链接图”。

R3 节点和链接的基本样式。开发人员经常需要对节点链接图上的信息进行编码，比如用节点大小编码级别。尽管圆形节点和直线链接在大型节点链接图中很流行，但节点和链接可以具有不同的形状和样式。最常见的节点形状包括圆、矩形和三角形，最常见的链接形状包括直线和曲线。

R4 布局算法。节点链接图对布局的依赖是不言而喻的。因此，NetV.js应该提供一些基本的布局算法。考虑到布局算法的复杂性，NetV.js应该为开发人员提供接口来定制他们的布局算法。

R5 定制标签。标签显示节点和链路的基本信息。尽管为所有的元素绘制标签会导致大规模节点-链接图中的视觉混乱，但是开发人员可以采用一些策略来选择元素的一部分来绘制它们的标签。NetV.js应该为开发者提供绘制定制标签的接口。

R6 基本交互。通过对专家的访谈和对图可视化创作系统的调查，我们发现节点-链接图的交互可以分解为节点上的交互、链接上的交互和画布上的交互。应该支持像鼠标悬停mouseover、鼠标移动mousemove、鼠标离开mouseout、mouseup鼠标松开和mousedown鼠标按下这样的鼠标事件来构建更复杂的交互，比如拖拽节点，还应该支持套索等选择交互。

3.2 设计细节

我们设计并实现了NetV.js，它由三个主要部分组成：图形模型管理器、渲染引擎和交互管理器(图1)。我们将R4、R5和R6中的选择交互分离为三个不同的插件，以减少NetV.js的代码长度。

3.2.1 图模型管理器

为了帮助开发人员以统一的方式操作数据和可视化(R1)，我们在NetV.js中设计了图模型管理器(图1(a))。图模型管理器的核心是数据容器，它存储数据元素，包括节点和链路。每个节点包含一个唯一的标识符(id)，它的样式存储在style属性中，坐标存储在position属性中，其他信息存储在attributes属性中。类似地，每个链接都包含一个源source和一个目标target，它们表示链接所连接的两个节点，样式和其他信息存储在同一个style和attributes中。在NetV.js，Node和Link存储在Node和Link类实例的对象中。而且，它们是从Element 派生而来的。

支持添加、删除、修改、查询和计算数据元素或可视元素的操作。数据设置器Data Setters被设计用来添加和删除数据元素。数据获取器Data Getters被设计用来查询元素(例如，根据id查询节点)。开发人员可以通过Data Modifer修改元素的样式和属性。NetV.js中支持几种常用的图算法，由于它们与图可视化没有很强的关系，我们只实现了几个接口，如邻居节点/链接查询(R1.2)和最短路径查找(R1.3)。图模型管理器还可以操作全局配置，比如画布的背景颜色和DOM容器。

3.2.2 渲染引擎

为了实现R2，渲染引擎利用了GPU的高性能渲染能力。渲染引擎的工作流程包括1)将元素的样式和位置映射到WebGL着色器变量中，2)使用WebGL api将相应的数据加载到WebGL缓冲区中，3)将缓冲区中的数据传输到GPU内存中，然后在屏幕上绘制元素。通过这种方式，渲染引擎最终将数据传输到浏览器的CPU内存和GPU内存。

我们设计了一个被动的缓冲区修改策略：当开发人员修改元素的样式时，图形模型管理器不会调用渲染引擎来修改WebGL缓冲区。但是，它将修改后的元素存储到缓存池中。当开发人员刷新画布时，渲染引擎将遍历缓存池中的元素，以获得相关的属性并覆盖它们对应的缓冲区内容。相对的策略是，当开发人员修改元素的样式时，向前改变WebGL缓冲区。它是直观的，因为数据是向前流动的。然而，每当一个元素被修改时，图形模型管理器就会调用渲染引擎的相关接口来更改缓冲区。它会加深调用堆栈并降低呈现的效率。

链接的位置不能直接修改(R1.1)。然而，当开发人员修改连接节点的位置时，链接将被缓存到池中。当画布刷新时，渲染引擎将更新链接的WebGL缓冲区。

此外，渲染引擎还支持渲染几种基本样式的节点和链接(R3)。节点可以用四种不同的形状来呈现:圆形、矩形、三角形和十字形。开发人员可以控制圆形节点的半径(r)，矩形节点的宽度width和高度height，三角形节点的顶点(vertexAlpha, vertexBeta和vertexGamma) ，以及交叉节点的厚度thickness和大小size。它们可以设置各种节点的填充颜色(fill)、边框颜色(**strokeColor)**和边框宽度(strokeWidth)，支持两个不同的链接(直线和曲线)。此外，开发人员可以控制曲线的曲率。这两种链接支持颜色(strokeColor)、宽度(strokeWidth)和dash数组(dashInterval)的设置。

3.2.3 交互管理器

交互管理器提供了一系列的基本交互(R6)。NetV.js监听画布上的几个鼠标事件(mouseover, mouseout, mousemove, mousedown, mouseup和mousewheel)。所有这些事件都在节点、链接和画布上得到支持。我们通过组合不同的事件实现了几个复杂的交互。例如，NetV.js支持通过监听和组合鼠标滚轮，鼠标向下，鼠标移动，鼠标向上的缩放+平移交互。节点拖动可以分解为几个部分:dragstart、drag和dragend。当鼠标按下并移动时，触发dragstart，然后拖动。如果鼠标被释放，拖拽和鼠标向上会被触发。图2显示了节点、链接和画布上的事件。

为了确定鼠标击中了哪个元素，渲染引擎生成了一个隐藏的画布，该画布将元素的唯一标识编码到相应的像素中。开发者可以使用getElementByPosition()接口获取编码在鼠标聚焦像素上的标识，这样就可以立即捕捉像素上的元素。

3.2.4 布局插件

节点链接图的可视化依赖于一个布局算法-来提供节点的相对位置。不同的布局算法有不同的界面;我们的插件打算设计一套统一的接口来方便开发者调用(R4):

start(): 调用start()接口将引入算法。为了提高前端性能，NetV.js创建了另一个线程(使用异步计时器)来计算布局结果。
stop(): 调用stop()接口会立即停止布局线程。
onTick(): 调用onTick()可以让开发者通过它的回调访问布局算法的中间状态。有些布局算法不提供中间状态。NetV.js使用插值函数生成中间状态。它使布局过程更平滑。
onStop(): 调用onStop()会向开发者抛出停止状态并返回布局结果。它将在算法结束或开发人员调用stop()接口时被触发。

为了解决R4，实现了一个径向树布局和一个基于这些接口的力导向布局。在未来，我们将添加更多的布局算法，以方便可视化。开发者也可以使用我们的界面来实现他们的布局算法。

3.2.5 标签插件

实现了一个标签绘制插件来帮助为元素创建标签(R5)。在绘制大规模节点链接图时，为所有元素绘制标签将导致严重的视觉混乱。因此，我们假定开发人员只对少数元素使用标签，例如选择一些POI节点或区域来绘制标签。因此，我们选择SVG作为标签呈现工具，以提高可扩展性。除了默认的文本标签，开发人员还可以通过创建标签模板来定制标签。

3.2.6 选择插件

实现了一个选择插件来方便元素的选择。常用操作包括框选和套索选。开发人员可以在回调函数中获得所选的结构(包括节点和链接)。

4 使用案例

在本节中，我们将展示不同的例子来说明NetV.js的用法。

4.1 基本图形绘制

图4显示了一个包含三个部分的基本案例：初始化、加载数据和呈现。testData说明了图形数据格式。在这个例子中，初始化部分将画布挂起到文档“main”上。

4.2自定义风格

图形可视化最重要的功能是用不同的样式绘制图形，包括颜色、笔画、半径和元素的位置。图3显示了使用NetV.js设置自定义样式。开发人员可以自定义每个元素的样式，并在初始化部分设置默认样式。特别是，初始化配置项设置在“configs”中。

4.3 交互

NetV.js支持一系列基本的交互,包括平移、缩放和鼠标悬停。图5 (b)显示了几个内置的交互。

4.4 插件

4.5 大规模的图

NetV.js的目标是渲染大规模的图。图3(d)为fnan512[34]数据集74752个节点和261129条边的图形可视化结果。图3(e)为bcsstk31数据集[34]的35,590个节点和572,915条边的图形可视化结果。由于使用了WebGL, NetV.js可以很容易地支持渲染数百万个元素。

5 实验

图6显示了 NetV.js和其他5个工具 (即D3-SVG, D3-Canvas, Cytoscape.js, Sigma.js, and Stardust.js)在不同大小数据集上的FPS。特别是，NetV.js, Sigma.js, and Stardust.js使用WebGL。为了模拟真实的图数据，我们将图密度设置为20，即边数与节点数之比为1比20。实验是在一台配有显卡(NIVIDIA GTX 1060, 6G)和刷新率为144 HZ的显示器的PC上进行的。Stardust.js和D3-Canvas可以渲染多达10万个元素。同时，NetV.js可以渲染超过100万个FPS大于1的元素。
五个工具源码：https://github.com/ZJUV AG/NetV.js/tree/benchmarks/benchmarks

6 结论

本研究展示了NetV.js，一个用于大规模节点链接图的开源、基于WebGL的JavaScript库。在未来，我们计划扩展NetV.js来支持异构图。我们还打算实现更多可视化的组件和可视化分析算法来分析图数据。

7 NetV.js使用

项目源代码：https://github.com/ZJUVAG/NetV.js
项目网页：https: //netv.zjuvag.org/

一个简单实例：
使用内置数据集绘制图：

一些交互示例：
当鼠标悬停到某个节点，就可以观察到该节点到它的邻居节点和邻居链路之间的连接。同时也可以对拖动节点的位置。
可以使用d3-force布局而用 NetV.js 绘制。

8 收获

尽管开发这样的工具对自己来说还比较困难，但可以先从熟练使用这些工具开始，后续可深入学习使用d3.js和NetV.js这些可视化工具解决食品安全领域中的图可视化问题。

论文研读-图可视化-NetV.js:Web端可视化工具库相关推荐

python界面编程 plc_Python实现PLC数据可视化呈现于Web端
前面有写过借助Node-RED实现Modicon M262数据可视化呈现于Web的方案. 效果如下: 现介绍另一种通过Python实现PLC数据可视化呈现于Web端的方案. 主要技能: Python+ ...
18个我最推荐的Node.js Web框架和工具
Node.js是一个底层平台.为了方便开发者的工作变得简单高效,社区诞生了超过上千个库. 随着时间的推移,有很多优秀的库可以供大家选择,下面是不完全选择列表: ExpressExpressExpres ...
开放原子训练营（第一季）铜锁探密基于铜锁构建Web在线加密工具库（Go + React）
简介本文记录我参加开放原子训练营(第一季)铜锁探密活动,学习铜锁密码库和国密加密算法后,完成的小作品. 先简单介绍一下作品内容: Web在线加密工具库是一种提供加密算法在线使用的工具库,可以帮助用户 ...
Lodash.js：实用的工具库
Lodash.js:实用的工具库如官方所介绍的那样,Lodash是一个具有一致接口.模块化.高性能的JavaScript工具库.一开始Lodash只是Underscore.js的一个fork,之后再 ...
JS - Web端的点九图
顾名思义,就是跟安卓的点九图类似,将一张图片切割成9部分,固定四周四个角,其他部分可拉伸,这里仅作一个记录,具体可看官方文档一.点九图 "点九"是andriod平台的应用软件开发 ...
【Python Onramp】7. web端可视化：北京地铁数据统计分析实例以及简易Echarts绘图
系列文章目录见[Python Onramp] 0. 卷首语上一篇:[Python Onramp]6.一篇文章了解web开发要点:用Python开发简易的网页端成绩查询系统下一篇:[Python ...
vue 扫码枪扫码墩扫码器中文输入影响大小写影响解决方案 js web端扫码枪对接前端扫码枪 html扫码枪 vue扫码枪
# vue3 扫马枪/扫马墩/扫码器中文输入影响大小写影响解决方式 ## ps 你们觉得好用的话,能不能给我点个赞啊
Nagios（八）—— Nagios Web 端管理工具Nagiosql
NagiosQL 是专为 nagios 设计的 web 图形化管理应用,主要作用就是操作数据库和配置文件,其中包括将配置文件的信息写到数据库中,在数据库中修改 Nagios的监控配置信息,并将数据库中 ...
江湖2 java_热血江湖2手游一键端源码搭建教程+APP端+WEB端+GM工具
源码预览源码介绍最新定制版淡绿唯美杰奇2.3小说模板源码包括有[电脑版+wap手机版+关关采集器+采集规则(5个)] 最新定制版淡绿唯美杰奇2.3小说模板源码静环境要求: 基础环境组件: ph ...

论文研读-图可视化-NetV.js:Web端可视化工具库