基于D3.js的公安数据间关联关系可视化研究与应用

姚砺 潘敏男

摘 要： 随着中国信息化建设和国民经济的不断发展，加速了社会人口的流动，同时公安机构的各个部门也积累了越来越多的数据。目前这些数据正以阶梯式增长。公安数据包含了大量的关联信息，将这些看似分散、杂乱无章的数据，以一种直观、简明的可视化形式展示出来，能够提高侦查破案和预警能力。本文提出的基于D3.js的可视化方案，将合理地整合有效数据，并利用相关算法，实现关联关系的可视化展示。

关键词： 数据；关联关系；可视化；D3.js

Abstract：With the construction of China's informationization and the continuous development of the national economy the flow of social population has been accelerated. At the same time various departments of public security agencies have also accumulated more and more data. At present these data are increasing in the stepwise way.Public security data contains a large amount of related information. Displaying these seemingly scattered and disorganized data in an intuitive and concise visualization can improve the ability of investigation detection and early warning. The visualization scheme based on D3.js proposed in this paper will integrate valid data rationally and make use of related algorithms to visualize the relationship.

Key words： data；relationships；visualization；D3.js

引言

随着信息技术的不断发展，公安部门积累的数据量日趋增多，其中蕴含信息量也更加丰富，但是由于未能合理利用这些数据，很多数据便被长期闲置并且占用了大量的内存。

随着数据可视化的不断普及，对国内公安机关的数据进行可视化，能够预防和打击犯罪、辅助侦查破案、维护社会安定[1]。

可视化技术是一种计算方法，并且融合了多门优秀学科。该技术能够将符号描述转换成几何描述，呈现出期望的计算结果和仿真效果[2]。

数据可视化经历了复杂的发展过程。在以往的数据可视化过程中，想要将复杂的数据衍生出多种有意义的数据可视化方案，就必须对包括统计学和设计学等多门学科有足够的了解和认知。但是随着信息技术的飞速进步，数据可视化应用的需求量和普及量均已显出递增态势，数据可视化工具也开始出现并日益发展起来。数据可视化工具经历了从用于单一的专业技术并且操作复杂的工具，演变进化为功能集成、能够用于多个专业领域的工具。数据可视化工具的优势在于能够根据使用者的不同需求设计推出符合用户需求的数据可视化方案[3]。

D3.js是一款优秀的数据可视化工具，因其参照了Web标准，生成的框架更具表达性，能够进行生动的可视化展示。同时，D3.js还提供了多种类型的布局函数和可视化方法的接口。D3.js中的布局函数能够根据特定的需求，将初始数据采用合适的布局进行重新映射，转换成新的数据格式，来满足特定类型的图表设定效果[4]。

1 总体设计

1.1 总体功能设计思路

该系统分为三大模块，具体是：综合查询模块、决策分析模块、GIS分析模块。针对这三大模块，本次研究的总体功能设计内容的主旨表述可见如下：

（1）可视化展示。将数据仓库中的数据通过数据抽取、数据清洗加工成需要的关联关系数据，接下来通过可视化工具D3.js，转换成可视化图形呈现出来。

（2）图形的交互处理。在显示可视化图形时，为了便于用户更深入地查询人或物之间的某项关联信息，需要对可视化图形增加用户自定义编辑功能，比如：用户可以根据自身需求，删除或者隐藏与查询要求关联度不大的连接线和连接点。为了提升系统的人性化设计，交互功能还包括：图形整体或者局部的拖拽、缩放、展开收缩隐藏，以及可选择的动画效果。

1.2 数据可视化相关概念

1.2.1 关联关系数据

关联关系数据是数据的一个子类。普通数据的可视化方法也适用于关联关系数据。但是关联关系数据也有异于普通数据的方面，比如：关联关系数据具有统一的数据结构和交换格式，可以实现跨域的数据整合与数据分析[5]。

1.2.2 数据可视化概念

数据可视化是信息可视化与和科学可视化两大领域的融合。数据可视化不仅能够以图形的形式展示数据内容，也能够通过图形发现数据中隐藏的新的关联信息。数据可视化展示的必须是與主题相关的信息，因为展示的信息越多，用户获取自身需要信息的时间就越长，这样不利于数据可视化的高效展示[6]。

1.2.3 D3.js介绍

可视化库D3.js的全称是数据驱动文档（Data-Driven Documents）。D3.js是一个JavaScript库，使用函数式的JavaScript编程风格，可以通过数据来操作文档。并且，还严格遵循Web标准，不依赖于任何框架[7]。

本文采用的是V4版本。相较于之前的版本，V4版本不仅支持SVG，也开始支持Canvas的使用，由于公安数据的特殊性，本文采用的是SVG。

SVG是基于可扩展标记语言（XML）的，可以用来描述二维矢量图形。SVG具有可伸缩性，对一幅SVG图形任意的放大缩小，均不会丢失精度[8]。SVG提供了良好的动画效果和交互效果，通过定义相应的键盘事件或者鼠标事件，再辅以一定的脚本编程，即可做出用户需要的效果。

1.3 公安数据间关联关系可视化的实现框架及流程

根据数据可视化的一般流程，可将框架细分成4个模块，分别是：数据导入模块、算法选择模块、数据映射模块和可视化实现模块。即根据数据对象的类型与应用需求的特点，确定数据内容到图形之间的映射关系，选择合适的数据可视化工具，实现可视化[9]。

公安数据间关联关系的可视化系统将在整体上可为三大层次，具体是：数据层、映射层、可视化层。这里，关于本次研究的总体设计流程则如图1所示。

2 数据可视化的实现

在可视化实现的过程中，数据状态经历了一系列的变化。存储在数据仓库中的原始数据称为用户数据，是数据的最初状态。

接下来，对数据进行抽取。首先确定需要的数据库表和数据字段，然后在目标数据库内创建新表存储数据和相应的字段，并使用存储过程进行维护。由于数据中存在关联关系数据，就需要根据这种关联关系以及数据抽取的调度周期，定时运行存储过程。数据抽取结束后，再对数据展开清洗，去掉不符合要求的数据，留下符合要求的关联关系数据，此时的数据状态又发生了变化，称为标准数据。

根据用户的需求，还要将标准数据转化为JSON格式。JSON是一种轻量级的数据交换格式，数据格式易于解析、易于维护。JSON格式的兼容性很高，能够在不同的平台之间提供有效的数据交换[10]。根据用户的具体需求把JSON格式整理成指定的数组形式用于传输存储，该数据将可以直接应用于公安数据间关联关系可视化系统中。此时数据状态又发生变化，称为可视数据。

2.1 图形算法

公安关联关系数据中包含了大量的个人信息，如：个人的基本信息、个人的虚拟身份、个人的主要行为以及个人的主要活动场所等。当然，关联关系数据中隐藏的大量关联关系也是极具价值的。如：个人与高校之间的关联关系、个人与涉外领馆之间的关联关系等。

为了更趋高效地实现可视化，需根据不同的需求选择合适的图形算法。

2.1.1 点值法

可视化系统中需要创建具有关联关系的人口区域分布点密度图，本系统将采用点值法。

利用点值法展示关联关系人口在地图中的分布情况。首先，将点权值的大小进行固定，图中的每一个子点代表该展示对象的具体数值大小，这些子点形状大小均相同，能够反映这些人口的空间分布情况以及数量特征。在整张图的布局中，通过利用点值法，密度相对较大的地区中，各个子点的展示将不会出现子点与子点重叠的现象。点权值的计算公式如下：

其中，P表示各个区域中密度最大的区域面积，A表示在这个区域中制图对象的数量之和[11]。

2.1.2 力布局算法

力布局能够在粒子级别下，模拟牛顿运动方程。在D3.js中，力布局生成了可扩展的图形约束。连接约束是力布局中的一个重要因素，在连接约束中，有2个很重要的参数：连接强度和连接距离。其中，连接距离可以是函数，也可以是常量。当力布局启动时，就开始连续不断地计算各个结点之间的连接距离，并且与期望的连接距离进行实时比较，然后做出相应的调整。连接强度同样也可以是函数或者常量，可以将连接的强度值设置在0～1之间的范围内。算法设计可概述为：首先预先设置需要的连接距离、连接强度，接着将各个结点连接起来。此处用到的作用力的强度与结点间的距离是成正比的，与弹簧作用力类似。力布局示例即如图2所示。

在该部分的布局中，连接度较高的结点位于布局的中心位置，即为查询的重点；而连接度较低的结点分布在中心位置的四周，即为与查询重点相关联的部分[12]。突出主次关系，为用户的可视化查询提供便利。

2.2 部分效果图展示

本节中展示的效果图，满足了总体功能设计的要求。

2.2.1 个人信息详情图

如图3所示，这是个人信息详情图。采用饼图布局，把个人的详细信息分为三大层次。第一层次也是饼图的最内圈，显示了个人头像、姓名、出生年份、常住地址。第二层次也是饼图的第二圈，显示了基本信息、虚拟身份、关系人员等6个部分。第三层次也是饼图的最外圈，是在第二圈分块的基础上，对6个部分提供进一步细分。共分为33个信息块。

2.2.2 人物之间的关系图

如图4所示，这是人物之间的关系图。将饼图布局和力布局相结合，在个人信息详情图的基础上，扩展呈现多个人之间的关联关系信息。人物之间通过判断最外圈之间信息是否有关联关系，若有，就从中心圆具有关联关系的结点处，生成线段，与具有关联关系的人物图的中心连接。

3 结束语

采用了可视化库D3.js，并研发提出了基于D3.js的公安数据间关联关系可视化方案，将看似杂乱的数据转换成图形显示在屏幕上，使公安内部人员直观洞悉、并发现数据背后隐藏的关联关系，有助于快速精准地定位犯罪同伙，提升侦查破案的速度，并且能够增强社会整体配备的预警能力和治安管理能力。优化可视化算法、加快图形显示速度，将是下一步研究的重点。

参考文献

[1] 李代超，吴升. 面向不同主题的犯罪大数据可视分析[J]. 地球信息科学学报，2014，16（5）：735-745.

[2] 李代超. 犯罪信息可视化研究[D]. 福州：福州大学，2014.

[3] LAHER R. Thoth： Software for data visualization & statistics[J]. Astronomy and Computing，2016 17： 177-185.

[4] 黄冠华，杨鹤标. 基于D3.js的微博舆情分析可视化研究[J]. 软件导刊，2016，15（6）：142-144.

[5] 刘竟，孙薇，袁润. 国内关联数据研究现状及趋势的可视化分析[J]. 图书情报研究，2016，9（2）：70-76.

[6] 张浩，郭灿. 数据可视化技术应用趋势与分类研究[J]. 软件导刊，2012，11（5）：169-172.

[7] 权庆乐，连卫民. 对可视化库D3.js的应用研究[J]. 电子技术与软件工程，2014（18）：203.

[8] DAILEY D FROST J STRAZZULLO D. Building Web applications with SVG[M]. USA：Microsoft Press，2012.

[9] 权鑫. 基于D3.js的数据可视化系统框架设计与实现[D]. 北京：北京交通大学，2016.

[10]SUN Baojun. Comparison and research of JSON and XML[J].Inner Mongolia Science Technology & Economy，2009（12） ：122-126.

[11]STEELE J，ILIINSKY N. 數据可视化之美[M]. 北京：机械工业出版社，2011.

[12]BOSTOCK M OGIEVETSKY V HEER J. D3： Data-driven documents[J]. IEEE Transactions on Visualization and Computer Graphics 2011 17（12）： 2301-2309.