一种基于svg绘制的关系图组件制造技术

本发明专利技术公开了一种基于svg绘制的关系图组件，包括服务器端和客户端；服务器端，其被配置为：创建一个SVG空白模板；在流程开始节点和流程结束节点之间绘制与流程图相对应的节点以及节点之间的路由；接收流程图图形的形状命令；客户端，其被配置为：实时显示服务器端输出的流程图，可基于svg提供的标签实现关系线条的定制化，而非框架中单一的箭头线条，无需预先定义所有节点的坐标位置，依赖CSS实现节点和关系的弹性布局，动态计算节点关系线条的起始坐标和结束坐标，适配各屏幕分辨率，基于原生JavaScript、CSS和svg技术，不依赖于任何框架，可应用于各个web前端项目业务中，并且兼容市场上主流浏览器。市场上主流浏览器。市场上主流浏览器。

【技术实现步骤摘要】
一种基于svg绘制的关系图组件


[0001]本专利技术涉及web前端开发的应用型组件
，具体是一种基于svg绘制的关系图组件。

技术介绍

[0002]在现有项目业务中，经常提出绘制两组节点及其绑定关系，并提供事件交互类似的需求。如部门
‑
人员关系图要求实现部门与多个人员进行绑定，并提供可视化平面图实时展示对应隶属关系，这就涉及到如何实现部门与人员绑定，以及二者之间绑定关系的动态渲染。因此，研究一种适配多屏幕分辨率、兼容主流版本浏览器、轻量灵活的关系图就很有必要。所有需要在页面上进行多对多关系绑定和渲染的业务都可以使用此技术。
[0003]ECharts框架提供的基础关系图(Graph)可以实现关系图绘制。按照ECharts关系图option配置，计算并定义好两组节点value值，即X和Y坐标位置，将节点数组配置在data中；定义节点关系数组配置在links中，通过itemStyle和lineStyle参数分别配置节点和关系线条样式。ECharts关系图的实现原理，简单来说是利用Canvas技术绘制了一个画布，通过配置的参数在画布上绘制节点位置和样式。该方案仅需配置参数即可完成关系图绘制，在使用上较为简单。
[0004]ECharts框架提供的基础关系图存在以下几个缺点：
[0005](1)需明确定义好节点的X和Y坐标，固定节点大小，无法根据屏幕分辨率变化实现节点和线条弹性变化
[0006](2)必须依赖于ECharts一整套框架，无法单独使用，增加项目复杂度和打包体积。
[0007](3)节点绑定关系只能用单一线条实现，无法满足样式定制化。

技术实现思路

[0008]本专利技术的目的在于提供一种基于svg绘制的关系图组件，以解决上述
技术介绍
中提出的问题。
[0009]为实现上述目的，本专利技术提供如下技术方案：
[0010]一种基于svg绘制的关系图组件，包括服务器端和客户端；
[0011]所述服务器端，其被配置为：创建一个SVG空白模板，SVG空白模板上包含流程开始节点和流程结束节点；
[0012]在SVG空白模板上，在流程开始节点和流程结束节点之间绘制与流程图相对应的节点以及节点之间的路由；
[0013]接收流程图图形的形状命令，在各个节点处绘制流程图对应的形状，并将对应的属性作为流程图图形的一个属性进行存储，进而生成整个流程图；
[0014]所述客户端，其被配置为：实时显示服务器端输出的流程图。
[0015]作为本专利技术进一步的方案：所述还包括：所述服务器端还被配置为设置节点的属性，从而改变节点在整个流程图中的位置；所述节点的属性包括节点的坐标、高度和宽度；
[0016]或/和所述服务器端还被配置为依据流转方式来配置两个相连节点的ID并作为路由的一个属性进行存储，同时增加流转方式条件判断，也作为路由的属性进行存储；
[0017]或/和所述服务器端还被配置为利用JavaScript脚本语言进行捕捉鼠标点击事件、拖动事件和离开事件，用来实现整个流程图配置时各个节点的自由拖动。
[0018]作为本专利技术进一步的方案：所述包括：
[0019]创建模块，用于创建用于深度学习的多个第一目标对象与多个第二目标对象，其中，所述多个第一目标对象与所述多个第二目标对象均用于产生和/或处理数据；
[0020]预约模块，用于控制所述多个第一目标对象向所述多个第二目标对象进行预约，其中，一个第一目标对象预约一个或多个第二目标对象，和/或多个第一目标对象预约同一个第二目标对象；
[0021]生成模块，用于根据预约的结果生成所述深度学习中每层算子之间的所述多个第一目标对象与所述多个第二目标对象关系图。
[0022]作为本专利技术进一步的方案：所述装置还包括：
[0023]第一控制模块，用于控制所述多个第一目标对象产生数据；
[0024]第二控制模块，用于控制所述多个第二目标对象获取所述多个第一目标对象产生的所述数据，并对所述数据进行处理。
[0025]作为本专利技术进一步的方案：所述第二控制模块包括：
[0026]第一控制单元，用于控制所述多个第二目标对象根据接收到的预约请求中携带的第一目标对象的标识获取所述第一目标对象的标识对应的所述第一目标对象产生的所述数据。
[0027]作为本专利技术进一步的方案：所述包括：
[0028]SVG空白模板创建模块，其用于创建一个SVG空白模板，SVG空白模板上包含流程开始节点和流程结束节点；
[0029]节点及路由绘制模块，其用于在SVG空白模板上，在流程开始节点和流程结束节点之间绘制与流程图相对应的节点以及节点之间的路由；
[0030]图形绘制模块，其用于接收流程图图形的形状命令，在各个节点处绘制流程图对应的形状，并将对应的属性作为流程图图形的一个属性进行存储，进而生成整个流程图。
[0031]作为本专利技术进一步的方案：所述还包括：节点属性设置模块，其用于设置节点的属性，从而改变节点在整个流程图中的位置；所述节点的属性包括节点的坐标、高度和宽度。
[0032]作为本专利技术进一步的方案：所述还包括：路由属性存储模块，其用于依据流转方式来配置两个相连节点的ID并作为路由的一个属性进行存储，同时增加流转方式条件判断，也作为路由的属性进行存储。
[0033]作为本专利技术进一步的方案：所述还包括：事件捕捉模块，其用于利用JavaScript脚本语言进行捕捉鼠标点击事件、拖动事件和离开事件，用来实现整个流程图配置时各个节点的自由拖动。
[0034]作为本专利技术再进一步的方案：所述具体步骤如下：
[0035]步骤一：定义两个数组分别存放A组节点和B组节点数据，分别定义A、B两组CSS类样式设置节点的宽度和高度，其中宽度可使用百分比实现弹性布局，每个节点需提供id或编号代表节点的唯一性；
[0036]步骤二：定义数组存放A组节点和B组节点关系数据，一对关系数据中需提供A组节点id和B组节点id；
[0037]步骤三：调用接口获取两组节点数据及节点关系存放到对应数组中；
[0038]步骤四：将A组和B组节点分别渲染成DOM元素，A组节点DOM元素增加id属性，命名规则如“nodeA”+节点id；B组节点DOM元素增加id属性，命名规则如“nodeB”+节点id，各DOM元素具有唯一性并注册节点鼠标事件；
[0039]步骤五：是否触发节点创建或更新事件，“是”则执行步骤三，“否”则执行步骤六；
[0040]步骤六：节点渲染完成后，通过JavaScriptmap方法遍历存放节点关系的数组，计算每对关系线条的起始坐标和结束坐标，存放到数组中；
[0041](1)调用document.getElementById方法获取A组节点DOM对象，在svg绘图区域中，A组节点X坐标始终为0，Y坐标计算方式为节点DOM元素距离外框高度(offsetTop)+相邻节点本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于svg绘制的关系图组件，其特征在于，包括服务器端和客户端；所述服务器端，其被配置为：创建一个SVG空白模板，SVG空白模板上包含流程开始节点和流程结束节点；在SVG空白模板上，在流程开始节点和流程结束节点之间绘制与流程图相对应的节点以及节点之间的路由；接收流程图图形的形状命令，在各个节点处绘制流程图对应的形状，并将对应的属性作为流程图图形的一个属性进行存储，进而生成整个流程图；所述客户端，其被配置为：实时显示服务器端输出的流程图。2.根据权利要求1所述的一种基于svg绘制的关系图组件，其特征在于，还包括：所述服务器端还被配置为设置节点的属性，从而改变节点在整个流程图中的位置；所述节点的属性包括节点的坐标、高度和宽度；或/和所述服务器端还被配置为依据流转方式来配置两个相连节点的ID并作为路由的一个属性进行存储，同时增加流转方式条件判断，也作为路由的属性进行存储；或/和所述服务器端还被配置为利用JavaScript脚本语言进行捕捉鼠标点击事件、拖动事件和离开事件，用来实现整个流程图配置时各个节点的自由拖动。3.根据权利要求1所述的一种基于svg绘制的关系图组件，其特征在于，包括：创建模块，用于创建用于深度学习的多个第一目标对象与多个第二目标对象，其中，所述多个第一目标对象与所述多个第二目标对象均用于产生和/或处理数据；预约模块，用于控制所述多个第一目标对象向所述多个第二目标对象进行预约，其中，一个第一目标对象预约一个或多个第二目标对象，和/或多个第一目标对象预约同一个第二目标对象；生成模块，用于根据预约的结果生成所述深度学习中每层算子之间的所述多个第一目标对象与所述多个第二目标对象关系图。4.根据权利要求3所述的一种基于svg绘制的关系图组件，其特征在于，还包括：第一控制模块，用于控制所述多个第一目标对象产生数据；第二控制模块，用于控制所述多个第二目标对象获取所述多个第一目标对象产生的所述数据，并对所述数据进行处理。5.根据权利要求4所述的一种基于svg绘制的关系图组件，其特征在于，所述第二控制模块包括：第一控制单元，用于控制所述多个第二目标对象根据接收到的预约请求中携带的第一目标对象的标识获取所述第一目标对象的标识对应的所述第一目标对象产生的所述数据。6.根据权利要求1所述的一种基于svg绘制的关系图组件，其特征在于，包括：SVG空白模板创建模块，其用于创建一个SVG空白模板，SVG空白模板上包含流程开始节点和流程结束节点；节点及路由绘制模块，其用于在SVG空白模板上，在流程开始节点和流程结束节点之间绘制与流程图相对应的节点以及节点之间的路由；图形绘制模块，其用...

【专利技术属性】
技术研发人员：曹玲，候金明，荆旺，章新杰，
申请(专利权)人：北京中孚泰和科技发展股份有限公司，
类型：发明
国别省市：