一种二维关系图可视化方法及装置制造方法及图纸

本发明专利技术公开了一种二维关系图可视化方法及装置，首先根据需求的轨道间距离，确定轨道；遍历节点数组，给每个节点设置位置，首先判断节点所属的轨道，然后将对应轨道上的各边中点以及顶点的八个点组成位置组用于放置节点；并依次判断位置组中的位置是否已被其他节点占用；若当前位置组里找不到未被占用的位置，则生成新的8个位置组成位置组，再次从这个位置组里寻找可放置的位置；重复这个步骤，直到找到可用位置为止。将位置组中的可用位置设置给当前节点，将节点按其确定的位置渲染到画布上，并将有关联关系的边渲染到画布上，得到可视化的二维关系图。视化的二维关系图。视化的二维关系图。

【技术实现步骤摘要】
一种二维关系图可视化方法及装置


[0001]本专利技术涉及数据可视化领域，尤其涉及一种二维关系图可视化方法及装置。

技术介绍

[0002]HTML5的出现，给Web前端实现数据可视化带来了变革。借助HTML5的Canvas，Web前端可以画出各式各样的图表，包括关系图。HTML5的canvas元素可以实现画布功能，该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理，拥有实现绘制线条、弧形以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用JavaScript可以控制其每一个像素。HTML5的canvas元素使得浏览器无需Flash或Silverlight等插件就能直接显示图形或者动画图像。
[0003]现有二维关系图的布局方案主要有以下几种：1）随机布局，顾名思义，节点的位置是随机分布的；2）高维数据降维算法布局；3）力导向布局；4）圆环布局，将所有节点布局在一个圆环上；5）辐射布局，以一个节点为中心，其余节点按照与中心点的度数关系排列在不同距离的环上，距离中心点一度的节点布局在与其最近的第一个环上，距离中心点二度的节点布局在第二个环上，以此类推；6）层次布局；7）同心圆布局，以节点某个属性（默认为度数）为依据，该属性值越高、该节点在布局上距离中心位置越近；8）网格布局，将所有节点通过某种指定属性排序后，整齐地放置在网格上；可以看到关系图中包括节点和边两种元素，需要把节点绘制到画布上，再在相互之间有联系的两个节点之间画上边，如果这个边是带方向的，还需要画上箭头。所以将一个关系图绘制到画布上，可以拆解为3个步骤：1）将节点绘制到画布上，2）将边绘制到画布上，3）给边画上箭头。那么对于想要均匀分布且节点之间不互相发生碰撞的关系图，上述布局显然都不合适。
[0004]一般的做法是通过上述的随机布局加上对节点进行碰撞检测来实现。具体做法是：遍历节点数组，给当前节点设置一个随机的位置；比对该节点与已经画到画布上的节点是否发生碰撞；如果发生碰撞，则生成一个新的随机位置、再次与已经画到画布上的节点进行比对，直到该节点与所有已经画到画布上的节点都不发生碰撞为止；将该节点画到画布上。假设关系图中有n个节点，那么对于随机布局加上对节点进行碰撞检测的方案，它的时间复杂度是，空间复杂度是。通过随机布局和碰撞检测来实现均匀分布且节点之间不互相发生碰撞的二维关系图的方案，时间复杂度较高；因为只考虑了节点的位置，而没有考虑边的分布，其最终呈现的可视化图像的线条可能杂乱无章。

技术实现思路

[0005]本专利技术目的在于针对现有技术的不足，提出一种二维关系图可视化方法及装置，提供一种时间复杂度更低的方法及装置；且线条就近画出，呈现的可视化图像更美观、更有条理，得到均匀分布且节点之间不互相发生碰撞的二维关系图。
[0006]本专利技术的目的是通过以下技术方案来实现的：第一方面，本专利技术提供了一种二维
关系图可视化方法，该方法包括以下步骤：（1）根据节点属性及其相互之间的关系构建节点数组；（2）根据需求的轨道间距离，确定轨道；轨道是画布上正方形的边，正方形的中心为画布的中心，所有的节点需要摆放在轨道上，且不能脱离轨道；（3）遍历节点数组，给每个节点设置位置，首先判断节点所属的轨道，然后将对应轨道上的各边中点以及顶点的八个点组成位置组用于放置节点；（4）依次判断位置组中的位置是否已被其他节点占用；若当前位置组里找不到未被占用的位置，则找到画布中第一象限平行于x轴的轨道上距离差距最大的2个相邻节点，以它们之间的中点位置为新位置（x
’
, y
’
），进而生成新的八个位置组成位置组[[x
’
, y
’
], [
‑
x
’
,
ꢀ‑
y
’
], [x
’
,
ꢀ‑
y
’
], [
‑
x
’
, y
’
], [y
’
, x
’
], [
‑
y
’
,
ꢀ‑
x
’
], [y
’
,
ꢀ‑
x
’
], [
‑
y
’
, x
’
]]，再次从这个位置组里寻找可放置的位置；重复这个步骤，直到找到可用位置为止；（5）将位置组中的可用位置设置给当前节点，将节点按其确定的位置渲染到画布上，并将有关联关系的边渲染到画布上，得到可视化的二维关系图。
[0007]进一步地，轨道是由如下函数围起来的正方形的边；其中，f为表示轨道的函数，x，y为画布上轨道横纵坐标，a表示画布上每个象限的轨道长度，根据a的取值，确定轨道。
[0008]进一步地，第一条轨道为a=0，此时轨道为一个点，即原点，第二条轨道为a=d，第三条轨道为a=2d，第三条轨道为a=3d，d表示轨道间距离，依次类推，d的取值根据需求和画布大小共同确定。
[0009]进一步地，在决定节点所属轨道时，将节点均匀分布到各个轨道。
[0010]进一步地，对于本身带有分类信息的关系图数据以节点所属分类为依据来决定节点所属轨道。
[0011]进一步地，位置组的8点组成规则为：1）第一个位置组：[[x, y], [
‑
x,
ꢀ‑
y], [x,
ꢀ‑
y], [
‑
x, y], [0, y], [0,
ꢀ‑
y], [x, 0], [
‑
x, 0]]，其中x=y=a，2）第二个及之后的位置组：[[x
’
, y
’
], [
‑
x
’
,
ꢀ‑
y
’
], [x
’
,
ꢀ‑
y
’
], [
‑
x
’
, y
’
], [y
’
, x
’
], [
‑
y
’
,
ꢀ‑
x
’
], [y
’
,
ꢀ‑
x
’
], [
‑
y
’
, x
’
]]。
[0012]进一步地，当寻找新的位置组时，假设在上找到的距离差距最大的2个相邻节点之间的距离为z，节点半径为r，r＞0，当时，表示当前轨道再也放不下任何一个节点了，那么通过缩小r来实现将节点放到目标轨道，且不与其他节点发生碰撞的目标；重新设置的r为：。
[0013]第二方面，本专利技术提供了一种二维关系图可视化装置，包括存储器和一个或多个处理器，所述存储器中存储有本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种二维关系图可视化方法，其特征在于，该方法包括以下步骤：（1）根据节点属性及其相互之间的关系构建节点数组；（2）根据需求的轨道间距离，确定轨道；轨道是画布上正方形的边，正方形的中心为画布的中心，所有的节点需要摆放在轨道上，且不能脱离轨道；（3）遍历节点数组，给每个节点设置位置，首先判断节点所属的轨道，然后将对应轨道上的各边中点以及顶点的八个点组成位置组用于放置节点；（4）依次判断位置组中的位置是否已被其他节点占用；若当前位置组里找不到未被占用的位置，则找到画布中第一象限平行于x轴的轨道上距离差距最大的2个相邻节点，以它们之间的中点位置为新位置（x
’
, y
’
），进而生成新的八个位置组成位置组[[x
’
, y
’
], [
‑
x
’
,
ꢀ‑
y
’
], [x
’
,
ꢀ‑
y
’
], [
‑
x
’
, y
’
], [y
’
, x
’
], [
‑
y
’
,
ꢀ‑
x
’
], [y
’
,
ꢀ‑
x
’
], [
‑
y
’
, x
’
]]，再次从这个位置组里寻找可放置的位置；重复这个步骤，直到找到可用位置为止；（5）将位置组中的可用位置设置给当前节点，将节点按其确定的位置渲染到画布上，并将有关联关系的边渲染到画布上，得到可视化的二维关系图。2.根据权利要求1所述的一种二维关系图可视化方法，其特征在于，轨道是由如下函数围起来的正方形的边；其中，f为表示轨道的函数，x，y为画布上轨道横纵坐标，a表示画布上每个象限的轨道长度，根据a的取值，确定轨道。3.根据权利要求2所述的一种二维关系图可视化方法，其特征在于，第一条轨道为a=0，此时轨道为一个点，即原点，第二条轨道为a=d，第三条轨道为a=2d，第三条轨道为a=3d，d表示轨道间距离，依次类推，d的取值根据需求和画布大小共同确定。4.根据权利要求1所述的一种二维关系图可视化方法...

【专利技术属性】
技术研发人员：宋飞翔，李劲松，张波，周天舒，田雨，
申请(专利权)人：之江实验室，
类型：发明
国别省市：