CN112650899A - 数据可视化渲染方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明涉及人工智能技术领域，提供一种数据可视化渲染方法、装置、计算机设备及存储介质，包括：响应于数据渲染请求，获取数据的树形结构；确定树形结构的根节点，根据浏览器的第一参数计算根节点的第一位置；从根节点开始向下遍历树形结构直到最后一层级的叶子节点，根据浏览器的第二参数计算最后一层级的叶子节点的第二位置；从树形结构中最后一层级的叶子节点开始向上遍历树形结构，根据第一位置及第二位置计算每一层级的叶子节点在待生成的渲染树中的第三位置；根据每个节点的位置对待生成的渲染树进行渲染，其中，渲染树中的父子节点位于同一层级，兄弟节点呈上下层级。本发明生成的渲染树能够在浏览器的窗口中全部展示。

Description

数据可视化渲染方法、装置、计算机设备及存储介质

技术领域

本发明涉及人工智能技术领域，具体涉及一种数据可视化渲染方法、装置、计算机设备及存储介质。

背景技术

将数据进行可视化展示，能够使得数据表现的更加清楚和更容易理解。所述的可视化展示，例如，可以是将数据表示为图形的形式；而将数据表示为图形的过程可以称为可视化渲染。其中一种类型的数据是层次结构数据，在该类型的数据中，可以包括各个节点以及节点之间的关系，层次结构数据可以被可视化渲染成树状图形，以清晰的展示节点之间的连接关系。

发明人在实现本发明的过程中发现，在树状图形的渲染时，父节点向子节点上下发散，或者左右不断发散，当树状图形的结构较为复杂时，很难在一个窗口中显示到更多信息，树状图形的展示十分不友好。

发明内容

鉴于以上内容，有必要提出一种数据可视化渲染方法、装置、计算机设备及存储介质，生成的渲染树能够在浏览器的窗口中全部展示。

本发明的第一方面提供一种数据可视化渲染方法，所述方法包括：

响应于数据渲染请求，获取所述数据渲染请求中数据的树形结构；

确定所述树形结构的根节点，并根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置；

从所述根节点开始向下遍历所述树形结构直到最后一层级的叶子节点，并根据所述浏览器的第二参数计算所述最后一层级的叶子节点在所述待生成的渲染树中的第二位置；

从所述树形结构中最后一层级的叶子节点开始向上遍历所述树形结构，根据所述第一位置及所述第二位置计算每一层级的叶子节点在所述待生成的渲染树中的第三位置；

根据每个节点的位置对所述待生成的渲染树进行渲染，其中，所述渲染树中的父子节点位于同一层级，兄弟节点呈上下层级。

在一个可选的实施例中，所述方法还包括：

响应于第一目标节点的折叠指令，计算所述第一目标节点的叶子节点的节点高度和值；

确定所述第一目标节点的下级兄弟节点的第一节点高度；

根据所述节点高度和值及所述第一节点高度计算所述下级兄弟节点的第一移动高度；

折叠所述第一目标节点的所有子节点，并将所述下级兄弟节点及所述下级兄弟节点的所有子节点向上移动所述第一移动高度。

在一个可选的实施例中，所述方法还包括：

响应于第二目标节点的折叠指令，确定所述第二目标节点的上级兄弟节点；

判断所述上级兄弟节点是否有叶子节点；

当所述上级兄弟节点有叶子节点时，确定所述上级兄弟节点的叶子节点中第二级叶子节点的第二节点高度；

根据所述第二节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第二移动高度；

折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第二移动高度。

在一个可选的实施例中，所述方法还包括：

当所述上级兄弟节点没有叶子节点时，根据所述上级兄弟节点的节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第三移动高度；

折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第三移动高度。

在一个可选的实施例中，所述方法还包括：

响应于指定节点的混合渲染请求，识别所述混合渲染请求中所述指定节点的节点类型；

当所述节点类型为闭合节点时，根据所述混合渲染请求确定所述指定节点中的多个指定父节点及指定子节点，绘制从每个所述指定父节点指向所述指定子节点的有向线段；

当所述节点类型为相邻节点时，根据所述混合渲染请求确定所述指定节点中的两个指定兄弟节点，绘制所述两个指定兄弟节点之间的无向线段；

当所述节点类型为虚拟节点时，不显示所述指定节点。

在一个可选的实施例中，所述方法还包括：

响应于渲染界面中显示节点的拖拽指令，根据所述拖拽指令在所述渲染树中显示渲染显示节点；

获取所述渲染显示节点的渲染描述；

根据所述渲染描述确定所述显示节点的渲染父节点；

在所述渲染父节点与所述渲染显示节点之间生成渲染线段。

在一个可选的实施例中，所述方法还包括：

响应于所述渲染树中的目标渲染节点的删除指令，确定所述目标渲染节点是否为最后一层级的叶子节点；

当所述目标渲染节点为所述最后一层级的叶子节点，删除所述目标渲染节点；

当所述目标渲染节点不为所述最后一层级的叶子节点，删除所述目标渲染节点及所述目标渲染节点的所有子渲染节点。

本发明的第二方面提供一种数据可视化渲染装置，所述装置包括：

请求响应模块，用于响应于数据渲染请求，获取所述数据渲染请求中数据的树形结构；

第一计算模块，用于确定所述树形结构的根节点，并根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置；

第二计算模块，用于从所述根节点开始向下遍历所述树形结构直到最后一层级的叶子节点，并根据所述浏览器的第二参数计算所述最后一层级的叶子节点在所述待生成的渲染树中的第二位置；

第三计算模块，用于从所述树形结构中最后一层级的叶子节点开始向上遍历所述树形结构，根据所述第一位置及所述第二位置计算每一层级的叶子节点在所述待生成的渲染树中的第三位置；

节点渲染模块，用于根据每个节点的位置对所述待生成的渲染树进行渲染，其中，所述渲染树中的父子节点位于同一层级，兄弟节点呈上下层级。

本发明的第三方面提供一种计算机设备，所述计算机设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现所述数据可视化渲染方法。

本发明的第四方面提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述数据可视化渲染方法。

综上所述，本发明所述的数据可视化渲染方法、装置、计算机设备及存储介质，不仅能够根据浏览器的第一参数和第二参数对树形结构的数据进行渲染生成渲染树，使得生成的渲染树能够在浏览器的窗口中全部展示，实现了在有限的可视范围内让用户获取到更多的信息；且渲染树由根节点一直水平往下发散，能够更加直观的看清整个树的关系走向、层级关系，提高用户体验。

附图说明

图1是本发明实施例一提供的数据可视化渲染方法的流程图。

图2是本发明实施例提供的生成的渲染树的示意图。

图3是本发明实施例二提供的数据可视化渲染装置的结构图。

图4是本发明实施例三提供的计算机设备的结构示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施例对本发明进行详细描述。需要说明的是，在不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。

本发明实施例提供的数据可视化渲染方法由计算机设备执行，相应地，数据可视化渲染装置运行于计算机设备中。

图1是本发明实施例一提供的数据可视化渲染方法的流程图。所述数据可视化渲染方法具体包括以下步骤，根据不同的需求，该流程图中步骤的顺序可以改变，某些可以省略。

S11，响应于数据渲染请求，获取所述数据渲染请求中数据的树形结构。

用户可以将树形结构的数据上传至渲染平台来触发数据渲染请求，请求将树形结构的数据渲染成符合浏览器的显示要求的渲染树，使得在浏览器的一个窗口中能够完全显示所有数据。

渲染平台接收到用户上传的树形结构的数据即接收到数据渲染请求，响应于所述数据渲染请求，从所述数据渲染请求中获取数据的树形结构。

树性结构包括多个节点，每个节点中存储有一个数据，所述数据可以是课程知识点，也可以是与用户相关的数据，例如，基础数据(性别，年龄)、工作经历等。

S12，确定所述树形结构的根节点，并根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置。

渲染平台从树形结构的根节点开始逐层向下遍历所述树形结构，每遍历一层，记录树形结构的层级增加1，每遍历到一个叶子节点，记录叶子节点的数量增加1。

获取树形结构的层级的最后的记录，得到树性结构的最大层级；获取树形结构的叶子节点的最后的记录，得到所有叶子节点的节点数量。

根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置。

其中，所述浏览器的第一参数可以是指浏览器所能显示的界面的高度。

确定了浏览器的第一参数之后，则可确定根节点在待生成的渲染树中的第一位置，所述第一位置可以为(0，第一参数)。

S13，从所述根节点开始向下遍历所述树形结构直到最后一层级的叶子节点，并根据所述浏览器的第二参数计算所述最后一层级的叶子节点在所述待生成的渲染树中的第二位置。

其中，叶子节点是指没有子节点的节点。

其中，所述浏览器的第二参数可以是指浏览器所能显示的界面的宽度。

树形结构的叶子节点可以位于多个层级，渲染平台从所述根节点开始逐层向下遍历所述树形结构，直到所述树形结构的最后一层级的叶子节点，确定最后一层级的叶子节点的数量。

当最后一层级的叶子节点的数量为1时，则根据所述浏览器的第二参数计算最后一层级的唯一的叶子节点的第二位置，所述第二位置为(第二参数，0)。

当最后一层级的叶子节点的数量不为1时，则确定所述树形结构中最后一层级的多个叶子节点中最右侧的叶子节点，然后根据所述浏览器的第二参数计算最后一层级的最右侧的叶子节点的第二位置，所述第二位置为(第二参数，0)。然后从右向左遍历所述树形结构的最后一层级的其他叶子节点，根据最后一层级的最右侧的叶子节点的第二位置确定最后一层级的其他叶子节点的第二位置。示例性的，假设所述树形结构最后一层级有两个叶子节点，最后一层级的最右侧的叶子节点的第二位置为(第二参数，0)，则最后一层级的另一个叶子节点的第二位置可以为(第二参数，h1)，其中，所述h1为预先设置的上下两个层级的叶子节点之间的高度间距。

在一个可选的实施例中，h1还可以根据所述浏览器的第一参数及所述树性结构的最大层级来确定。例如，确定所述浏览器的第一参数与所述最大层级之间的比值为h1。

在一个可选的实施例中，还可以根据所述浏览器的第二参数及所述所有叶子节点的数量来确定同一层级之间的两个节点之间的宽度间距。例如，确定所述浏览器的第二参数与所述所有叶子节点的数量之间的比值为同一层级之间的两个节点之间的宽度间距。

可以为同一父节点下的叶子节点之间设置相同的节点高度差，可以为同一父节点下的叶子节点设置不同的节点高度差。还可以为不同父节点下的叶子节点之间设置相同的节点高度差，或者为不同父节点下的叶子节点之间设置不同的节点高度差。

S14，从所述树形结构中最后一层级的叶子节点开始向上遍历所述树形结构，根据所述第一位置及所述第二位置计算每一层级的叶子节点在所述待生成的渲染树中的第三位置。

在确定最后一层级的叶子节点的位置后，从所述树形结构中最后一层级的叶子节点开始逐层向上遍历所述树形结构，计算倒数第二层级的叶子节点的位置，然后计算倒数第三层级的叶子节点的位置，以此类推，直到计算出第二层级的叶子节点的位置。

将树形结构中同一父节点下的多个叶子节点中的最右侧的叶子节点确定为待生成的渲染树中的该父节点下的最下一层级的叶子节点。上一层级的叶子节点的位置是根据与上一层级属于同一个父节点的所有下一层级的叶子节点的位置及每个下一层级并加上该节点子节点高度来动态计算的。

S15，根据每个节点的位置对所述待生成的渲染树进行渲染，其中，所述渲染树中的父子节点位于同一层级，兄弟节点呈上下层级。

确定了每个节点在待生成的渲染树中的位置之后，确定每个节点在树形结构中的亲属关系(兄弟关系，父子关系)，根据所述亲属关系绘制节点之间的线段，从而完成对待生成的渲染树的渲染过程。

如图2所示，为生成的渲染树的示意图。在图2中，节点1为根节点，节点2和节点3为所述根节点1的子节点，但节点2与节点1位于同一层级，节点2和节点3为兄弟节点，但节点2和节点3呈上下层级。

首先，根据浏览器的第一参数计算节点1的第一位置，例如，节点1的第一位置(0，第一参数)；接着，根据浏览器的第二参数计算节点11的第二位置，例如，节点11的第二位置(第二参数，0)；由于节点9为节点11的父节点，节点6为节点9的父节点，则节点6、节点9、节点11位于同一层级，计算节点9的第三位置为(第二参数-节点宽度间距，0)，计算节点6的第三位置为(第二参数-2倍的节点宽度间距，0)；由于节点5和节点6属于兄弟节点，则节点5和节点6呈上下层级，计算节点5的第三位置为(第二参数-2倍的节点宽度间距，节点高度间距)。

由此可见，本发明所述的方法生成的渲染树，与传统的二叉树的树形结构不同，本发明不仅能够根据浏览器的第一参数和第二参数对树形结构的数据进行渲染生成渲染树，使得生成的渲染树能够在浏览器的窗口中全部展示，实现了在有限的可视范围内让用户获取到更多的信息；且渲染树由根节点一直水平往下发散，能够更加直观的看清整个树的关系走向、层级关系，提高用户体验。

在一个可选的实施例中，所述方法还包括：

响应于第一目标节点的折叠指令，计算所述第一目标节点的叶子节点的节点高度和值；

确定所述第一目标节点的下级兄弟节点的第一节点高度；

根据所述节点高度和值及所述第一节点高度计算所述下级兄弟节点的第一移动高度；

折叠所述第一目标节点的所有子节点，并将所述下级兄弟节点及所述下级兄弟节点的所有子节点向上移动所述第一移动高度。

某个节点有叶子节点时，该节点上会显示折叠按钮，所述折叠按钮可以是虚拟图标。通过触摸该节点上的折叠按钮能够将该节点的所有子节点折叠起来，再次触摸该节点上的折叠按钮能够将该节点的所有子节点展开。

通过所述第一目标节点的所有叶子节点的节点高度得到节点高度和值。下级兄弟节点是指位于第一目标节点下方的节点。

示例性的，触摸节点3上的折叠按钮，则能够将节点3的所有子节点(节点5，节点6，节点8，节点9和节点10)折叠起来，即所述渲染树中不再显示节点5，节点6，节点8，节点9和节点10。节点3的叶子节点为节点5和节点 6，计算节点5和节点6的节点高度之差得到节点高度和值，则将节点3下一层级的兄弟节点向上移动所述节点高度和值。

该可选的实施例，对第一目标节点进行折叠后，会空出较多的空间，则可以将第一目标节点下的所有下级兄弟节点及每个下级兄弟节点的所有子节点向上移动，使得整个渲染树在渲染平台的显示界面中的布局更加合理。

在一个可选的实施例中，所述方法还包括：

响应于第二目标节点的折叠指令，确定所述第二目标节点的上级兄弟节点；

判断所述上级兄弟节点是否有叶子节点；

当所述上级兄弟节点有叶子节点时，确定所述上级兄弟节点的叶子节点中第二级叶子节点的第二节点高度；

根据所述第二节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第二移动高度；

折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第二移动高度。

可以通过计算所述第二节点高度及所述第二目标节点的节点高度的节点高度差值，得到所述第二目标节点的第二移动高度。

该可选的实施例中，对第二目标节点进行折叠，由于第二目标节点的所有叶子节点都被隐藏了，则可以将第二目标节点向上移动，使得第二目标节点位于上级兄弟节点的下方的一个层级上。

在一个可选的实施例中，所述方法还包括：

当所述上级兄弟节点没有叶子节点时，根据所述上级兄弟节点的节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第三移动高度；

折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第三移动高度。

该可选的实施例中，根据所述上级兄弟节点的节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第三移动高度，实现了对所述第二目标节点的精确移动。

在一个可选的实施例中，所述方法还包括：

响应于指定节点的混合渲染请求，识别所述混合渲染请求中所述指定节点的节点类型；

当所述节点类型为闭合节点时，根据所述混合渲染请求确定所述指定节点中的多个指定父节点及指定子节点，绘制从每个所述指定父节点指向所述指定子节点的有向线段；

当所述节点类型为相邻节点时，根据所述混合渲染请求确定所述指定节点中的两个指定兄弟节点，绘制所述两个指定兄弟节点之间的无向线段；

当所述节点类型为虚拟节点时，不显示所述指定节点。

可以为每个节点都添加对应的节点类型，用来区分节点之间的亲属关系，节点类型可以包括：闭合节点、相邻节点、普通节点、虚拟节点。根据不同的节点类型，来组合对应的节点关系，根据节点关系，绘制出连接节点之间的线段，配置节点为虚拟节点时，渲染后的虚拟节点不会显示。

该可选的实施例中，通过为节点设置节点类型，当节点类型为闭合节点时，能够实现多个父节点向同一个子节点聚合的效果，当节点类型为相邻节点时，能够实现两个兄弟节点之间相连的效果，当节点类型为虚拟节点时，通过对虚拟节点进行隐藏间接的实现了同一个渲染树中有多个根节点的效果，解决了传统的二叉树的树形结构，一个二叉树只能有一个根节点，每个子节点只能有一个父节点，且兄弟节点之间不能够相连的技术缺陷。

在一个可选的实施例中，所述方法还包括：

响应于渲染界面中显示节点的拖拽指令，根据所述拖拽指令在所述渲染树中显示渲染显示节点；

获取所述渲染显示节点的渲染描述；

根据所述渲染描述确定所述显示节点的渲染父节点；

在所述渲染父节点与所述渲染显示节点之间生成渲染线段。

渲染界面可以包括两部分，第一部分用于显示渲染树，第二部分用于显示多个显示节点及显示渲染描述框，每个显示节点可以用不同的形状或者颜色进行区分，例如，显示节点为根节点时对应第一颜色，显示节点为父节点时对应第二颜色，显示节点为第一层级的叶子节点时对应第三颜色。

用户可以通过拖拽的方式将第二部分的某一个显示节点拖拽到第一部分中，从而实现了在渲染树中增加渲染节点的效果。

用户可以在拖拽显示节点之前，在渲染描述框中输入对待拖拽的显示节点的渲染描述，所述渲染描述可以包括渲染父节点，渲染颜色，渲染名称等。

该可选的实施例中，通过拖拽显示节点，并根据渲染描述确定出渲染父节点之后，即可重新对所述渲染树进行渲染生成新的渲染树，渲染树的更新效率较高，且实现简单。

在一个可选的实施例中，所述方法还包括：

响应于所述渲染树中的目标渲染节点的删除指令，确定所述目标渲染节点是否为最后一层级的叶子节点；

当所述目标渲染节点为所述最后一层级的叶子节点，删除所述目标渲染节点；

当所述目标渲染节点不为所述最后一层级的叶子节点，删除所述目标渲染节点及所述目标渲染节点的所有子渲染节点。

其中，所述删除指令可以通过触摸时间超过预设时间阈值来触发。

对于目标渲染节点为最后一层级的叶子节点，则可以直接将目标渲染节点进行删除，对于目标渲染节点不为最后一层级的叶子节点时，可以显示提示框，用以提示是否要将所述目标渲染节点及所述目标渲染节点的所有子渲染节点进行删除。在接收到用户的确定指令时，删除所述目标渲染节点及所述目标渲染节点的所有子渲染节点。

需要强调的是，为进一步保证上述渲染树的私密性和安全性，上述渲染树可存储于区块链的节点中。

图3是本发明实施例二提供的数据可视化渲染装置的结构图。

在一些实施例中，所述数据可视化渲染装置20可以包括多个由计算机程序段所组成的功能模块。所述数据可视化渲染装置20中的各个程序段的计算机程序可以存储于计算机设备的存储器中，并由至少一个处理器所执行，以执行(详见图1描述)数据可视化渲染的功能。

本实施例中，所述数据可视化渲染装置20根据其所执行的功能，可以被划分为多个功能模块。所述功能模块可以包括：请求响应模块201、第一计算模块 202、第二计算模块203、第三计算模块204、节点渲染模块205、第一折叠模块 206、第二折叠模块207、混合渲染模块208、节点拖拽模块209及节点删除模块210。本发明所称的模块是指一种能够被至少一个处理器所执行并且能够完成固定功能的一系列计算机程序段，其存储在存储器中。在本实施例中，关于各模块的功能将在后续的实施例中详述。

所述请求响应模块201，用于响应于数据渲染请求，获取所述数据渲染请求中数据的树形结构。

用户可以将树形结构的数据上传至渲染平台来触发数据渲染请求，请求将树形结构的数据渲染成符合浏览器的显示要求的渲染树，使得在浏览器的一个窗口中能够完全显示所有数据。

渲染平台接收到用户上传的树形结构的数据即接收到数据渲染请求，响应于所述数据渲染请求，从所述数据渲染请求中获取数据的树形结构。

树性结构包括多个节点，每个节点中存储有一个数据，所述数据可以是课程知识点，也可以是与用户相关的数据，例如，基础数据(性别，年龄)、工作经历等。

所述第一计算模块202，用于确定所述树形结构的根节点，并根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置。

渲染平台从树形结构的根节点开始逐层向下遍历所述树形结构，每遍历一层，记录树形结构的层级增加1，每遍历到一个叶子节点，记录叶子节点的数量增加1。

获取树形结构的层级的最后的记录，得到树性结构的最大层级；获取树形结构的叶子节点的最后的记录，得到所有叶子节点的节点数量。

根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置。

其中，所述浏览器的第一参数可以是指浏览器所能显示的界面的高度。

确定了浏览器的第一参数之后，则可确定根节点在待生成的渲染树中的第一位置，所述第一位置可以为(0，第一参数)。

所述第二计算模块203，用于从所述根节点开始向下遍历所述树形结构直到最后一层级的叶子节点，并根据所述浏览器的第二参数计算所述最后一层级的叶子节点在所述待生成的渲染树中的第二位置。

其中，叶子节点是指没有子节点的节点。

其中，所述浏览器的第二参数可以是指浏览器所能显示的界面的宽度。

树形结构的叶子节点可以位于多个层级，渲染平台从所述根节点开始逐层向下遍历所述树形结构，直到所述树形结构的最后一层级的叶子节点，确定最后一层级的叶子节点的数量。

当最后一层级的叶子节点的数量为1时，则根据所述浏览器的第二参数计算最后一层级的唯一的叶子节点的第二位置，所述第二位置为(第二参数，0)。

当最后一层级的叶子节点的数量不为1时，则确定所述树形结构中最后一层级的多个叶子节点中最右侧的叶子节点，然后根据所述浏览器的第二参数计算最后一层级的最右侧的叶子节点的第二位置，所述第二位置为(第二参数，0)。然后从右向左遍历所述树形结构的最后一层级的其他叶子节点，根据最后一层级的最右侧的叶子节点的第二位置确定最后一层级的其他叶子节点的第二位置。示例性的，假设所述树形结构最后一层级有两个叶子节点，最后一层级的最右侧的叶子节点的第二位置为(第二参数，0)，则最后一层级的另一个叶子节点的第二位置可以为(第二参数，h1)，其中，所述h1为预先设置的上下两个层级的叶子节点之间的高度间距。

在一个可选的实施例中，h1还可以根据所述浏览器的第一参数及所述树性结构的最大层级来确定。例如，确定所述浏览器的第一参数与所述最大层级之间的比值为h1。

在一个可选的实施例中，还可以根据所述浏览器的第二参数及所述所有叶子节点的数量来确定同一层级之间的两个节点之间的宽度间距。例如，确定所述浏览器的第二参数与所述所有叶子节点的数量之间的比值为同一层级之间的两个节点之间的宽度间距。

可以为同一父节点下的叶子节点之间设置相同的节点高度差，可以为同一父节点下的叶子节点设置不同的节点高度差。还可以为不同父节点下的叶子节点之间设置相同的节点高度差，或者为不同父节点下的叶子节点之间设置不同的节点高度差。

所述第三计算模块204，用于从所述树形结构中最后一层级的叶子节点开始向上遍历所述树形结构，根据所述第一位置及所述第二位置计算每一层级的叶子节点在所述待生成的渲染树中的第三位置。

在确定最后一层级的叶子节点的位置后，从所述树形结构中最后一层级的叶子节点开始逐层向上遍历所述树形结构，计算倒数第二层级的叶子节点的位置，然后计算倒数第三层级的叶子节点的位置，以此类推，直到计算出第二层级的叶子节点的位置。

将树形结构中同一父节点下的多个叶子节点中的最右侧的叶子节点确定为待生成的渲染树中的该父节点下的最下一层级的叶子节点。上一层级的叶子节点的位置是根据与上一层级属于同一个父节点的所有下一层级的叶子节点的位置及每个下一层级并加上该节点子节点高度来动态计算的。

所述节点渲染模块205，用于根据每个节点的位置对所述待生成的渲染树进行渲染，其中，所述渲染树中的父子节点位于同一层级，兄弟节点呈上下层级。

确定了每个节点在待生成的渲染树中的位置之后，确定每个节点在树形结构中的亲属关系(兄弟关系，父子关系)，根据所述亲属关系绘制节点之间的线段，从而完成对待生成的渲染树的渲染过程。

如图2所示，为生成的渲染树的示意图。在图2中，节点1为根节点，节点2和节点3为所述根节点1的子节点，但节点2与节点1位于同一层级，节点2和节点3为兄弟节点，但节点2和节点3呈上下层级。

首先，根据浏览器的第一参数计算节点1的第一位置，例如，节点1的第一位置(0，第一参数)；接着，根据浏览器的第二参数计算节点11的第二位置，例如，节点11的第二位置(第二参数，0)；由于节点9为节点11的父节点，节点6为节点9的父节点，则节点6、节点9、节点11位于同一层级，计算节点9的第三位置为(第二参数-节点宽度间距，0)，计算节点6的第三位置为(第二参数-2倍的节点宽度间距，0)；由于节点5和节点6属于兄弟节点，则节点5和节点6呈上下层级，计算节点5的第三位置为(第二参数-2倍的节点宽度间距，节点高度间距)。

由此可见，本发明所述的装置生成的渲染树，与传统的二叉树的树形结构不同，本发明不仅能够根据浏览器的第一参数和第二参数对树形结构的数据进行渲染生成渲染树，使得生成的渲染树能够在浏览器的窗口中全部展示，实现了在有限的可视范围内让用户获取到更多的信息；且渲染树由根节点一直水平往下发散，能够更加直观的看清整个树的关系走向、层级关系，提高用户体验。

所述第一折叠模块206，用于响应于第一目标节点的折叠指令，计算所述第一目标节点的叶子节点的节点高度和值；确定所述第一目标节点的下级兄弟节点的第一节点高度；根据所述节点高度和值及所述第一节点高度计算所述下级兄弟节点的第一移动高度；折叠所述第一目标节点的所有子节点，并将所述下级兄弟节点及所述下级兄弟节点的所有子节点向上移动所述第一移动高度。

某个节点有叶子节点时，该节点上会显示折叠按钮，所述折叠按钮可以是虚拟图标。通过触摸该节点上的折叠按钮能够将该节点的所有子节点折叠起来，再次触摸该节点上的折叠按钮能够将该节点的所有子节点展开。

通过所述第一目标节点的所有叶子节点的节点高度得到节点高度和值。下级兄弟节点是指位于第一目标节点下方的节点。

示例性的，触摸节点3上的折叠按钮，则能够将节点3的所有子节点(节点5，节点6，节点8，节点9和节点10)折叠起来，即所述渲染树中不再显示节点5，节点6，节点8，节点9和节点10。节点3的叶子节点为节点5和节点 6，计算节点5和节点6的节点高度之差得到节点高度和值，则将节点3下一层级的兄弟节点向上移动所述节点高度和值。

该可选的实施例，对第一目标节点进行折叠后，会空出较多的空间，则可以将第一目标节点下的所有下级兄弟节点及每个下级兄弟节点的所有子节点向上移动，使得整个渲染树在渲染平台的显示界面中的布局更加合理。

所述第二折叠模块207，用于响应于第二目标节点的折叠指令，确定所述第二目标节点的上级兄弟节点；判断所述上级兄弟节点是否有叶子节点；当所述上级兄弟节点有叶子节点时，确定所述上级兄弟节点的叶子节点中第二级叶子节点的第二节点高度；根据所述第二节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第二移动高度；折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第二移动高度。

可以通过计算所述第二节点高度及所述第二目标节点的节点高度的节点高度差值，得到所述第二目标节点的第二移动高度。

该可选的实施例中，对第二目标节点进行折叠，由于第二目标节点的所有叶子节点都被隐藏了，则可以将第二目标节点向上移动，使得第二目标节点位于上级兄弟节点的下方的一个层级上。

在一个可选的实施例中，所述第二折叠模块207还用于：当所述上级兄弟节点没有叶子节点时，根据所述上级兄弟节点的节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第三移动高度；折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第三移动高度。

该可选的实施例中，根据所述上级兄弟节点的节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第三移动高度，实现了对所述第二目标节点的精确移动。

所述混合渲染模块208，用于响应于指定节点的混合渲染请求，识别所述混合渲染请求中所述指定节点的节点类型；当所述节点类型为闭合节点时，根据所述混合渲染请求确定所述指定节点中的多个指定父节点及指定子节点，绘制从每个所述指定父节点指向所述指定子节点的有向线段；当所述节点类型为相邻节点时，根据所述混合渲染请求确定所述指定节点中的两个指定兄弟节点，绘制所述两个指定兄弟节点之间的无向线段；当所述节点类型为虚拟节点时，不显示所述指定节点。

可以为每个节点都添加对应的节点类型，用来区分节点之间的亲属关系，节点类型可以包括：闭合节点、相邻节点、普通节点、虚拟节点。根据不同的节点类型，来组合对应的节点关系，根据节点关系，绘制出连接节点之间的线段，配置节点为虚拟节点时，渲染后的虚拟节点不会显示。

该可选的实施例中，通过为节点设置节点类型，当节点类型为闭合节点时，能够实现多个父节点向同一个子节点聚合的效果，当节点类型为相邻节点时，能够实现两个兄弟节点之间相连的效果，当节点类型为虚拟节点时，通过对虚拟节点进行隐藏间接的实现了同一个渲染树中有多个根节点的效果，解决了传统的二叉树的树形结构，一个二叉树只能有一个根节点，每个子节点只能有一个父节点，且兄弟节点之间不能够相连的技术缺陷。

所述节点拖拽模块209，用于响应于渲染界面中显示节点的拖拽指令，根据所述拖拽指令在所述渲染树中显示渲染显示节点；获取所述渲染显示节点的渲染描述；根据所述渲染描述确定所述显示节点的渲染父节点；在所述渲染父节点与所述渲染显示节点之间生成渲染线段。

渲染界面可以包括两部分，第一部分用于显示渲染树，第二部分用于显示多个显示节点及显示渲染描述框，每个显示节点可以用不同的形状或者颜色进行区分，例如，显示节点为根节点时对应第一颜色，显示节点为父节点时对应第二颜色，显示节点为第一层级的叶子节点时对应第三颜色。

用户可以通过拖拽的方式将第二部分的某一个显示节点拖拽到第一部分中，从而实现了在渲染树中增加渲染节点的效果。

用户可以在拖拽显示节点之前，在渲染描述框中输入对待拖拽的显示节点的渲染描述，所述渲染描述可以包括渲染父节点，渲染颜色，渲染名称等。

该可选的实施例中，通过拖拽显示节点，并根据渲染描述确定出渲染父节点之后，即可重新对所述渲染树进行渲染生成新的渲染树，渲染树的更新效率较高，且实现简单。

所述节点删除模块210，用于响应于所述渲染树中的目标渲染节点的删除指令，确定所述目标渲染节点是否为最后一层级的叶子节点；当所述目标渲染节点为所述最后一层级的叶子节点，删除所述目标渲染节点；当所述目标渲染节点不为所述最后一层级的叶子节点，删除所述目标渲染节点及所述目标渲染节点的所有子渲染节点。

其中，所述删除指令可以通过触摸时间超过预设时间阈值来触发。

对于目标渲染节点为最后一层级的叶子节点，则可以直接将目标渲染节点进行删除，对于目标渲染节点不为最后一层级的叶子节点时，可以显示提示框，用以提示是否要将所述目标渲染节点及所述目标渲染节点的所有子渲染节点进行删除。在接收到用户的确定指令时，删除所述目标渲染节点及所述目标渲染节点的所有子渲染节点。

需要强调的是，为进一步保证上述渲染树的私密性和安全性，上述渲染树可存储于区块链的节点中。

参阅图4所示，为本发明实施例三提供的计算机设备的结构示意图。在本发明较佳实施例中，所述计算机设备3包括存储器31、至少一个处理器32、至少一条通信总线33及收发器34。

本领域技术人员应该了解，图3示出的计算机设备的结构并不构成本发明实施例的限定，既可以是总线型结构，也可以是星形结构，所述计算机设备3 还可以包括比图示更多或更少的其他硬件或者软件，或者不同的部件布置。

在一些实施例中，所述计算机设备3是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路、可编程门阵列、数字处理器及嵌入式设备等。所述计算机设备3 还可包括客户设备，所述客户设备包括但不限于任何一种可与客户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、数码相机等。

需要说明的是，所述计算机设备3仅为举例，其他现有的或今后可能出现的电子产品如可适应于本发明，也应包含在本发明的保护范围以内，并以引用方式包含于此。

在一些实施例中，所述存储器31中存储有计算机程序，所述计算机程序被所述至少一个处理器32执行时实现如所述的数据可视化渲染方法中的全部或者部分步骤。所述存储器31包括只读存储器(Read-Only Memory，ROM)、可编程只读存储器(ProgrammableRead-Only Memory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)、一次可编程只读存储器(One-time Programmable Read-Only Memory，OTPROM)、电子擦除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(Compact Disc Read-Only Memory，CD-ROM)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。

进一步地，所述计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

在一些实施例中，所述至少一个处理器32是所述计算机设备3的控制核心(Control Unit)，利用各种接口和线路连接整个计算机设备3的各个部件，通过运行或执行存储在所述存储器31内的程序或者模块，以及调用存储在所述存储器31内的数据，以执行计算机设备3的各种功能和处理数据。例如，所述至少一个处理器32执行所述存储器中存储的计算机程序时实现本发明实施例中所述的数据可视化渲染方法的全部或者部分步骤；或者实现数据可视化渲染装置的全部或者部分功能。所述至少一个处理器32可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。

在一些实施例中，所述至少一条通信总线33被设置为实现所述存储器31 以及所述至少一个处理器32等之间的连接通信。

尽管未示出，所述计算机设备3还可以包括给各个部件供电的电源(比如电池)，优选的，电源可以通过电源管理装置与所述至少一个处理器32逻辑相连，从而通过电源管理装置实现管理充电、放电、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述计算机设备3 还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。

上述以软件功能模块的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，计算机设备，或者网络设备等) 或处理器(processor)执行本发明各个实施例所述方法的部分。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，既可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或，单数不排除复数。本发明陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种数据可视化渲染方法，其特征在于，所述方法包括：

响应于数据渲染请求，获取所述数据渲染请求中数据的树形结构；

确定所述树形结构的根节点，并根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置；

从所述根节点开始向下遍历所述树形结构直到最后一层级的叶子节点，并根据所述浏览器的第二参数计算所述最后一层级的叶子节点在所述待生成的渲染树中的第二位置；

从所述树形结构中最后一层级的叶子节点开始向上遍历所述树形结构，根据所述第一位置及所述第二位置计算每一层级的叶子节点在所述待生成的渲染树中的第三位置；

根据每个节点的位置对所述待生成的渲染树进行渲染，其中，所述渲染树中的父子节点位于同一层级，兄弟节点呈上下层级。

2.如权利要求1所述的数据可视化渲染方法，其特征在于，所述方法还包括：

响应于第一目标节点的折叠指令，计算所述第一目标节点的叶子节点的节点高度和值；

确定所述第一目标节点的下级兄弟节点的第一节点高度；

根据所述节点高度和值及所述第一节点高度计算所述下级兄弟节点的第一移动高度；

折叠所述第一目标节点的所有子节点，并将所述下级兄弟节点及所述下级兄弟节点的所有子节点向上移动所述第一移动高度。

3.如权利要求1所述的数据可视化渲染方法，其特征在于，所述方法还包括：

响应于第二目标节点的折叠指令，确定所述第二目标节点的上级兄弟节点；

判断所述上级兄弟节点是否有叶子节点；

当所述上级兄弟节点有叶子节点时，确定所述上级兄弟节点的叶子节点中第二级叶子节点的第二节点高度；

根据所述第二节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第二移动高度；

折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第二移动高度。

4.如权利要求3所述的数据可视化渲染方法，其特征在于，所述方法还包括：

当所述上级兄弟节点没有叶子节点时，根据所述上级兄弟节点的节点高度及所述第二目标节点的节点高度计算所述第二目标节点的第三移动高度；

折叠所述第二目标节点的所有子节点，并将所述第二目标节点向上移动所述第三移动高度。

5.如权利要求1所述的数据可视化渲染方法，其特征在于，所述方法还包括：

响应于指定节点的混合渲染请求，识别所述混合渲染请求中所述指定节点的节点类型；

当所述节点类型为闭合节点时，根据所述混合渲染请求确定所述指定节点中的多个指定父节点及指定子节点，绘制从每个所述指定父节点指向所述指定子节点的有向线段；

当所述节点类型为相邻节点时，根据所述混合渲染请求确定所述指定节点中的两个指定兄弟节点，绘制所述两个指定兄弟节点之间的无向线段；

当所述节点类型为虚拟节点时，不显示所述指定节点。

6.如权利要求1至5中任意一项所述的数据可视化渲染方法，其特征在于，所述方法还包括：

响应于渲染界面中显示节点的拖拽指令，根据所述拖拽指令在所述渲染树中显示渲染显示节点；

获取所述渲染显示节点的渲染描述；

根据所述渲染描述确定所述显示节点的渲染父节点；

在所述渲染父节点与所述渲染显示节点之间生成渲染线段。

7.如权利要求1至5中任意一项所述的数据可视化渲染方法，其特征在于，所述方法还包括：

响应于所述渲染树中的目标渲染节点的删除指令，确定所述目标渲染节点是否为最后一层级的叶子节点；

当所述目标渲染节点为所述最后一层级的叶子节点，删除所述目标渲染节点；

当所述目标渲染节点不为所述最后一层级的叶子节点，删除所述目标渲染节点及所述目标渲染节点的所有子渲染节点。

8.一种数据可视化渲染装置，其特征在于，所述装置包括：

请求响应模块，用于响应于数据渲染请求，获取所述数据渲染请求中数据的树形结构；

第一计算模块，用于确定所述树形结构的根节点，并根据浏览器的第一参数计算所述根节点在待生成的渲染树中的第一位置；

第二计算模块，用于从所述根节点开始向下遍历所述树形结构直到最后一层级的叶子节点，并根据所述浏览器的第二参数计算所述最后一层级的叶子节点在所述待生成的渲染树中的第二位置；

第三计算模块，用于从所述树形结构中最后一层级的叶子节点开始向上遍历所述树形结构，根据所述第一位置及所述第二位置计算每一层级的叶子节点在所述待生成的渲染树中的第三位置；

节点渲染模块，用于根据每个节点的位置对所述待生成的渲染树进行渲染，其中，所述渲染树中的父子节点位于同一层级，兄弟节点呈上下层级。

9.一种计算机设备，其特征在于，所述计算机设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1至7中任意一项所述的数据可视化渲染方法。

10.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任意一项所述的数据可视化渲染方法。

Images