基于B/S构架的网络结构可视化系统设计与实现

王 勇，王 松，张红英

1.西南科技大学 信息工程学院，四川 绵阳621010

2.西南科技大学 计算机科学与技术学院，四川 绵阳621010

1 引言

信息技术的快速发展使人们进入了网络时代，人们早已生活在各种各样的网络世界中。作为现实生活中最常见的关系型数据，网络往往隐藏了复杂的信息[1]。随着网络规模不断扩大，网络节点越来越多，节点关系越来越复杂，传统的表格+文字的表现形式，已无法有效呈现网络的拓扑结构[2]。网络结构可视化作为可视化中的重要分支，一方面可以帮助用户了解网络的内部结构，另一方面能够挖掘网络中隐含的信息和规律[3]。以社交网络为例，如果将网络中的个体看成一个节点，个体间的关系看成一条边，那么这些节点和边就可以构成一个人物关系图谱。图1 是《悲惨世界》中的人物关系图谱，使用圆形表示节点，直线表示边，节点的颜色代表不同组别，边的粗细代表人物间关系的亲密程度。通过这个可视化例子，可以知道谁是网络的中心人物，网络中存在几个派系，人物间的亲密程度。

图1虽然在一定程度上能帮助用户理解网络结构，但还只是一个静态图，具有一定的局限性[4]。特别是当网络节点数目庞大、网络结构复杂时，有限的可视化空间将大大限制网络的可视化效果。而交互作为可视化的一个重要手段，一方面能够缓解有限的可视化空间和数据过载之间的矛盾，另一方面能帮助用户深入直观地理解网络结构。对一个可视化系统来说，最终的目的不是向用户传递定制好的信息，而是通过提供交互式的分析手段帮助用户理解数据。

图1 《悲惨世界》的人物关系图谱

2 相关研究

在移动互联网和大数据的背景下，网络规模越来越大，节点关系越来越复杂，这给网络的分析和研究带来了巨大的挑战。网络结构可视化可以清晰直观地反应当前网络的连接状况，辅助人们了解网络的内部结构和具体规律。针对网络结构可视化的研究主要包括布局算法、交互设计两个方面。

布局算法主要是确定节点和边在空间内的具体位置。一个好的布局算法能有效避免节点重叠和边交叉，清晰直观地呈现网络的连接状况。常见的布局算法如下：（1）力导向布局算法。该算法使用一套虚拟的物理系统，根据节点受到的引力和斥力变换节点的位置，经过不断迭代，直到节点位置不再发生变换，系统最终达到一种稳定状态。（2）网格型布局算法。该算法将布局空间分割成多个网格，节点被均分到不同网格中，有效避免了节点重叠和过于集中的问题。（3）随机布局算法。该算法随机分配节点的位置，边不参与计算，布局完成后再绘制各节点的连线。（4）层次型布局算法。该算法会根据网络的结构特征，将节点放置到不同层次，同时展示节点的连接关系。

交互通过与操作对象之间的互动操作，让用户更好地参与到对数据的理解。当前交互的研究热点如下：（1）焦点加上下文交互。通过建立变形函数，扭曲焦点周围的空间结构，突出焦点对象，缩小焦点周围信息。（2）直接交互。通过直接操作绘制结果，有效提高交互效率，降低学习成本。（3）关联性交互。关联性交互是进行多变量可视化的重要方法，被广泛应用于多视图领域。（4）沉浸式交互。通过在虚拟环境中提供沉浸式的学习环境，为用户提供了一种更高效的学习方式。

当前网络结构可视化工具已成为研究网络必不可少的重要方法。网络结构可视化工具种类繁多，通用的可视化工具包括Gephi、NodeXL、Cytoscape、yEd、GraphViz 等[5]，它们为网络的研究提供了良好的支持。这些工具虽然功能丰富、各具特点，但在可扩展性、表现方式、自主可控等方面存在诸多缺陷。此外，这些工具大都依赖JVM，运行时需要特殊环境的支持。近年来伴随着Web技术的快速发展，诞生了一些基于B/S构架的网络结构可视化工具。例如：国外开源的sigma.js，能在浏览器上快速生成静态或者动态网络。百度推出的Echarts，能展现千万级的网络数据。蚂蚁金服旗下的网络数据可视化引擎G6，提供了一系列优雅、便于使用的可视化解决方案。以上基于B/S 构架的可视化工具虽然易部署、跨平台，但灵活性差、无法满足高度定制化的需求。

基于以上原因，通过Web 技术，设计一个表现方式灵活、部署简单、跨平台、易维护的网络结构可视化系统具有非常重要的意义。

3 网络结构可视化系统设计

网络结构可视化系统分为三层，由上到下分别是视图层、业务层、数据层，系统总体框架如图2所示。采用B/S架构进行前后端分离，为了优化系统性能，前端主要负责展示和交互，后端主要负责逻辑处理和复杂的数据计算。使用Vue作为前端框架，Flask作为后端框架，D3 作为可视化图形库，MongoDB 作为后台数据库，NetworkX作为网络分析工具。

图2 系统总体框架

3.1 数据层

数据层主要为业务层提供数据源。将原始的点、边数据进行清洗，剔除其中的冗余值、缺失值、无效值，整理为易于操作的JSON 格式并存储到性能优越的MongoDB中。节点属性和边属性如表1和表2所示。

表1 节点属性

表2 边属性

3.2 业务层

业务层是系统的关键层，它从数据层提取数据，并将处理的结果提交给视图层。业务层可细分为网络模型构建模块、网络布局与属性映射模块、网络交互分析模块。

3.2.1 网络模型构建

网络模型构建模块包括网络结构特征参数计算、网络拓扑结构划分。

（1）网络结构特征参数。传统的网络拓扑结构分析方法难以满足网络结构分析的需求。引入复杂网络算法计算网络结构特征参数，包括度、度中心性、接近中心性、介数中心性、特征向量中心性、聚类系数、网络直径等[6]。网络结构特征参数从不同角度反映了网络的拓扑性质，能帮助用户加深对网络的理解。

（2）网络拓扑结构划分。为了便于理解网络中的内在结构，引入复杂网络的一个重要特征——社区结构，揭示网络中的聚集现象。使用基于贪婪原理的社区发现算法CNM 完成网络拓扑结构划分[7]。该算法能够在相对较小的时间复杂度下，有效发现网络中的社区结构。

采用NetworkX内置算法完成网络结构特征参数计算和网络拓扑结构划分，表3是更新后的节点属性。

表3 更新后的节点属性

3.2.2 网络布局与属性映射

网络布局与属性映射模块，包括网络分层、成分可视化、属性映射。

（1）网络分层。当前复杂网络的研究还主要集中在单层网络而忽略了由于节点属性差异，导致节点无法简单叠加，从而形成了多层网络[8]。传统的单层网络可视化方法已无法展示多层网络信息，甚至有可能产生错误认识。为清晰呈现多层网络的拓扑结构，本文依据节点属性，对网络进行分层。对于同时位于不同网络中的节点，使用线条进行连接。分层后的网络一方面可以显示多层网络间的连接关系，另一方面能够缓解有限的可视化空间与数据过载的矛盾。

（2）成分可视化。在图论中将与其他部分完全断开的子图叫作成分。空间中领近的成分会增加视觉复杂度，降低网络的可读性。同时成分类型多种多样，统一的布局方式无法呈现其结构特征[9]。针对以上问题，本文设计了如图3 所示的可视化流程。点击分层网络中的节点，进入对应的网络层。为了减低网络层中成分间的视觉干扰，使用圆环及其中央的节点连接图表示成分。使用圆环样式表示成分的属性，节点连接图表示组别间的连接关系，方便用户快速获取成分的信息。点击圆环，将展示成分详细的拓扑结构。为有效观察成分的拓扑结构，根据网络的结构特征，自动选择布局方式。利用NetworkX 的内置算法判断成分的结构，若为树结构则使用层次布局，否则使用力导向布局。

图3 成分可视化流程

（3）属性映射。为了使呈现效果具有广泛的视觉特性，加深用户对数据的理解，将属性进行编码，譬如将节点的度映射节点大小，节点的组别映射为节点颜色。

3.2.3 网络交互分析模块

网络交互分析模块，包括多视图协同交互和多样化交互。

（1）多视图协同交互。多视图可以同时观察数据的不同属性，能在不同角度和显示方式下观察数据[10]。鉴于多视图的优点，本文设计了如图4所示的多视图协同交互流程。其中，主视图呈现网络的拓扑结构，表格视图展示所筛选节点的相关属性，信息视图显示网络的总体特性，提供定制化的视觉特性设置和基于特征参数的直方图过滤，小地图标识当前的浏览位置。分析流程如下：①表格视图+主视图。在表格视图中进行勾选操作，被勾选的节点将在主视图中高亮显示；在主视图中框选网络，被框选的节点将在表格视图中列出。②主视图+信息视图。在主视图中选中节点或边，信息视图将显示点或边的相关属性；在信息视图中进行直方图过滤，主视图将更新为过滤后的拓扑结构。③表格视图+信息视图。在信息视图中进行直方图过滤，表格视图将列出所筛选节点的相关属性。④主视图+小地图。在主视图中进行滚轮操作，小地图将帮助用户实现整体到细节、逐层深入的分析过程。

图4 多视图协同交互

（2）多样化交互。Shneiderman[11]归纳了可视化最基本的交互操作，包括过滤、关联、缩放、概览、按需提供细节、记录和提取。好的交互方式应该能帮助用户深入理解数据，并发现其中潜在的规律。基于以上的设计原则，本文设计了如图5所示的交互方式。

图5 多样化交互

①概览+细节。缩放、平移通过调整视图位置、控制视图内容，能实现对任意位置的浏览，但有相当大的局限性。当网络规模庞大、结构复杂时，如果没有提供足够的上下文，容易造成位置迷失。基于此，本文引入了概览+细节的交互方式，通过概览视图提供上下文信息，细节视图展示具体细节，从而实现兼顾高层次宏观结构和低层次局部特征的分析过程[12]。分析流程如下：在探索浏览过程中，让主视图和小地图分别充当细节视图和概览视图，其中，主视图显示当前关注区域的网络拓扑结构，热力图充当的小地图标识当前浏览位置，通过颜色隐喻网络的疏密程度，帮助用户把握网络的整体结构。在探索交互过程中，小地图通过引导用户挖掘的方向，帮助用户获取更多细节信息，最终实现整体到细节、逐层深入的分析过程。

②过滤。过滤作为一种灵活有效的交互方式，通过设置约束条件能快速获取用户感兴趣的信息[13]。然而传统过滤方式的输入条件和筛选结果都是文本形式，这种方式在用户对数据特性不了解时，往往难以快速获取结果。基于此，本文借助特征参数直方图，以矩形框选充当输入条件，动态更新网络的拓扑结构。具体分析流程如下：特征参数直方图统计每种特征参数的分布情况，如度分布、接近中心性分布、介数中心性分布，对各直方图的筛选结果取并集，动态获取网络的拓扑结构。图形化的过滤方式可以快速挖掘网络的结构特征，允许用户专注于对过滤数据的理解和分析。

③鱼眼、邻接矩阵。对于非树结构的网络数据，绘制结果中的回路会带来边交叉的问题，在降低网络可读性的同时，还容易导致认知上的偏差。基于此，本文引入了基于视角变换的鱼眼交互[14]和基于布局转变的邻接矩阵交互[15]。鱼眼变换是一种常见的焦点+上下文技术，通过建立变形函数对空间内的对象进行变形处理，将焦点信息放大，焦点周围的上下文信息相对缩小。图6是对《悲惨世界》人物关系图谱采用鱼眼变换的结果，从图中可以看出，焦点位置的节点被放大，周围其余节点受到挤压，呈现径向放大的效果，有效揭示了局部网络的连接关系。与鱼眼交互不同，邻接矩阵使用行（列）表示对象，若对象之间有联系，则在它们相交的位置进行标识。相较于传统的节点连接形式，邻接矩阵虽然不易理解，但当网络密集时，可有效利用空间，再结合排列算法，就能将网络清晰呈现出来。如图7 所示，邻接矩阵表示后的节点连接图，完全规避了边交叉，提高了网络的可读性。

图6 鱼眼交互

图7 邻接矩阵

3.3 视图层

视图层包括主视图、表格视图、信息视图。主视图呈现网络的拓扑结构，包括多层网络可视化、热力图、成分可视化。表格视图列出节点的相关属性。信息视图包括节点属性信息、边属性信息、网络样式的修改、基于特征参数的直方图过滤等。

（1）多层网络可视化。传统的二维平面无法展示多层网络，而三维空间表示的多层网络能让拓扑结构变得易于观察和理解。WebGL 无需依赖其他插件，就能在浏览器中呈现3D 图形，本文选择的three.js 对其进行了封装，能方便快捷地完成图形的绘制。

（2）热力图。热力图作为一种密度图，使用显著的颜色差异呈现数据的分布情况，利用该特性可以隐喻网络的疏密程度。本文选择的heatmap.js，简单易用，能快速得到一个直观的可视化效果。

（3）成分可视化。使用圆环大小、颜色、角度分别表示成分大小、组别、组别大小。圆环中的节点连接图表示组别间的连接情况。圆环+节点连接图的可视化方式，一方面能有效降低成分间的视觉干扰，另一方面通过其样式能快速获取成分信息。

依据文献[16]的可视化设计原则，圆环半径的计算方式如下：

式中，num 为当前成分的大小，nmin为最小成分的大小，nmax为最大成分的大小，max 为设置的最大半径，min 为设置的最小半径。

圆环角度的计算方式如下：

式中，n 为组别数量，xi为i 类组别的大小。

组别的节点连接图算法步骤如下：

输入：边数据

输出：组别的节点连接图

步骤1 遍历边数据links，通过links.source 对象和links.target 对象，获取组别数组nodes 及组别连接关系数组edges。

步骤2 创建力导向布局，将nodes 和edges 作为布局转换数据，设置相关的布局参数。

步骤3 绘制节点连接图，组别大小编码节点大小，组别颜色编码组别类型。

（4）表格视图。表格视图展示节点的相关属性，包括节点编号，度，度中心性，接近中心性等。选择基于Vue 2.0的组件库Element UI，利用其提供的Table表格和Pagination分页组件，展示节点相关属性，对结果进行筛选排序，分页显示相关数据。

（5）信息视图。利用轻量级的图形用户界面库dat.GUI，显示网络的属性信息，提供定制化的视觉特性设置。对d3的brush设置监听事件，实现基于特征参数的直方图过滤。

4 系统功能比较与案例分析

本文设计并实现了如图8的网络结构可视化系统，通过与Gephi 的功能比较和案例分析验证了系统的合理性和有效性。

图8 系统界面图

4.1 与Gephi的功能比较

4.1.1 布局方式比较

（1）Gephi布局方式

Gephi 提供了高效的布局算法，其强大的OpenGL渲染引擎能够实时分析超大规模的网络。Gephi提供了多种布局方式，包括力导向布局、圆形布局、大图网格布局等，允许用户通过调整布局参数来影响布局效果，图9（a）是力导向布局的结果。

（2）本文布局方式

本系统首先会依据节点的属性对网络进行分层，然后使用圆环表示成分，最后根据成分的结构特征自动选择布局方式（如图9（b））。

图9 布局方式比较

比较：得益于内置OpenGL 引擎和高效算法的支持，Gephi能够实时处理大规模的网络数据，但Gephi不能展示多层网络。本系统的优势体现在：（1）通过对网络分层，能直观展示多层网络结构。（2）圆环表示成分的方法，一方面降低了成分间的视觉干扰，另一方面加快了信息获取的效率。（3）根据成分的结构特征，自动选择布局方式。

4.1.2 交互方式比较

（1）Gephi交互方式

Gephi 作为一款开源强大的交互式可视化工具，提供了丰富的交互操作。例如修改节点、边、标签的样式，对网络进行分割、排序、过滤、组合操作等等。

（2）本系统的交互

本系统根据实际需求，也设计了大量的交互方式。例如，基于特征参数的直方图过滤，以热力图作为概览视图的概览+细节，缓解边交叉的鱼眼交互和邻接矩阵变换。

比较：Gephi作为通用的网络结构可视化工具，功能丰富、适用性强，能满足大部分应用需求。本系统根据实际场景需求，设计了灵活的交互方式，能帮助用户更好地理解数据，发现其中潜在的规律。

4.2 案例分析

本节通过案例分析来验证系统的实用性和有效性。通过豆瓣电影API，获取中国电影、欧美电影、日韩电影的演员关系。分析流程如图10所示。

图10 分析流程图

4.2.1 中外电影合作交流的关键人物

依据电影国籍，将演员划分到中国电影层、欧美电影层、日韩电影层。使用颜色编码网络层，层级间的连线说明演员同时参演了不同类型的电影，如图11 所示。缩放、平移调整浏览视角，发现中国电影层上的某个节点同时还出现在欧美电影层和日韩电影层中。鼠标悬浮到该节点上，显示是“成龙”，即“成龙”是中外电影合作交流的关键人物。本文设计的多层网络可视化，依据节点属性对网络进行分层，探索结果与事实相符，证明了网络分层的合理性和有效性。

图11 网络分层

4.2.2 验证网络基本性质

依据系统的交互逻辑，点击分层网络中的节点进入对应的网络层。图12（a）是中国电影层，从圆环的大小、颜色、角度可以看出各成分的相对大小、组别、组别的相对大小，从节点连接图可以看出各组别间的连接关系，从提示框可以看出各组别的大小信息。本文设计的圆环表示成分的可视化方法，一方面降低了成分间的视觉干扰，另一方面加快了成分信息的获取效率，验证了设计的合理性。

图12 网络性质分析

图12 （b）是最大成分的节点连接图。网络中的“派系”现象，反映出复杂网络的社区结构特性。图12（c）显示了成分的统计信息，该网络由263 个演员构成，存在472 对合作关系，网络密度为0.013 7，即合作关系只能达到理论最大值的1.37%，说明这是一个非常稀疏的网络。网络直径为10，平均路径长度为4.038，说明该网络中距离最远的两个点之间的平均距离为4.038。根据六度分隔理论，最多通过六个人就能够找到任何一个陌生人，说明该网络中也存在小世界效应，即反映了复杂网络的小世界特性。图12（d）是成分的特征参数直方图，从度的统计直方图可以看出演员度数近似服从幂律分布，即少数人有很大的度，大部分人的度很小，反映了复杂网络的无标度特性。以上的分析结果都符合复杂网络理论[17]，验证了设计的合理性。

4.2.3 交互式探索分析

依据系统整体到细节的交互逻辑，在点击圆环后会显示成分的拓扑结构。图13（a）是中国电影层中最大成分的拓扑结构，网络中存在3 个以“成龙”“周星驰”“陈佩斯”为核心的派系。这些派系通过一些关键节点连接在了一起，为了发现这些关键节点，不断调整变换当前位置，同时借助热力图确定当前浏览位置。在浏览至“陈佩斯”和“周星驰”两个派系的交界处时（如图13（b）），发现度很小的“梁咏琪”，却充当了连接两个派系的关键人物。这说明她是这两个派系重要的“桥梁”，失去她就有可能中断派系间的联系。

图13 浏览探索网络结构

在浏览探索网络的过程中，节点重叠和边交叉增加了视觉复杂度，如图14（a）。分别对其使用基于视觉变换的鱼眼交互和基于布局转换的邻接矩阵交互。图14（b）是鱼眼变换后的结果，图中焦点部分的结构被放大，而远离焦点部分的结构被挤压。图14（c）是按度大小排序的邻接矩阵变换，完全规避了节点重叠和边交叉。

过滤可以快速获取网络结构，发现网络中感兴趣的节点。度中心性、接近中心性、介数中心性作为测量网络中心性的不同方法，从不同方面评价了节点的相对重要性[18]。本文借助特征参数直方图，以矩形框选充当输入条件，动态更新网络的拓扑结构，发现网络中的重要节点。图15（a）中获取了度中心性最大的节点“成龙”，说明与“成龙”连接的节点最多。图15（b）获取了接近中心性最大的节点“关之琳”，说明“关之琳”最接近网络的中心位置。图15（c）获取了介数中心性最大的节点“成龙”，说明流经“成龙”的网络流最多。

图14 边交叉中的视觉混淆

图15 特征参数

5 结束语

本文根据需求设计并实现了一个基于B/S构架的网络结构可视化系统。通过与Gephi 的功能比较和案例分析，验证了系统的合理性和有效性。其优点表现在：

（1）系统采用B/S构架，具有部署简单、不依赖特殊环境、跨平台等优点。

（2）针对单层网络无法显示多层网络信息，设计了一种多层网络的可视化方法。

（3）根据网络的结构特点，自动选择布局方式。根据实际的分析需求，提供了大量的交互方式。

但是系统还存在不足：D3采用了SVG的绘图方法，容易引起网页频繁重排和重绘，特别是当网络规模较大时，将极大影响浏览器的性能。未来将使用WebGL 来优化大规模网络的交互问题。