[发明专利]一种以元素团形式定位树状图底层元素的方法及装置

说明书

本发明公开了一种以元素团形式定位树状图底层元素的方法及装置，该方法包括：从树状图所包含的元素中获取底层元素，将父元素相同的底层元素划分为一个元素团；对于任一元素团，若该元素团内元素总数量小于或等于预设每行最大元素数量，则设置该元素团内首行元素数量等于元素团内元素总数量；否则，设置该元素团内首行元素数量等于预设每行最大元素数量；根据每个所述元素团内首行元素数量以及预设原则将每个所述元素团内的底层元素进行分行；其中，所述预设原则为每个所述元素团内其他行元素数量等于或小于首行元素数量的原则。本发明公开的上述技术方案，将底层元素以元素团形式展出，使得树状图整体比较紧凑、协调和美观。

技术领域

本发明涉及网站开发技术领域，更具体地说，涉及一种以元素团形式定位树状图底层元素的方法及装置。

背景技术

随着HTML5(Hyper Text Markup Language，超文本标记语言)的普及以及人们对网站体验要求的不断提高，图形在网站开发工作中所占的比例越来越高。其中，树状图就是常见的图形中的一种。

树状图是由元素以及表示元素之间关系的连线所构成的图形。其中，元素在树状图中表示的是实体的图形及文字，例如网络中的交换机、主机等，组织结构图中的部门、员工等，树状图中的元素之间的线描述的是实体间关系的连线。树状图的元素定位是否合理在很大程度上决定了树状图的整体布局是否紧凑以及协调美观。但是，元素定位的难点在于在树状图中每个层级的元素个数都是不可预知的，并且树状图的底层元素即处于整个树状结构最后一层的元素的数量往往较大，使得树状图所在的画布的宽度变大，使得整体布局不是很协调。

在现有技术中，实现树状图的方法为：在树状图的元素之间进行连线的同时也实现了简单逻辑的元素定位。但是当底层元素的数量较多时，它们会一字排开，进而把界面拉的很长，使得整体布局不是特别紧凑，影响整体的协调性和美观性。

综上所述，如何能够提供一种定位树状图中底层元素位置的技术方案，使得整体布局比较紧凑、协调、美观，是目前本领域技术人员亟待解决的问题。

发明内容

有鉴于此，本发明的目的是提供一种以元素团形式定位树状图底层元素的方法及装置，使得树状图整体布局比较紧凑、协调、美观。

为了实现上述目的，本发明提供如下技术方案：

一种以元素团形式定位树状图底层元素的方法，包括：

从树状图所包含的元素中获取底层元素，将父元素相同的底层元素划分为一个元素团；

对于任一元素团，若该元素团内元素总数量小于或等于预设每行最大元素数量，则设置该元素团内首行元素数量等于元素团内元素总数量；否则，设置该元素团内首行元素数量等于预设每行最大元素数量；

根据每个所述元素团内首行元素数量以及预设原则将每个所述元素团内的底层元素进行分行；其中，所述预设原则为每个所述元素团内其他行元素数量等于或小于首行元素数量的原则。

优选的，所述根据每个所述元素团内首行元素数量以及预设原则将每个所述元素团内的底层元素进行分行，包括：

按照元素团自左向右的排列顺序，依次计算每个所述元素团内第一个底层元素在指定画布上的坐标值；

根据每个所述元素团内除第一个底层元素之外其他底层元素在该元素团中的排列次序、所述预设原则以及该元素团内首行元素数量，确定所述其他底层元素所处的行数以及列数，并依据每个所述元素团内第一个底层元素的坐标值、所述其他底层元素所处的行数以及列数、预先设定的该元素团内底层元素之间的间距，计算每个所述元素团内除第一个底层元素之外所述其他底层元素在所述指定画布上的坐标值；

将每个所述元素团内每个底层元素放置到所述指定画布上对应坐标值的位置，实现对每个所述元素团的分行。