CN117271936B - 基于Web的大数据关系图谱渲染方法、系统及设备 - Google Patents
基于Web的大数据关系图谱渲染方法、系统及设备 Download PDFInfo
- Publication number
- CN117271936B CN117271936B CN202311563147.7A CN202311563147A CN117271936B CN 117271936 B CN117271936 B CN 117271936B CN 202311563147 A CN202311563147 A CN 202311563147A CN 117271936 B CN117271936 B CN 117271936B
- Authority
- CN
- China
- Prior art keywords
- map
- data
- rendered
- coordinate
- coordinate data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 91
- 238000000034 method Methods 0.000 title claims abstract description 46
- 238000012545 processing Methods 0.000 claims abstract description 71
- 238000004364 calculation method Methods 0.000 claims abstract description 40
- 238000007781 pre-processing Methods 0.000 claims abstract description 13
- 238000007499 fusion processing Methods 0.000 claims abstract description 11
- 230000000007 visual effect Effects 0.000 claims abstract description 10
- 238000012800 visualization Methods 0.000 claims description 29
- 238000005457 optimization Methods 0.000 claims description 16
- 238000001914 filtration Methods 0.000 claims description 14
- 238000004422 calculation algorithm Methods 0.000 claims description 10
- 230000004927 fusion Effects 0.000 claims description 3
- 230000008569 process Effects 0.000 description 14
- 238000010586 diagram Methods 0.000 description 9
- 238000000926 separation method Methods 0.000 description 5
- 230000003139 buffering effect Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 238000001228 spectrum Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000013138 pruning Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/904—Browsing; Visualisation therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Image Generation (AREA)
Abstract
本发明实施例公开了一种基于Web的大数据关系图谱渲染方法和系统,其中,所述方法包括坐标计算步骤和图像渲染步骤,坐标计算步骤和图像渲染步骤的实现由不同的模块执行,坐标计算步骤包括:获取待渲染图谱的原始数据,对原始数据进行数据预处理,以获取与待渲染图谱对应的关系图谱数据,对关系图谱数据进行属性添加处理,以获取带属性的关系图谱数据,对带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并存储;图像渲染步骤包括:在待渲染图谱的坐标数据的缓存的情况下,对坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线。采用本发明实施例,可以提高关系图谱的渲染效率。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种基于Web的大数据关系图谱渲染方法、系统及计算机设备。
背景技术
随着互联网和数字化进程在各个领域的发展,大数据分析和可视化展示的需求与日俱增,基于web构建的关系图谱的性能要求也越来越高。在相关技术方案中,关系图谱在web端多采用canvas绘图的方式进行渲染展示,其实现的一般流程为:前端先从后端请求图谱关系数据,然后在web客户端上占用浏览器资源进行数据加工处理和坐标换算,最后通过canvas指令式绘图系统将之渲染成图形。在上述实现方案中,因为聚类关系越复杂,布局算法的时间复杂度越高;并且,图元数量越多、图元越大、动画层覆盖面越广,渲染速度越慢;在客户浏览器版本越旧、显卡性能越差的情况下,对web worker、Offscreencanvas等业界前沿优化方式的支持就越差。从而导致复杂聚类关系图谱的渲染和加载速度变得无法忍受,例如,在大于2万图元时,加载速度可能会慢至几分钟,甚至导致浏览器崩溃。
发明内容
基于此,有必要针对上述问题,提出了一种基于Web的大数据关系图谱渲染方法、系统及计算机设备。
在本发明的第一部分,提供了一种基于Web的大数据关系图谱渲染方法。
所述方法包括:
坐标计算步骤和图像渲染步骤,所述坐标计算步骤和图像渲染步骤的实现由不同的模块执行;
其中,所述坐标计算步骤包括:
在待渲染图谱大于预设的临界值的情况下,获取待渲染图谱的原始数据,对所述原始数据进行数据预处理,以获取与所述待渲染图谱对应的关系图谱数据,其中,所述数据预处理包括数据拼接和数据过滤;
对所述关系图谱数据进行属性添加处理,以获取带属性的关系图谱数据,其中,添加的第一属性参数包括添加大小、颜色、形状、自定义状态、自定义节点和连接线位置中的一个或多个;
对所述带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并存储;
图像渲染步骤包括:
在待渲染图谱的坐标数据的缓存的情况下,对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线。
可选的,所述图像渲染步骤还包括:在待渲染图谱的坐标数据不存在的情况下,判断所述待渲染图谱的节点数量是否大于或等于预设的临界值,在所述待渲染图谱的节点数量大于或等于预设的临界值的情况下,对所述待渲染图谱进行性能优化处理,采用第二属性参数对所述优化后的待渲染图谱进行可视化处理,以生成对应的坐标数据;在所述待渲染图谱小于预设的临界值的情况下,采用所述第一属性参数对所述待渲染图谱进行可视化处理,以生成对应的坐标数据;根据生成的坐标数据执行所述对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线的步骤。
可选的,所述在待渲染图谱大于预设的临界值的情况下,获取待渲染图谱的原始数据的步骤,还包括:从存储有关系图谱数据的数据库中,获取节点数量大于预设的临界值的关系图谱的标识id,根据获取到的标识id获取待渲染图谱的原始数据。
可选的,所述从存储有关系图谱数据的数据库中,获取节点数量大于预设的临界值的关系图谱的标识id,根据获取到的标识id获取待渲染图谱的原始数据的步骤,还包括:对获取到的标识id进行遍历,对遍历到的标识id对应的待渲染图谱执行坐标计算步骤。
可选的,所述待渲染图谱的原始数据包括节点以及节点之间的连接关系;所述对所述原始数据进行数据预处理,以获取与所述待渲染图谱对应的关系图谱数据的步骤,还包括:将原始数据转换成树形结构,并对树形结构的每一层添加层字段;和/或,对原始数据进行数据过滤处理,以剔除不包含连接关系的孤立节点、以及无效连接关系。
可选的,所述对所述带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并存储的步骤,还包括:将所述带属性的关系图谱数据输入到G6可视化库中进行可视化处理,获取与待渲染图谱对应的坐标数据,其中,对所述带属性的关系图谱数据添加预设的第一layout配置参数,并经过G6图布局算法处理,获取与待渲染图谱对应的坐标数据。
可选的,所述坐标数据包括节点坐标和边坐标,所述在待渲染图谱的坐标数据的缓存的情况下,对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线的步骤,还包括:根据融合之后的坐标数据,对节点进行显示,并根据边坐标绘制节点之间的连接线,以完成对待渲染图谱的图谱渲染。
可选的,所述在所述待渲染图谱的节点数量大于或等于预设的临界值的情况下,对所述待渲染图谱进行性能优化处理,采用第二属性参数对所述优化后的待渲染图谱进行可视化处理,以生成对应的坐标数据的步骤,还包括:根据待渲染图谱的节点数量、Web版本、图布局方式确定第二属性参数,采用第二属性参数对所述待渲染图谱进行属性添加,以得到带属性的待渲染图谱;采用第二layout配置参数对带属性的待渲染图谱进行可视化处理,生成与待渲染图谱对应的坐标数据。
在本发明的第二部分,提供了一种基于Web的大数据关系图谱渲染系统,所述系统包括坐标计算模块和图谱渲染模块,其中,
所述坐标计算模块用于:在待渲染图谱大于预设的临界值的情况下,获取待渲染图谱的原始数据,对所述原始数据进行数据预处理,以获取与所述待渲染图谱对应的关系图谱数据,其中,所述数据预处理包括数据拼接和数据过滤;
对所述关系图谱数据进行属性添加处理,以获取带属性的关系图谱数据,其中,添加的第一属性参数包括添加大小、颜色、形状、自定义状态、自定义节点和连接线位置中的一个或多个;
对所述带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并存储;
所述图谱渲染模块用于:在待渲染图谱的坐标数据的缓存的情况下,对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线。
在本发明的第三部分,提供了一种计算机设备,其中,所述计算机设备包括存储器和处理器,所述存储器有可执行代码,当所述可执行代码在所述处理器上运行以实现如本发明的第一部分所述的基于Web的大数据关系图谱渲染方法。
采用本发明实施例,具有如下有益效果:
采用了上述基于Web的大数据关系图谱渲染方法、系统及计算机设备之后,在需要对关系图谱尤其是大数据量的关系图谱进行图谱渲染的时候,通过坐标计算模块和图谱渲染模块对关系图谱进行渲染,其中,将关系图谱的“坐标计算”和“图谱渲染”这两个处理过程从物理层面分离,分别放置于两个完全不同的模块中,兼容“坐标计算”和“图谱渲染”两个步骤的“分离”与“不分离”两种模式,灵活性极高。进一步的,在坐标计算模块中,在待渲染图谱大于预设的临界值的情况下,获取待渲染图谱的原始数据,对所述原始数据进行数据预处理,以获取与所述待渲染图谱对应的关系图谱数据,其中,所述数据预处理包括数据拼接和数据过滤;对所述关系图谱数据进行属性添加处理,以获取带属性的关系图谱数据,其中,添加的第一属性参数包括添加大小、颜色、形状、自定义状态、自定义节点和连接线位置中的一个或多个;对所述带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并存储。在图像渲染模块中,在待渲染图谱的坐标数据的缓存的情况下,对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线,可以在“有坐标数据预缓存”和“无坐标数据预缓存”两种情况下,根据节点数量、关系复杂度、图谱关系类型等条件的不同,提供不同的数据加工处理流程,并最终用最优化的方式将数据渲染为视图,从而将大数据量关系图谱的渲染和加载速度,从分钟级降至秒级,实现了性能的巨大提升。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
其中:
图1为一个实施例中一种基于Web的大数据关系图谱渲染系统的组成示意图;
图2为一个实施例中一种坐标计算模块的结构示意图;
图3为一个实施例中一种图像渲染模块的结构示意图;
图4为一个实施例中坐标计算步骤的流程示意图;
图5为一个实施例中图像渲染步骤的流程示意图;
图6为一个实施例中运行上述基于Web的大数据关系图谱渲染方法的计算机设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
在本实施例中,提供了一种基于Web的大数据关系图谱渲染系统以及基于该系统的基于Web的大数据关系图谱渲染方法,提供了对大数据关系图谱的可视化系统,提高了图谱数据的渲染效率。
上述基于Web的大数据关系图谱渲染系统和方法的实现,可以是基于Canvas的图可视化引擎G6,G6提供了一系列便于使用的图可视化模板,同时提供了图形、布局、交互与事件、动画、图算法、插件的个性化自定义。
Canvas是Html5提供的新标签,用来渲染图形和动画。
常见的canvas性能优化方式有:
(1)压缩图形大小。每个图形都是一个个像素点构成,图形越大,需要的像素点就越多。浏览器1秒内可以完成60次图像绘制,意味着每一帧的绘制时间约为16.67ms。绘制一个半径100px的圆,肯定比绘制一个半径10px的圆更加耗时。压缩图形大小,的确可以提升渲染速度。但真实的图谱是有特定展示需求的,若要保证文字清晰度,canvas中text类型的字体大小至少需要达到8px才能在放大后不显得模糊。一个需要展示较长文字的气泡节点,直径一般不会小于30px。单纯靠压缩图形面积来提升性能,终会遇到瓶颈。
(2)优化布局算法。G6提供了非常丰富的内置图算法。其中时间复杂度最低的是Random随机模式,运算速度极快,但会造成节点重叠。基于d3.js的经典力导向布局方法可以避免节点重叠,但对于聚类没有很好的支持。G6自研的ComboForce布局算法,可以将不同combo尽可能聚集,同时避免combo之间重叠。但combo的管理需要维护一个嵌套的树形结构,每次查询、更新等操作都要递归遍历树。当节点数大于300个,聚类多于3个,节点和聚类之间的边界计算、碰撞测试就会变得复杂,会造成明显页面卡顿,完全无法满足大数据(大于2000个节点)下聚类关系图谱的展示需要。
(3)web worker叠加OffscreenCanvas。Canvas是一个将API和DOM结合在一起的标签,这意味着所有计算和渲染将在同一个线程中运行,非常容易导致卡顿。目前针对渲染速度比较前沿的优化方式,是使用OffscreenCanvas(离屏Canvas),解耦DOM和Canvas API,使canvas在web worker环境下运行变为可能。Web worker是一个运行在浏览器后台的JavaScript脚本,独立于其他脚本,不会影响页面的性能。在Web worker中运行OffscreenCanvas,可以将大量计算移至后台,实现主线程与渲染线程的分离,极大提升渲染速度。这也是G6最新版正在使用的优化方式。但OffscreenCanvas作为一个实验中的新特性,直至chrome 86版才默认开启,在chrome 67版手动开启“实验室”功能也能使用,而在更低的版本不予支持。这使得更具兼容性的性能优化变得异常困难。
具体的,请参见图1,给出了上述基于Web的大数据关系图谱渲染系统的结构示意图,其中,该系统包括坐标计算模块101和图谱渲染模块102,其中,坐标计算模块101用于对图谱的坐标进行计算和存储,图像渲染模块102用于根据坐标对图谱进行渲染,即将图谱渲染为可视化的视图。
在本实施例中,上述坐标计算模块101和图谱渲染模块102是两个独立的模块,可独立部署,也可集中部署在一个项目中。
下面分别对两个模块的具体实施方式进行阐述。
坐标计算模块101的实现可以是基于G6可视化库和常用前端框架实现,可以批量计算、缓存关系图谱中的节点和节点之间的连接线在画布中的坐标。其中,关系图谱可以是一企业之间的股权关系的关系图谱,其中每一个节点就是一个企业,节点之间的连接线就是企业之间的投资比例等股权关系。
进一步的,请参见图2,给出了坐标计算模块101的结构示意图,其中,坐标计算模块包括了源数据处理单元1011、属性处理单元1012和可视化库1013。
其中,源数据处理单元1011用于接收http请求的原始json数据,并输出经过加工处理后的、渲染所需的标准数据结构(关系图谱数据,mapData)。该关系图谱数据(mapData)需包括关系图谱所有节点信息及节点之间的关系图谱数据,此处用mapData进行标识。
属性处理单元1012用于对输入初步加工后的关系图谱数据,根据不同判断条件添加不同属性数据,输出完整的G6库所需的图谱数据结构(带属性的关系图谱数据)。属性包括但不限于:大小、颜色、形状、自定义状态、自定义节点、连接线位置、连接线样式等。
具体实施中,源数据处理单元1011、属性处理单元1012之间并没有明确的顺序关系,可以是源数据处理单元1011在前、属性处理单元1012在后,也可以是源数据处理单元1011在后、属性处理单元1012在前。
可视化库1013用于可视化框架的处理,也可以替换为其他算法库。搭载源数据处理单元1011的前端框架可选用react、vue、angular,或其他任意js框架。
下面对坐标计算模块101具体执行的步骤和过程进行阐述。
在坐标计算模块101中,在对关系图谱进行坐标计算的过程中,执行如图4所示的步骤:
步骤S101:在需要进行关系图谱计算的情况下,从关系图谱的数据库中,获取节点数量大于预设的临界值的关系图谱的标识id;
其中关系图谱的标识id用于标识关系图谱的标号,可以用于查找该关系图谱。
步骤102:根据标识id获取待渲染图谱的原始数据(data);
需要说明的是,在本步骤中,如果遇到错误并不阻塞进程的执行,只记录并打印错误,可以在后续图谱渲染的过程中再进行处理。
步骤S103:对原始数据(data)进行预处理,以获取经过处理之后的有效的关系图谱数据(mapData)。
这里,对原始数据(data)的处理包括数据拼接、数据过滤。这个步骤的执行是源数据处理单元1011完成的。
其中,对数据进行数据拼接和数据过滤的具体过程如下:
获取待渲染图谱的原始数据(data);其中,原始数据(data)的数据结构为对象,包括全部节点组成的对象数组nodes,和所有节点关系组成的对象数组links。nodes数组中每一个node对象都包含独一无二的id,和其他节点相关信息。links数组中的每一条link边对象,都包含独一无二的id,和sourceId和targetId。sourceId表示带箭头的连接线从哪个节点出发,targetId表示连接线箭头指向哪个节点。
对通过遍历links的sourceId和targetId,将原始数据(data)处理为树形结构,分层添加level字段。
如果一个节点同时出现在多个层级,则以最小层级为准。
如果一个节点出现在多条边的sourceId中,代表这个节点的出度大。如果一个节点出现在多条边的targetId中,代表这个节点的入度大。可给node对象添加不同字段记录出度和入度。
进一步的,在对原始数据(data)进行数据过滤的时候,第一次过滤,过滤掉没有被任何link的sourceId和targetId所连接的孤立节点。第二次过滤,过滤掉link中sourceId和targetId代表的节点不存在于nodes数组中的无效断边。在其它实施例中,还添加其他业务需要的过滤条件进行过滤。
步骤S104:对关系图谱数据(mapData)进行属性添加处理,以得到带属性的关系图谱数据(G6MapData)。
其中,将关系图谱数据(mapData)输入到属性处理单元1012中,添加大小、颜色、形状、自定义状态、自定义节点、连接线位置等个性化属性参数,输出带属性的关系图谱数据(G6MapData)。
步骤S105:对带属性的关系图谱数据(G6MapData)进行可视化处理,获取对应的坐标数据。
其中,将带属性的关系图谱数据(G6MapData)输入到可视化库1013中,加入第一layout配置参数,其中,第一layout配置是默认的参数,然后,经过G6图布局算法处理,得到最终可视化以后的坐标,即为与上述待渲染图谱对应的坐标数据。
步骤S106:根据待渲染图谱的标识id对坐标数据进行存储。
需要说明的是,在本步骤中,存储的坐标数据包括节点坐标和边坐标,节点坐标包括x坐标和y坐标。边坐标需包含起点x、y坐标,和终点x、y坐标。全部坐标将转化为string格式输出,并上传至服务器或数据库中进行存储(也可以是缓存)。
需要说明的是,在本实施例中,坐标计算模块101可以在需要进行图谱渲染的情况下,预先对相关的关系图谱的坐标进行计算和缓存,或者在另一个进程中进行处理,以提高对关系图谱进行可视化渲染的效率。也就是说,这里可以对所有查找到的标识id对应的关系图谱分别进行坐标的计算,直至所有标识id的关系图谱的坐标数据均已经获取。
进一步的,在图谱渲染模块102中,基于G6可视化库和常用前端框架,用于在“有坐标数据预缓存”和“无坐标数据预缓存”两种情况下,根据节点数量、关系复杂度、图谱关系类型等条件的不同,提供不同的数据加工处理流程,并最终用最优化的方式将数据渲染为视图。
具体的,请参见图3,给出了图谱渲染模块102的结构示意图,其中,图谱渲染模块102包括源数据处理单元1021、属性处理单元1022、性能优化单元1023、核心渲染单元1024组成。
其中,源数据处理单元1021和属性处理单元1022的顺序可颠倒,其在实现功能上与坐标计算模块101的功能是相同的,但是隶属于不同的模块中。其具体的功能在这里不进行赘述。
性能优化层1023输入G6所需的标准的带属性的关系图谱数据(G6MapData),输出差异性的G6图谱layout布局配置参数。性能优化可选项有:图元尺寸的适应性缩小、关闭动画、取消连接线上的文字旋转、开启web-worker、开启GPU渲染、开启剪枝、节点信息隐藏等。各优化项可自由搭配、修改配置。
核心渲染单元1024由G6可视化库和前端常用框架构成,用于获取G6可用的标准的带属性的关系图谱数据(G6MapData)和layout布局配置,并进行最终图谱渲染。其中,前端常用框架可以是React、Vue、Angular中的任意一种,或js源生代码亦可。
下面对图谱渲染模块102的具体执行过程进行阐述。
在坐标计算模块101中完成了对坐标数据的计算之后,即可进入到图谱渲染模块102中进行图谱的渲染。
具体的,请参见图5,图谱渲染的步骤包括:
步骤S201:根据待渲染图谱对应的标识id获取该关系图谱存储的坐标数据,同时获取该标识id对应的真实图谱数据。
步骤S202:对数据依次经过源数据处理、属性处理,输出标准的带属性的关系图谱数据(G6MapData)。
步骤S203:判断待渲染图谱的坐标数据的缓存是否存在,若存在,执行步骤S204:基于坐标数据进行坐标融合处理,并根据融合处理之后的坐标数据绘制节点以及节点之间的连接线,以渲染待渲染图谱的可视化图谱。
其中,进行坐标融合之后的坐标数据对,为G6最终可渲染数据,因此可以跳过G6的图布局运算过程,直接进入图谱渲染步骤。先按照坐标将图谱节点显示出来,再自动根据节点的坐标和线的连接关系绘制连接线。最终渲染出完整图谱。
若不存在,执行步骤S205:判断待渲染图谱的节点数量是否大于预设的临界值,若大于,则执行步骤S206中的性能优化步骤,若小于,则执行执行步骤S207中的可视化处理步骤;并均执行步骤S208中的图谱渲染步骤。
其中,步骤S206:根据数据量、浏览器版本、图布局方式不同,采取不同性能优化方法调整G6MapData中图谱属性(第二属性参数),并生成新的layout配置文件(第二layout配置参数)。
步骤S207:直接使用默认layout配置(第一layout配置参数)。
步骤S208:根据带属性的关系图谱数据(G6MapData)和第一layout配置参数或第二layout配置参数进行G6可视化处理,先生成待渲染图谱的坐标数据,在根据坐标数据进行图谱的渲染。
其中,在不存在坐标数据的缓存的情况下,图谱渲染的耗时会明显增长。
通过上述坐标计算模块和图谱渲染模块对关系图谱进行渲染,尤其是针对数据量较大的情况,可以绕开单纯解决canvas渲染速度、提升算法性能等传统前端优化思路,通过将关系图谱的“坐标计算”和“图谱渲染”这两个处理过程从物理层面分离,分别放置于两个完全不同的模块中,兼容“坐标计算”和“图谱渲染”两个步骤的“分离”与“不分离”两种模式,灵活性极高,也极大降低了图谱组件复用和业务接入的成本。
进一步的,在一个实施例中,还可以将计算线程与渲染线程分离,最终实现渲染和加载速度的巨大提升。
上述系统和方法的实现,可以构建于任何前端框架之上,不限于react、angular、vue。且可以根据浏览器版本不同采取不同的流水线数据加工方式,兼容性极强。应用这种系统和方法,能将大数据量关系图谱的渲染和加载速度,从分钟级降至秒级,实现了性能的巨大提升。
图6示出了一个实施例中实现上述基于Web的大数据关系图谱渲染的计算机设备的内部结构图。该计算机设备具体可以是终端,也可以是服务器。如图6所示,该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中,存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统,还可存储有计算机程序,该计算机程序被处理器执行时,可使得处理器实现上述方法。该内存储器中也可储存有计算机程序,该计算机程序被处理器执行时,可使得处理器执行上述方法。本领域技术人员可以理解,图6中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一非易失性计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink) DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。
Claims (9)
1.一种基于Web的大数据关系图谱渲染方法,其特征在于,所述方法包括:
坐标计算步骤和图像渲染步骤,所述坐标计算步骤和图像渲染步骤的实现由不同的模块执行;
其中,所述坐标计算步骤包括:
在待渲染图谱的节点数量大于预设的临界值的情况下,获取待渲染图谱的原始数据,对所述原始数据进行数据预处理,以获取与所述待渲染图谱对应的关系图谱数据,其中,所述数据预处理包括数据拼接和数据过滤;
对所述关系图谱数据进行属性添加处理,以获取带属性的关系图谱数据,其中,添加的第一属性参数包括添加大小、颜色、形状、自定义状态、自定义节点和连接线位置中的一个或多个;
对所述带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并进行缓存;
图像渲染步骤包括:
获取待渲染图谱对应的标识id,根据获取到的标识id确定待渲染图谱的坐标数据的缓存是否存在,在待渲染图谱的坐标数据的缓存存在的情况下,对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线;
在待渲染图谱的坐标数据的缓存不存在的情况下,判断所述待渲染图谱的节点数量是否大于或等于预设的临界值,在所述待渲染图谱的节点数量大于或等于预设的临界值的情况下,对所述待渲染图谱进行性能优化处理,采用第二属性参数对所述优化后的待渲染图谱进行可视化处理,以生成对应的坐标数据;在所述待渲染图谱小于预设的临界值的情况下,采用所述第一属性参数对所述待渲染图谱进行可视化处理,以生成对应的坐标数据;根据生成的坐标数据执行所述对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线的步骤。
2.根据权利要求1所述的基于Web的大数据关系图谱渲染方法,其特征在于,所述在待渲染图谱大于预设的临界值的情况下,获取待渲染图谱的原始数据的步骤,还包括:
从存储有关系图谱数据的数据库中,获取节点数量大于预设的临界值的关系图谱的标识id,根据获取到的标识id获取待渲染图谱的原始数据。
3.根据权利要求2所述的基于Web的大数据关系图谱渲染方法,其特征在于,所述从存储有关系图谱数据的数据库中,获取节点数量大于预设的临界值的关系图谱的标识id,根据获取到的标识id获取待渲染图谱的原始数据的步骤,还包括:
对获取到的标识id进行遍历,对遍历到的标识id对应的待渲染图谱执行坐标计算步骤。
4.根据权利要求1所述的基于Web的大数据关系图谱渲染方法,其特征在于,所述待渲染图谱的原始数据包括节点以及节点之间的连接关系;
所述对所述原始数据进行数据预处理,以获取与所述待渲染图谱对应的关系图谱数据的步骤,还包括:
将原始数据转换成树形结构,并对树形结构的每一层添加层字段;
和/或,对原始数据进行数据过滤处理,以剔除不包含连接关系的孤立节点、以及无效连接关系。
5.根据权利要求1所述的基于Web的大数据关系图谱渲染方法,其特征在于,所述对所述带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并存储的步骤,还包括:
将所述带属性的关系图谱数据输入到G6可视化库中进行可视化处理,获取与待渲染图谱对应的坐标数据,其中,对所述带属性的关系图谱数据添加预设的第一layout配置参数,并经过G6图布局算法处理,获取与待渲染图谱对应的坐标数据。
6.根据权利要求1所述的基于Web的大数据关系图谱渲染方法,其特征在于,所述坐标数据包括节点坐标和边坐标,
所述在待渲染图谱的坐标数据的缓存的情况下,对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线的步骤,还包括:
根据融合之后的坐标数据,对节点进行显示,并根据边坐标绘制节点之间的连接线,以完成对待渲染图谱的图谱渲染。
7.根据权利要求2所述的基于Web的大数据关系图谱渲染方法,其特征在于,所述在所述待渲染图谱的节点数量大于或等于预设的临界值的情况下,对所述待渲染图谱进行性能优化处理,采用第二属性参数对所述优化后的待渲染图谱进行可视化处理,以生成对应的坐标数据的步骤,还包括:
根据待渲染图谱的节点数量、Web版本、图布局方式确定第二属性参数,采用第二属性参数对所述待渲染图谱进行属性添加,以得到带属性的待渲染图谱;
采用第二layout配置参数对带属性的待渲染图谱进行可视化处理,生成与待渲染图谱对应的坐标数据。
8.一种计算机设备,所述计算机设备包括存储器和处理器,所述存储器有可执行代码,当所述可执行代码在所述处理器上运行以实现如权利要求1至7任一所述的基于Web的大数据关系图谱渲染方法。
9.一种基于Web的大数据关系图谱渲染系统,其特征在于,所述系统包括坐标计算模块和图谱渲染模块,其中,
所述坐标计算模块用于:在待渲染图谱的节点数量大于预设的临界值的情况下,获取待渲染图谱的原始数据,对所述原始数据进行数据预处理,以获取与所述待渲染图谱对应的关系图谱数据,其中,所述数据预处理包括数据拼接和数据过滤;对所述关系图谱数据进行属性添加处理,以获取带属性的关系图谱数据,其中,添加的第一属性参数包括添加大小、颜色、形状、自定义状态、自定义节点和连接线位置中的一个或多个;对所述带属性的关系图谱数据进行可视化处理,获取与待渲染图谱对应的坐标数据并进行缓存;
所述图谱渲染模块用于:获取待渲染图谱对应的标识id,根据获取到的标识id确定待渲染图谱的坐标数据的缓存是否存在,在待渲染图谱的坐标数据的缓存存在的情况下,对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线;在待渲染图谱的坐标数据的缓存不存在的情况下,判断所述待渲染图谱的节点数量是否大于或等于预设的临界值,在所述待渲染图谱的节点数量大于或等于预设的临界值的情况下,对所述待渲染图谱进行性能优化处理,采用第二属性参数对所述优化后的待渲染图谱进行可视化处理,以生成对应的坐标数据;在所述待渲染图谱小于预设的临界值的情况下,采用所述第一属性参数对所述待渲染图谱进行可视化处理,以生成对应的坐标数据;根据生成的坐标数据执行所述对所述坐标数据进行融合处理,并根据融合后的坐标数据绘制节点以及节点之间的连接线。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311563147.7A CN117271936B (zh) | 2023-11-22 | 2023-11-22 | 基于Web的大数据关系图谱渲染方法、系统及设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311563147.7A CN117271936B (zh) | 2023-11-22 | 2023-11-22 | 基于Web的大数据关系图谱渲染方法、系统及设备 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN117271936A CN117271936A (zh) | 2023-12-22 |
CN117271936B true CN117271936B (zh) | 2024-03-12 |
Family
ID=89209115
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311563147.7A Active CN117271936B (zh) | 2023-11-22 | 2023-11-22 | 基于Web的大数据关系图谱渲染方法、系统及设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117271936B (zh) |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111177396A (zh) * | 2019-11-13 | 2020-05-19 | 浙江广播电视集团 | 结合知识图谱的篮球赛事投篮事件自动分析和可视化方法 |
CN113190612A (zh) * | 2021-07-01 | 2021-07-30 | 武汉华信数据系统有限公司 | 用于人机交互系统的数据管理方法及数据管理装置 |
CN113792240A (zh) * | 2021-09-23 | 2021-12-14 | 上海淇玥信息技术有限公司 | 一种页面加载的方法、装置及电子设备 |
CN115964512A (zh) * | 2022-12-26 | 2023-04-14 | 四川蜀天梦图数据科技有限公司 | 一种知识图谱多场景关系绘制的方法和装置 |
WO2023116565A1 (zh) * | 2021-12-21 | 2023-06-29 | 中电信数智科技有限公司 | 智能设计网络安全架构图的方法 |
-
2023
- 2023-11-22 CN CN202311563147.7A patent/CN117271936B/zh active Active
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111177396A (zh) * | 2019-11-13 | 2020-05-19 | 浙江广播电视集团 | 结合知识图谱的篮球赛事投篮事件自动分析和可视化方法 |
CN113190612A (zh) * | 2021-07-01 | 2021-07-30 | 武汉华信数据系统有限公司 | 用于人机交互系统的数据管理方法及数据管理装置 |
CN113792240A (zh) * | 2021-09-23 | 2021-12-14 | 上海淇玥信息技术有限公司 | 一种页面加载的方法、装置及电子设备 |
WO2023116565A1 (zh) * | 2021-12-21 | 2023-06-29 | 中电信数智科技有限公司 | 智能设计网络安全架构图的方法 |
CN115964512A (zh) * | 2022-12-26 | 2023-04-14 | 四川蜀天梦图数据科技有限公司 | 一种知识图谱多场景关系绘制的方法和装置 |
Also Published As
Publication number | Publication date |
---|---|
CN117271936A (zh) | 2023-12-22 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108958736B (zh) | 页面生成方法、装置、电子设备及计算机可读介质 | |
CN111595850B (zh) | 切片缺陷检测方法、电子装置及可读存储介质 | |
US9710430B2 (en) | Representation of datasets using view-specific visual bundlers | |
US10176627B2 (en) | Tree-based graphics primitive rendering | |
US9953443B2 (en) | Interactive, adaptive level-of-detail in 2.5D treemaps | |
US10650559B2 (en) | Methods and systems for simplified graphical depictions of bipartite graphs | |
MXPA04004405A (es) | Sistema para hospedar objetos de diseno/presentacion grafica. | |
US20130328898A1 (en) | Render Tree Caching | |
CN114417064A (zh) | 数据处理方法、装置、计算机设备、存储介质 | |
CN104850388A (zh) | 网页绘制方法及装置 | |
CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
CN113010612A (zh) | 一种图数据可视化构建方法、查询方法及装置 | |
US20180316587A1 (en) | Automated analysis and recommendations for highly performant single page web applications | |
CN114048329A (zh) | 知识图谱的构建与展示方法、装置、电子设备和介质 | |
CN112015378A (zh) | 骨架屏页面生成方法、装置、计算机设备和存储介质 | |
CN115731313A (zh) | Svg格式的图片的处理方法、装置、设备、介质及产品 | |
CN114647409A (zh) | 大屏可视化应用创建平台、方法、计算设备和存储介质 | |
CN113256779B (zh) | 一种基于OpenGL指令的渲染运行方法及系统 | |
CN117271936B (zh) | 基于Web的大数据关系图谱渲染方法、系统及设备 | |
US10529100B2 (en) | Interaction-driven format for graph visualization | |
US20230368445A1 (en) | Layout-aware text rendering and effects execution | |
CN115170695A (zh) | 图表图片的生成方法、装置、电子设备和存储介质 | |
CN101127124A (zh) | 在显示用图形对象绘制期间变换对象顶点的方法及设备 | |
US11222033B2 (en) | Dynamic data retrieval and analytical chart rendering for data sets | |
CN111753234B (zh) | 一种数据可视化方法、装置、服务器和介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |