一种ER图生成方法、系统、电子设备及存储介质
技术领域
本发明属于数据库模型设计领域,尤其涉及一种ER图生成方法、系统、电子设备及存储介质。
背景技术
E-R方法是“实体-联系方法”(Entity-Relationship Approach)的简称。它是描述现实世界概念结构模型的有效方法,而ER图就是这个方法在界面上的可视化呈现。无论是普遍的数据库驱动的开发方式,还是高大上的DDD,或者是模型驱动的Lowcode平台,亦或主数据驱动的APaas平台,ER图提供了一种可视化业务的视角。
“需要展示成百上千个模型”是ER图建构工具最核心的功能,主流工具Canvas是现有优化选择。但是,由于Canvas提供的是更底层绘图api,缺乏上层封装,会导致开发体验和速度上过于原始,而G6作为一款图可视化引擎,可以弥补这里面的差距。
此外,现有G6引擎中所提供的ER图实现方法所生成的ER图存在效率低下、界面杂乱且不简化的问题。
发明内容
本申请实施例提供了一种ER图生成方法、系统、电子设备及存储介质,以至少解决现有ER图生成方法效率低下、界面杂乱且不简化的问题。
第一方面,本申请实施例提供了一种ER图生成方法,包括:引擎初始化步骤,在HTML中创建一容器标签,并在所述容器标签中引入基于canvas的G6引擎;优化配置步骤,在所述容器标签中配置ER图参数,并进行ER图生成优化配置;ER图生成步骤,根据所述ER图参数和所述ER图生成优化配置生成ER图。
优选的,所述优化配置步骤还包括:锚点配置步骤,在所述容器标签中配置锚点,将所述锚点在界面中和界面四周边界均匀分布。
优选的,所述优化配置步骤还包括:布局配置步骤,在所述容器标签中配置布局为力导布局,并设置一隐藏节点用于连接全部模型。
优选的,所述优化配置步骤还包括:性能优化步骤,在所述容器标签中设定参数以在可选的范围内缩小画布面积并减少可视区域的节点对象数量。
第二方面,本申请实施例提供了一种ER图生成系统,适用于上述一种ER图生成方法,包括:引擎初始化单元,在HTML中创建一容器标签,并在所述容器标签中引入基于canvas的G6引擎;优化配置单元,在所述容器标签中配置ER图参数,并进行ER图生成优化配置;ER图生成单元,根据所述ER图参数和所述ER图生成优化配置生成ER图。
在其中一些实施例中,所述优化配置单元还包括:锚点配置模块,在所述容器标签中配置锚点,将所述锚点在界面中和界面四周边界均匀分布。
在其中一些实施例中,所述优化配置单元还包括:布局配置模块,在所述容器标签中配置布局为力导布局,并设置一隐藏节点用于连接全部模型。
在其中一些实施例中,所述优化配置单元还包括:性能优化模块,在所述容器标签中设定参数以在可选的范围内缩小画布面积并减少可视区域的节点对象数量。
第三方面,本申请实施例提供了一种电子设备,包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如上述第一方面所述的一种ER图生成方法。
第四方面,本申请实施例提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现如上述第一方面所述的一种ER图生成方法。
相比于相关技术,本申请实施例提供的一种ER图生成方法:
1.使用基于canvas的可视化引擎G6,支持大中型业务系统的模型数量,为ER图实现提供了强大的框架支撑;
2.采用不限定锚点位置的方法,使生成连线时界面整洁清晰;
3.采用力导布局,同时设置隐藏节点,可使界面中模型集中;
4.通过调整画布大小与节点对象数量提升ER图生成性能。
本申请的一个或多个实施例的细节在以下附图和描述中提出,以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1为本发明的ER图生成方法流程图;
图2为图1中步骤S2的分步骤流程图;
图3为本发明的ER图生成系统的框架图;
图4为本发明的电子设备的框架图;
以上图中:
1、引擎初始化单元;2、优化配置单元;3、ER图生成单元;21、锚点配置模块;22、布局配置模块;23、性能优化模块;30、总线;31、处理器;32、存储器;33、通信接口。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行描述和说明。应当理解,此处所描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。基于本申请提供的实施例,本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例,都属于本申请保护的范围。
显而易见地,下面描述中的附图仅仅是本申请的一些示例或实施例,对于本领域的普通技术人员而言,在不付出创造性劳动的前提下,还可以根据这些附图将本申请应用于其他类似情景。此外,还可以理解的是,虽然这种开发过程中所作出的努力可能是复杂并且冗长的,然而对于与本申请公开的内容相关的本领域的普通技术人员而言,在本申请揭露的技术内容的基础上进行的一些设计,制造或者生产等变更只是常规的技术手段,不应当理解为本申请公开的内容不充分。
在本申请中提及“实施例”意味着,结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例,也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是,本申请所描述的实施例在不冲突的情况下,可以与其它实施例相结合。
除非另作定义,本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制,可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形,意图在于覆盖不排他的包含;例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元,而是可以还包括没有列出的步骤或单元,或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
E-R图也称实体-联系图(Entity Relationship Diagram),提供了表示实体类型、属性和联系的方法,用来描述现实世界的概念模型。它是描述现实世界关系概念模型的有效方法。是表示概念关系模型的一种方式。用“矩形框”表示实体型,矩形框内写明实体名称;用“椭圆图框”或圆角矩形表示实体的属性,并用“实心线段”将其与相应关系的“实体型”连接起来;用”菱形框“表示实体型之间的联系成因,在菱形框内写明联系名,并用”实心线段“分别与有关实体型连接起来,同时在”实心线段“旁标上联系的类型(1:1,1:n或m:n)。
构成E-R图的3个基本要素是实体型、属性和联系,其表示方法为:实体:一般认为,客观上可以相互区分的事物就是实体,实体可以是具体的人和物,也可以是抽象的概念与联系。关键在于一个实体能与另一个实体相区别,具有相同属性的实体具有相同的特征和性质。用实体名及其属性名集合来抽象和刻画同类实体。在E-R图中用矩形表示,矩形框内写明实体名;比如学生张三、学生李四都是实体。如果是弱实体的话,在矩形外面再套实线矩形。属性:实体所具有的某一特性,一个实体可由若干个属性来刻画。属性不能脱离实体,属性是相对实体而言的。在E-R图中用椭圆形表示,并用无向边将其与相应的实体连接起来;比如学生的姓名、学号、性别、都是属性。如果是多值属性的话,在椭圆形外面再套实线椭圆。如果是派生属性则用虚线椭圆表示。联系:联系也称关系,信息世界中反映实体内部或实体之间的关联。实体内部的联系通常是指组成实体的各属性之间的联系;实体之间的联系通常是指不同实体集之间的联系。在E-R图中用菱形表示,菱形框内写明联系名,并用无向边分别与有关实体连接起来,同时在无向边旁标上联系的类型(1:1,1:n或m:n)。比如老师给学生授课存在授课关系,学生选课存在选课关系。如果是弱实体的联系则在菱形外面再套菱形。
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。
SVG是一种图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide WebConsortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。HTML5<canvas>标签用于绘制图像(通过脚本,通常是JavaScript)。不过,<canvas>元素本身并没有绘制能力,它仅仅是图形的容器,,必须使用脚本来完成实际的绘图任务。getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
相比SVG,Canvas更像是更底层的实现,同时Canvas是WebGL的入口,性能优化的空间更大。“需要展示成百上千个模型”这个是最核心的功能,Canvas成了必然的选择。但是,由于Canvas提供的是更底层绘图api,缺乏上层封装,会导致开发体验和速度上过于原始,而G6作为一款图可视化引擎,可以弥补这里面的差距。
AntV是蚂蚁金服全新一代数据可视化解决方案,主要包含「数据驱动的高交互可视化图形语法」G2、开源的G6、适于对性能、体积、扩展性要求严苛场景下使用的移动端图表库F2以及一套完整的图表使用指引和可视化设计规范,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。G6是一个简单、易用、完备、开源的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。其本身不提供(很少提供)上层建筑(节点类型、边类型、基础交互、布局算法)的具体实现,只提供一套高可扩展的机制,G6优化了大量接口设计,能明显感受到接口更精简,更自洽,概念更清晰。
本申请实施例使用HTML和JavaScript实现本申请提供的一种ER图生成方法。
以下,结合附图详细介绍本发明的实施例:
图1为本发明的ER图生成方法流程图,请参见图1,本发明ER图生成方法包括如下步骤:
S1:在HTML编辑器中创建一容器标签,并在该容器标签中引入基于canvas的G6引擎;可选的,该HTML编辑器包括但不限于Notepad、Sublime Text、Hbuilder;可选的,该容器标签包括但不限于div标签,G6在绘制时会在该容器下追加canvas标签,然后将图绘制在其中;可选的,本申请实施例引入基于canvas的G6引擎使用如下方式:<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.3.1/dist/g6.min.js"></script><script>console.log(G6.Global.version);</script>。
S2:在所述容器标签中配置ER图参数,并进行ER图生成优化配置;可选的,此处的ER图参数包括但不限于节点、边等元素或属性。可选的,图2为图1中步骤S2的分步骤流程图,请参见图2:
S21:在所述容器标签中配置锚点,将所述锚点在界面中和界面四周边界均匀分布;锚点(Anchor)是G6引擎中用户设置可用于连接的点,从属于节点,在没有设置锚点的情况下,相交点就是连接点。在有锚点的情况下,连接点一定是其中一个锚点,但选择什么锚点,则需要有一个逼近策略;可选的,在本申请实施例中,可在node:dragend事件里面根据相对方位做判断,修改edge的sourceAnchor的值,以在整个模型图上面都设置了无数的锚点可供选择,同时上下左右的边界总共设置300个锚点,并且均匀分布,以实现当在edge没有设置锚点的时候,G6会自动选择最接近的锚点。
S22:在所述容器标签中配置布局为力导布局,并设置一隐藏节点用于连接全部模型,力导布局为一个布局网络中,粒子与粒子之间具有引力和斥力,从初始的随机无序的布局不断演变,逐渐趋于平衡稳定的布局方式称之为力导向布局,适用于描述事物间关系,比如人物关系、计算机网络关系等;S23:在所述容器标签中设定参数以在可选的范围内缩小画布面积并减少可视区域的节点对象数量;对于ER图来说,布局效果的好坏很影响整体的观感,G6所提供的的布局包括层次布局、grid布局、concentric布局和力导布局,在本申请实施例中提供力导布局的实施方式,但力导布局中没有关联关系的模型会距离较远,造成空间上的浪费,本申请实施例设置一个隐藏的节点,把所有的模型集中连接以解决上述问题。
S23:在所述容器标签中设定参数以在可选的范围内缩小画布面积并减少可视区域的节点对象数量;在本申请实施例中,通过引入fps测试组件可衡量性能优化的程度,并得出优化公式如下:
其中,F为性能,G为画布大小,N为可视区域的节点对象数量;
因此,在可操作、可选的范围空间内,保证ER图视觉质量的前提下,可通过缩小画布面积并减少可视区域的节点对象数量以提高性能。
S3:根据所述ER图参数和所述ER图生成优化配置生成ER图;可选的,本申请实施例所用于运行上述方法并生成展现ER图的浏览器包括但不限于Chrome浏览器。
需要说明的是,在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例提供了一种ER图生成系统,适用于上述的一种ER图生成方法。如以下所使用的,术语“单元”、“模块”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现,但是硬件、或者软件和硬件的组合的实现也是可能并被构想的。
图3为根据本发明的ER图生成系统的框架图,请参见图3,包括:
引擎初始化单元1,在HTML编辑器中创建一容器标签,并在该容器标签中引入基于canvas的G6引擎;可选的,该HTML编辑器包括但不限于Notepad、Sublime Text、Hbuilder;可选的,该容器标签包括但不限于div标签,G6在绘制时会在该容器下追加canvas标签,然后将图绘制在其中;可选的,本申请实施例引入基于canvas的G6引擎使用如下方式:
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.3.1/dist/g6.min.js"></script>
<script>console.log(G6.Global.version);</script>。
优化配置单元2,在所述容器标签中配置ER图参数,并进行ER图生成优化配置;可选的,此处的ER图参数包括但不限于节点、边等元素或属性;可选的,ER图生成单元还包括:
锚点配置模块21,在所述容器标签中配置锚点,将所述锚点在界面中和界面四周边界均匀分布;锚点(Anchor)是G6引擎中用户设置可用于连接的点,从属于节点,在没有设置锚点的情况下,相交点就是连接点。在有锚点的情况下,连接点一定是其中一个锚点,但选择什么锚点,则需要有一个逼近策略;可选的,在本申请实施例中,可在node:dragend事件里面根据相对方位做判断,修改edge的sourceAnchor的值,以在整个模型图上面都设置了无数的锚点可供选择,同时上下左右的边界总共设置300个锚点,并且均匀分布,以实现当在edge没有设置锚点的时候,G6会自动选择最接近的锚点;
布局配置模块22,在所述容器标签中配置布局为力导布局,并设置一隐藏节点用于连接全部模型;对于ER图来说,布局效果的好坏很影响整体的观感,G6所提供的的布局包括层次布局、grid布局、concentric布局和力导布局,在本申请实施例中提供力导布局的实施方式,但力导布局中没有关联关系的模型会距离较远,造成空间上的浪费,本申请实施例设置一个隐藏的节点,把所有的模型集中连接以解决上述问题;
性能优化模块23,在所述容器标签中设定参数以在可选的范围内缩小画布面积并减少可视区域的节点对象数量;在本申请实施例中,通过引入fps测试组件可衡量性能优化的程度,并得出优化公式如下:
其中,F为性能,G为画布大小,N为可视区域的节点对象数量;
因此,在可操作、可选的范围空间内,保证ER图视觉质量的前提下,可通过缩小画布面积并减少可视区域的节点对象数量以提高性能。
ER图生成单元3,根据所述ER图参数和所述ER图生成优化配置生成ER图;可选的,本申请实施例所用于运行上述方法并生成展现ER图的浏览器包括但不限于Chrome浏览器。
另外,结合图1、图2描述的一种ER图生成方法可以由电子设备来实现。图4为本发明的电子设备的框架图。
电子设备可以包括处理器31以及存储有计算机程序指令的存储器32。
具体地,上述处理器31可以包括中央处理器(CPU),或者特定集成电路(Application Specific Integrated Circuit,简称为ASIC),或者可以被配置成实施本申请实施例的一个或多个集成电路。
其中,存储器32可以包括用于数据或指令的大容量存储器。举例来说而非限制,存储器32可包括硬盘驱动器(Hard Disk Drive,简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive,简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus,简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下,存储器32可包括可移除或不可移除(或固定)的介质。在合适的情况下,存储器32可在数据处理装置的内部或外部。在特定实施例中,存储器32是非易失性(Non-Volatile)存储器。在特定实施例中,存储器32包括只读存储器(Read-Only Memory,简称为ROM)和随机存取存储器(RandomAccess Memory,简称为RAM)。在合适的情况下,该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory,简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory,简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory,简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory,简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下,该RAM可以是静态随机存取存储器(Static Random-Access Memory,简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory,简称为DRAM),其中,DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory,简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory,简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory,简称SDRAM)等。
存储器32可以用来存储或者缓存需要处理和/或通信使用的各种数据文件,以及处理器31所执行的可能的计算机程序指令。
处理器31通过读取并执行存储器32中存储的计算机程序指令,以实现上述实施例中的任意一种ER图生成方法。
在其中一些实施例中,电子设备还可包括通信接口33和总线30。其中,如图4所示,处理器31、存储器32、通信接口33通过总线30连接并完成相互间的通信。
通信端口33可以实现与其他部件例如:外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。
总线30包括硬件、软件或两者,将电子设备的部件彼此耦接在一起。总线30包括但不限于以下至少之一:数据总线(Data Bus)、地址总线(Address Bus)、控制总线(ControlBus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制,总线30可包括图形加速接口(Accelerated Graphics Port,简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture,简称为EISA)总线、前端总线(FrontSide Bus,简称为FSB)、超传输(Hyper Transport,简称为HT)互连、工业标准架构(Industry Standard Architecture,简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count,简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture,简称为MCA)总线、外围组件互连(Peripheral Component Interconnect,简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment,简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus,简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下,总线30可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线,但本申请考虑任何合适的总线或互连。
该电子设备可以执行本申请实施例中的一种ER图生成方法。
另外,结合上述实施例中的一种ER图生成方法,本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令;该计算机程序指令被处理器执行时实现上述实施例中的任意一种ER图生成方法。
而前述的存储介质包括:U盘、移动硬盘、只读存储器(ReadOnly Memory,简称为ROM)、随机存取存储器(Random Access Memory,简称为RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。