CN114913267A - 脑图绘制方法、装置、设备和存储介质 - Google Patents

Abstract

本申请公开了一种脑图绘制方法、装置、设备和存储介质，属于计算机技术领域。包括：获取目标数据，目标数据包括n个层次的结点，n个层次中由第1个层次至第n个层次的结点顺序是由根结点至叶子结点的顺序，n为大于或等于2的整数；生成n个层次的结点中每个结点的数据卡片，数据卡片包括用于显示和编辑结点的数据元素的控件；根据n个层次的结点之间的排序关系，将n个层次的结点中每个结点的数据卡片显示在脑图页面；根据n个层次的结点之间的父子关系，绘制脑图页面中显示的各个结点的数据卡片之间的连接线。如此，对于技术人员来说，在脑图绘制时使用的技术均为前端的基础技术，无需再学习其他框架，从而使得实现简单。

Description

脑图绘制方法、装置、设备和存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种脑图绘制方法、装置、设备和存储介质。

背景技术

基于web(World Wide Web，全球广域网)端进行数据展示时，通常是以表格的形式将数据展示在web页面，然而，表格不能清晰的表达出数据的来源以及数据的流向。脑图(也称为思维导图)的出现解决了这个问题，脑图中包括数据之间的关系，采用脑图的形式将数据展示在web页面可以使用户清晰的看到数据的来源以及数据的流向，从而可以提高用户体验。

相关技术中，通过AntV/G6框架实现脑图绘制。AntV/G6框架中封装了可以绘制脑图的API(Application Program Interface，应用程序接口)函数。在绘制脑图时，以需要展示的树形结构的数据作为用于绘制脑图的API函数的参数，直接调用该API函数，就可以将该数据对应的脑图绘制在web页面中。

然而，上述脑图绘制方式需要调用AntV/G6框架中的API函数，这就需要技术人员对AntV/G6框架比较熟悉，那么技术人员就需要消耗较大的精力去学习AntV/G6框架，因而学习成本比较高，实现难度比较大。

发明内容

本申请提供了一种脑图绘制方法、装置、设备和存储介质，可以在较低的学习成本下绘制数据的脑图，实现简单。所述技术方案如下：

第一方面，提供了一种脑图绘制方法，所述方法包括：

获取目标数据，所述目标数据包括n个层次的结点，所述n个层次中由第1个层次至第n个层次的结点顺序是由根结点至叶子结点的顺序，所述n为大于或等于2的整数；

生成所述n个层次的结点中每个结点的数据卡片，所述数据卡片包括用于显示和编辑结点的数据元素的控件；

根据所述n个层次的结点之间的排序关系，将所述n个层次的结点中每个结点的数据卡片显示在脑图页面；

根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线。

在本申请中，获取目标数据，目标数据包括n个层次的结点。之后，生成该n个层次的结点中每个结点的数据卡片。然后根据该n个层次的结点之间的排序关系，将该n个层次的结点中每个结点的数据卡片显示在脑图页面中，再根据该n个层次的结点之间的父子关系，绘制该脑图页面中显示的各个结点的数据卡片之间的连接线。由于每个结点的数据卡片均是用于显示和编辑对应结点的数据元素的控件，所以每个数据卡片均可针对性的被触发，也即，在用户点击任意一个数据卡片的时候，终端就能直接获知所点击的是哪个数据卡片，从而获知是要对这个数据卡片所属的结点进行相应的交互操作，如此交互比较友好。并且，对于技术人员来说，在脑图绘制时所用的技术均为前端的基础技术，无需学习其他框架，从而使得实现简单。

第二方面，提供了一种脑图绘制装置，所述装置包括：

获取模块，用于获取目标数据，所述目标数据包括n个层次的结点，所述n个层次中由第1个层次至第n个层次的结点顺序是由根结点至叶子结点的顺序，所述n为大于或等于2的整数；

生成模块，用于生成所述n个层次的结点中每个结点的数据卡片，所述数据卡片包括用于显示和编辑结点的数据元素的控件；

第一显示模块，用于根据所述n个层次的结点之间的排序关系，将所述n个层次的结点中每个结点的数据卡片显示在脑图页面；

绘制模块，用于根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线。

第三方面，提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述的脑图绘制方法。

第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述的脑图绘制方法。

第五方面，提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述的脑图绘制方法的步骤。

可以理解的是，上述第二方面、第三方面、第四方面、第五方面的有益效果可以参见上述第一方面中的相关描述，在此不再赘述。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的一种脑图绘制方法的流程图；

图2是本申请实施例提供的一种数据卡片的示意图；

图3是本申请实施例提供的第一种确定第i个层次中第j个结点的数据区的原理图；

图4是本申请实施例提供的第二种确定第i个层次中第j个结点的数据区的原理图；

图5是本申请实施例提供的第三种确定第i个层次中第j个结点的数据区的原理图；

图6是本申请实施例提供的一种确定第i个层次中第一个结点的数据区的原理图；

图7是本申请实施例提供的另一种确定第i个层次中第一个结点的数据区的原理图；

图8是本申请实施例提供的第四种确定第i个层次中第j个结点的数据区的原理图；

图9是本申请实施例提供的第五种确定第i个层次中第j个结点的数据区的原理图；

图10是本申请实施例提供的一种确定第1个层次中每个结点的数据区的原理图；

图11是本申请实施例提供的另一种确定第1个层次中每个结点的数据区的原理图；

图12是本申请实施例提供的一种两个结点的数据卡片之间的连接线的示意图；

图13是本申请实施例提供的一种确定两个结点中每个结点对应的连接线端点的原理图；

图14是本申请实施例提供的另一种两个结点的数据卡片之间的连接线的示意图；

图15是本申请实施例提供的又一种两个结点的数据卡片之间的连接线的示意图；

图16是本申请实施例提供的另一种脑图绘制方法的流程图；

图17是本申请实施例提供的一种脑图页面的示意图；

图18是本申请实施例提供的一种脑图绘制装置的结构示意图；

图19是本申请实施例提供的一种计算机设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

应当理解的是，本申请提及的“多个”是指两个或两个以上。在本申请的描述中，除非另有说明，“/”表示或的意思，比如，A/B可以表示A或B；本文中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，比如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，为了便于清楚描述本申请的技术方案，采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分。本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定，并且“第一”、“第二”等字样也并不限定一定不同。

在对本申请实施例进行详细地解释说明之前，先对本申请实施例的应用场景予以说明。

相关技术中的一种脑图绘制方法是通过AntV/G6框架实现，但是AntV/G6框架没有溯源功能，因此使用AntV/G6框架绘制的脑图不能进行溯源操作，也就是不能通过AntV/G6框架绘制的脑图查看某个数据的来源。

相关技术中的另一种脑图绘制方法是通过canvas(画布)实现，具体实现步骤为：将web页面看作一个画布，以web页面的左上角为坐标系的原点设置一个坐标系，首先确定需要展示的树形结构的数据中每个结点在画布中的坐标点，然后根据每个结点的坐标点在画布上画出每个结点，之后根据每个结点的坐标点在画布上画出父结点与子结点之间的路径，来实现脑图绘制。

但是，由于使用canvas实现脑图绘制的方式中web页面上的内容均是画出来的，所以实质上web页面上呈现的脑图是一幅画。并且，在web页面中进行的任意操作均依赖于这个坐标系，因而在进行某个结点的交互操作时，若在web页面上检测到点击操作，需要先确定出点击位置的坐标点，再将web页面中点击位置的坐标点与每个结点的坐标点进行比较，确定web页面中的点击位置所对应的结点，之后才能确定这个结点与其他结点之间的关系。这种基于坐标系的脑图绘制方式依赖性强，对脑图的交互操作的流程较为复杂，而且实现添加结点等复杂的交互功能较为困难。另外，由于这种方式绘制的脑图实质上是一幅画，所以导致这种方式比较依赖分辨率，因而在屏幕分辨率比较大的情况下显示出来的脑图比较模糊。

为此，本申请实施例提供了一种脑图绘制方法，该脑图绘制方法可以应用于绘制脑图的场景中，具体可以应用于将数据以脑图的形式展示在页面的场景中。具体地，获取需要展示的数据，该数据为树形结构的数据，其包括多个层次的结点。之后根据该多个层次的结点，生成每个结点的数据卡片，每个结点的数据卡片用于展示对应结点的数据元素，之后把每个结点的数据卡片显示在页面中，再根据各个结点之间的父子关系，绘制页面中各个结点的数据卡片之间的连接线，来完成脑图绘制。每个结点的数据卡片均是用于显示和编辑对应结点的数据元素的控件，因而每个数据卡片均可针对性的被触发，也即，在用户点击任意一个数据卡片的时候，终端就能直接知道点击的是哪个数据卡片，从而知道是要对这个数据卡片所属的结点进行相应的交互操作，如此交互比较友好。而且本申请实施例提供的脑图绘制方法对于技术人员来说所用的技术均为前端的基础技术，无需学习其他框架，从而使得实现简单。

下面对本申请实施例提供的脑图绘制方法进行详细地解释说明。

图1是本申请实施例提供的一种脑图绘制方法的流程图。参见图1，该方法包括以下步骤。

步骤101：终端获取目标数据，目标数据包括n个层次的结点。

该n个层次中由第1个层次至第n个层次的结点顺序是由根结点至叶子结点的顺序，n为大于或等于2的整数。

目标数据为需要以脑图的形式进行展示的数据。示例地，目标数据可以为技术人员根据需求设计的数据，且目标数据可以从后端(包括但不限于服务器)获取。目标数据的结构为树形结构，例如：目标数据是一个treeList(树形列表)。

比如，目标数据为如下表1所示的树形列表，表1包括3个层次的结点，第一个层次中的结点(发起方)为第二个层次中的两个结点(数据预处理1和数据预处理2)的父结点，也为整个树形列表的根结点。第二个层次中的第一个结点(数据预处理1)具有两个子结点(特征工程1和特征工程2)，这两个子结点均处于第三个层次。第二个层次中的第二个结点(数据预处理2)具有两个子结点(特征工程3和特征工程4)，这两个子结点均处于第三个层次。

表1

本申请实施例仅以上表1为例来对目标数据进行说明，上表1并不对本申请实施例构成限定。

可选地，终端在获取目标数据之前，可以先搭建一个前端框架，例如可以搭建一个React框架，或者搭建一个Vue框架，本申请实施例对此不作限定。如此，后续就可以使用所搭建的前端框架来绘制相关数据的脑图。

可选地，终端获取到目标数据之后，可以选用UI(User Interface，用户界面)组件来搭建web页面。例如，可以使用ANTD组件库中的组件来搭建web页面。如此，便于后续在所搭建的web页面中绘制脑图。

步骤102：终端生成该n个层次的结点中每个结点的数据卡片，该数据卡片包括用于显示和编辑结点的数据元素的控件。

该n个层次的结点中每个结点的数据卡片用于展示对应的结点的数据元素。数据卡片中包括的控件是指对数据和方法的封装，控件可以有自己的属性和方法，其中，方法是控件的一些简单而可见的功能，控件可被触发。在本申请实施例中表现为数据卡片可被触发，也即，用户可以针对性地对数据卡片执行操作，如用户可以直接点击选定某个数据卡片。

可选地，数据卡片中的控件可以实现选择对应结点、删除对应结点、修改对应结点的数据元素、添加新结点等功能。也即，通过数据卡片中的控件可以编辑结点的数据元素。

可选地，终端生成该n个层次的结点中每个结点的数据卡片的方式可以为使用HTML(Hyper Text Markup Language，超文本标记语言)的标签库中的<div>标签定义一个块级元素，将对应结点的数据元素添加到使用<div>标签定义的块级元素中，即可得到对应结点的数据卡片。这种情况下，该数据卡片即是使用<div>标签定义的块级元素。

<div>标签用于定义HTML文档中的分隔(division)或部分(section)。<div>标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。<div>标签可以把文档分割为独立的、不同的部分。如此，终端生成的每个结点的数据卡片相互独立，格式设置简单，且对于技术人员来说，技术实现简单。例如，图2为该数据卡片的示意图，如图2所示，图2中包括该数据卡片的边框201、对应结点的数据元素202、删除按钮203、添加按钮204，其中，删除按钮203用于触发删除对应结点的操作，添加按钮204用于触发添加对应结点的新的子结点的操作。

步骤103：终端根据该n个层次的结点之间的排序关系，将该n个层次的结点中每个结点的数据卡片显示在脑图页面。

该脑图页面可以是web页面，当然，也可以是其他能够实现脑图绘制的页面，本申请实施例对此不作限定。

这种情况下，在进行交互操作时，用户点击该脑图页面中显示的某个数据卡片时，由于这个数据卡片是可被触发的，因此终端可以直接知道用户点击的是该脑图页面上的哪个数据卡片，从而知道是要对这个数据卡片所属的结点进行对应的操作，从而使得交互操作更加快捷、友好。

具体地，步骤103的操作可以由以下步骤(1)-步骤(5)实现。

(1)终端在该脑图页面中确定与该n个层次一一对应的n个结点区域。

该n个结点区域中的每个结点区域用于显示对应层次的结点的数据卡片。如此可以使得整个脑图页面的层次比较清晰。示例地，该n个结点区域中的每个结点区域可以是矩形区域。

可选地，步骤(1)的操作可以为：将第一预设长度确定为该n个结点区域中的每个结点区域的长度；根据该n个层次中结点最多的层次中的结点数，确定该n个结点区域中每个结点区域的宽度。

第一预设长度可以预先进行设置。示例地，第一预设长度可以由技术人员根据实际需求设置得到；或者，第一预设长度可以由终端根据该脑图页面的长度以及目标数据的层次数自动设置得到，如终端可以将该脑图页面的长度除以目标数据的层次数后得到的数值减去事先设定的间隔值，得到第一预设长度。

可选地，该脑图页面中该n个结点区域从第一个结点区域到第n个结点区域的布局方式可以采用绝对定位的方式。由于绝对定位的方式会使该脑图页面脱离文档流，所以当该脑图页面中的一个结点区域中新增结点的数据卡片时，可以重新确定这个结点区域的宽度。

可选地，该n个结点区域中的每个结点区域中从第一个结点的数据卡片到最后一个结点的数据卡片的布局方式可以为Flex(灵活)布局方式。

(2)终端根据该n个层次中的第n-1个层次中各个结点之间的排序关系，在该n个结点区域中的第n个结点区域，确定第n个层次中每个结点的数据区。

任意一个结点的数据区用于显示这个结点的数据卡片，一个数据区中只显示一个数据卡片。这种情况下，确定了第n个层次中每个结点的数据区就相当于确定了每个结点的数据卡片在该脑图页面中放置的位置。

为了保证该脑图页面的美观性，可以将该n个层次中各个结点的数据卡片显示的位置与每个结点的子结点的数据卡片显示的位置进行关联，如此才能保证属于同一父结点的子结点的数据卡片均匀显示在这个父结点的数据卡片后面，从而保证该脑图页面的数据关系比较清晰。为此，需要从最后一个结点区域开始依次确定每个结点区域中的各个结点的数据区，则先在该n个结点区域中的第n个结点区域，确定第n个层次中每个结点的数据区。

具体地，步骤(2)的操作可以为：对于第n个层次中的第一个结点，根据第n个层次中第一个结点的父结点在第n-1个层次中的结点中的排序位置，确定第n个层次中第一个结点对应的显示距离值，将与第n个结点区域的目标边界相距第n个层次中第一个结点对应的显示距离值的数据区确定为第n个层次中第一个结点的数据区；对于第n个层次中的第一目标结点，根据第一目标结点的父结点与第二目标结点的父结点之间的排序位置差异以及第二目标结点对应的显示距离值，确定第一目标结点对应的显示距离值，将与第n个结点区域的目标边界相距第一目标结点对应的显示距离值的数据区确定为第一目标结点的数据区。

任意一个结点对应的显示距离值为这个结点的数据卡片所在的数据区相距这个结点的数据卡片所在的结点区域的目标边界的距离值。该n个结点区域中每个结点区域的目标边界可以为上边界、下边界、左边界、右边界中的一个边界，本申请实施例对此不作限定。例如：第n个层次中第一个结点对应的显示距离值为第n个层次中第一个结点的数据区(即第一个结点的数据卡片所在的数据区)的上边界距离第n个结点区域的上边界的距离值。

由于第n个层次中的每个结点均没有子结点，所以第n个层次中每个结点的数据区的宽度可以为该结点的数据卡片的宽度。也即，对于没有子结点的任意的一个结点来说，其数据区的宽度均为这个结点的数据卡片的宽度。为了便于确定各个结点的数据区，可以将各个结点的数据卡片的宽度均预先设置为第一预设宽度，且第一预设宽度可以由技术人员根据该脑图页面的宽度进行设置。

第一目标结点是第n个层次中除第一个结点之外的任意一个结点，第二目标结点是第n个层次中与第一目标结点相邻的上一个结点。

其中，终端根据第n个层次中第一个结点的父结点在第n-1个层次中的结点中的排序位置，确定第n个层次中第一个结点对应的显示距离值的操作可以在如下三种情况下实现。

第一种情况，若第n个层次中第一个结点的父结点为第n-1个层次中的第j个结点，则将第一预设间隔值、j-1倍的第二预设间隔值、j-1倍的第一预设宽度累加，得到第n个层次中第一个结点对应的显示距离值，j为正整数。

第一预设间隔值为第n个结点区域的目标边界与第n个结点区域中第一个数据区之间的间隔值。第一预设间隔值可以预先进行设置，且第一预设间隔值可以由技术人员根据该脑图页面的宽度进行设置。

第二预设间隔值为该n个结点区域中第二个结点区域至最后一个结点区域中任意一个结点区域中相邻两个数据区之间间隔的距离值。第二预设间隔值可以预先进行设置，且第二预设间隔值可以由技术人员根据该脑图页面的宽度进行设置。

如此，无论相邻两个结点是否同属于一个父结点，均将相邻两个结点的数据区之间的间隔设置为第二预设间隔值，可以节省计算资源。

例如：目标数据具有4个层次，第一预设间隔值为10。第4个层次中第一个结点的父结点为第3个层次中的第一个结点，则将第一预设间隔值10确定为第4个层次中第一个结点对应的显示距离值。

又例如：目标数据具有4个层次，第一预设间隔值为10，第二预设间隔值为10，第一预设宽度为20。第4个层次中第一个结点的父结点为第3个层次中的第三个结点，则将第一预设间隔值10、2倍的第二预设间隔值10、2倍的第一预设宽度20累加，得到第4个层次中第一个结点对应的显示距离值为70。

第二种情况，若第n个层次中第一个结点的父结点为第n-1个层次中的第j个结点，且第n-1个层次中的前j个结点的父结点为同一结点，则将第一预设间隔值、j-1倍的第二预设间隔值、j-1倍的第一预设宽度累加，得到第n个层次中第一个结点对应的显示距离值。

这种情况下，第二预设间隔值为该n个结点区域中第二个结点区域至最后一个结点区域中任意一个结点区域中属于同一个父结点的相邻两个结点的数据区之间间隔的距离值。

若第n-1个层次中的前j个结点的父结点为同一结点，说明前j个结点中相邻两个结点的数据区之间的间隔值相同(即为第二预设间隔值)，则可以将第一预设间隔值、j-1倍的第二预设间隔值、j-1倍的第一预设宽度累加，得到第n个层次中第一个结点对应的显示距离值。

例如：目标数据具有4个层次，第一预设间隔值为10，第二预设间隔值为10，第一预设宽度为20。第4个层次中第一个结点的父结点为第3个层次中的第2个结点，且第3个层次中的前2个结点的父结点为同一结点，则可以将第一预设间隔值10、第二预设间隔值10、第一预设宽度20累加，得到第4个层次中第一个结点对应的显示距离值为40。

第三种情况，若第n个层次中第一个结点的父结点为第n-1个层次中的第j个结点，且第n-1个层次中的前j个结点的父结点为m个不同结点，则将第一预设间隔值、j-m倍的第二预设间隔值、m-1倍的第三预设间隔值、j-1倍的第一预设宽度累加，得到第n个层次中第一个结点对应的显示距离值，m为大于或等于2的整数。

第三预设间隔值为不属于同一父结点的相邻两个结点的数据区之间的间隔值，且第三预设间隔值大于第二预设间隔值。如此将属于同一父结点的相邻两个结点的数据区之间的间隔值和不属于同一父结点的相邻两个结点的数据区之间的间隔值设置的不同，使得不属于同一父结点的相邻两个结点的数据区之间的间隔增大，如此使得属于同一父结点的结点的数据卡片可以集中显示，从而使得该脑图页面的数据关系更加清晰。

例如：目标数据具有4个层次，第一预设间隔值为10，第二预设间隔值为10，第三预设间隔值为15，第一预设宽度为20。第4个层次中第一个结点的父结点为第3个层次中的第2个结点，且第3个层次中的前2个结点的父结点为2个不同的结点，则可以将第一预设间隔值10、第三预设间隔值15和第一预设宽度20累加，得到第4个层次中第一个结点对应的显示距离值为45。

其中，终端根据第一目标结点的父结点与第二目标结点的父结点之间的排序位置差异以及第二目标结点对应的显示距离值，确定第一目标结点对应的显示距离值的操作可以在如下三种情况下实现。

第一种情况，若第一目标结点的父结点与第二目标结点的父结点之间间隔k个结点，则将第二目标结点对应的显示距离值、k+1倍的第二预设间隔值、k+1倍的第一预设宽度累加，得到第一目标结点对应的显示距离值，k为大于或等于0的整数。

这种情况下，将相邻两个结点的数据区之间的间隔均设置为第二预设间隔值，可以节省计算资源。

k为0时，第一目标结点的父结点与第二目标结点的父结点相邻。k大于或等于1时，第一目标结点的父结点与第二目标结点的父结点之间间隔有至少一个其他结点。

若第一目标结点的父结点与第二目标结点的父结点之间间隔k个结点，则可以将第二目标结点对应的显示距离值、第一目标结点的父结点与第二目标结点的父结点之间间隔的总和(即k+1倍的第二预设间隔值)、k+1个结点(即该k个结点和第二目标结点)的数据卡片的宽度(即k+1倍的第一预设宽度)进行累加，来得到第一目标结点对应的显示距离值。

例如：目标数据具有4个层次，第一预设间隔值为10，第二预设间隔值为10，第一预设宽度为20，第二目标结点对应的显示距离值为60。第一目标结点的父结点与第二目标结点的父结点之间间隔2个结点，则可以将第二目标结点对应的显示距离值60、3倍的第二预设间隔值10、3倍的第一预设宽度20进行累加，得到第一目标结点对应的显示距离值为150。

第二种情况，若第一目标结点的父结点与第二目标结点的父结点之间间隔k个结点，则在第一目标结点的祖父结点与第二目标结点的祖父结点为同一结点的情况下，将第二目标结点对应的显示距离值、k+1倍的第二预设间隔值、k+1倍的第一预设宽度累加，得到第一目标结点对应的显示距离值。

这种情况下，若第一目标结点的祖父结点与第二目标结点的祖父结点为同一结点，说明该k个结点中相邻两个结点的数据区之间的间隔值相同，则可以将第二目标结点对应的显示距离值、第一目标结点的父结点和第二目标结点的父结点之间间隔的总和(即k+1倍的第二预设间隔值)、k+1个结点(即该k个结点和第二目标结点)的数据卡片的宽度(即k+1倍的第一预设宽度)进行累加，得到第一目标结点对应的显示距离值。

例如：目标数据具有4个层次，第一预设间隔值为10，第二预设间隔值为10，第一预设宽度为20，第二目标结点对应的显示距离值为60。第一目标结点的父结点与第二目标结点的父结点之间间隔2个结点，且第一目标结点的祖父结点与第二目标结点的祖父结点为同一结点，则可以将第二目标结点对应的显示距离值60、3倍的第二预设间隔值10、3倍的第一预设宽度20累加，得到第一目标结点对应的显示距离值为150。

第三种情况，若第一目标结点的父结点与第二目标结点的父结点之间间隔k个结点，在第一目标结点的祖父结点与第二目标结点的祖父结点为p个不同结点的情况下，将第二目标结点对应的显示距离值、k-p+2倍的第二预设间隔值、p-1倍的第三预设间隔值、k+1倍的第一预设宽度累加，得到第一目标结点对应的显示距离值，p为大于或等于2的整数。

这种情况下，若第一目标结点的祖父结点与第二目标结点的祖父结点为p个不同结点，说明该k个结点中相邻两个结点之间的间隔中存在p-1个第三预设间隔值，且存在k-p+2个第二预设间隔值，则可以将第二目标结点对应的显示距离值、第一目标结点的父结点和第二目标结点的父结点之间间隔的总和(即k-p+2倍的第二预设间隔值与p-1倍的第三预设间隔值之和)、k+1个结点(即该k个结点和第二目标结点)的数据卡片的宽度(即k+1倍的第一预设宽度)进行累加，得到第一目标结点对应的显示距离值。

例如：目标数据具有4个层次，第一预设间隔值为10，第二预设间隔值为10，第三预设间隔值为15，第一预设宽度为20，第二目标结点对应的显示距离值为60。第一目标结点的父结点与第二目标结点的父结点之间间隔2个结点，且第一目标结点的祖父结点与第二目标结点的祖父结点为2个不同结点，则可以将第二目标结点对应的显示距离值60、2倍的第二预设间隔值10、第三预设间隔值15、3倍的第一预设宽度20累加，得到第一目标结点对应的显示距离值为155。

(3)终端根据该n个层次中第i+1个层次中的每个结点的数据区，在该n个结点区域中的第i个结点区域，确定该n个层次中的第i个层次中每个结点的数据区，i是大于或等于2且小于或等于n-1的整数。

由于目标数据中各层次之间存在父子关系，所以目标数据中后一层次的结点的数据区会影响到前一层次的结点的数据区，因而根据第i+1个层次中每个结点的数据区，在第i个结点区域确定第i个层次中每个结点的数据区，可以使得确定的第i个层次中每个结点的数据区更加合理，从而保证该脑图页面呈现的数据关系更加清晰。

具体地，步骤(3)的操作可以通过如下两种可能的方式实现。

下面对第一种可能的方式进行说明，第一种可能的方式可以在如下五种情况下实现。

第一种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点存在子结点，则将第i个层次中第j个结点的第一个子结点对应的显示距离值确定为第i个层次中第j个结点对应的显示距离值，j为正整数；将第i个层次中第j个结点的所有子结点的数据区的宽度之和与第i个层次中第j个结点的所有相邻两个子结点的数据区之间的间隔值之和相加，得到第i个层次中的第j个结点对应的显示宽度；将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值、且宽度为第i个层次中第j个结点对应的显示宽度的数据区确定为第i个层次中第j个结点的数据区。

第i个结点区域的目标边界与第i+1个结点区域的目标边界可以在同一直线上，则在第i个层次中的第j个结点存在子结点的情况下，第i个层次中的第j个结点对应的显示距离值与第i个层次中的第j个结点的第一个子结点对应的显示距离值相同，因而可以将第i个层次中第j个结点的第一个子结点对应的显示距离值确定为第i个层次中第j个结点对应的显示距离值。

这种情况下，第i个层次中的第j个结点的数据区的宽度为第i个层次中第j个结点的所有子结点的数据区的宽度之和与第i个层次中第j个结点的所有相邻两个子结点的数据区之间的间隔值之和相加得到的，如此能够保证属于同一父结点的所有子结点的数据区均在这个父结点的数据区的下属范围内，从而使得该脑图页面中的数据关系更加清晰。

例如：目标数据具有4个层次，i为2，j为3。图3为确定第i个层次中第j个结点的数据区的原理图。参见图3，图3中包括第2个结点区域301、第3个结点区域302、第2个层次中的第三个结点的两个子结点的数据区303、第2个层次中的第三个结点的数据区304。

第3个结点区域302的目标边界距离第2个层次中的第三个结点的第一个子结点的数据区303的距离为40，即第2个层次中的第三个结点的第一个子结点对应的显示距离值为40，第2个层次中第三个结点的每个子结点的数据区303的宽度为12，第2个层次中第三个结点的相邻两个子结点的数据区303之间的间隔值为10。据此，第2个层次中第三个结点对应的显示距离值为第2个层次中第三个结点的第一个子结点对应的显示距离值40，第2个层次中第三个结点对应的显示宽度为第2个层次中第三个结点的两个子结点的数据区303的宽度之和(24)加上第2个层次中第三个结点的所有相邻两个子结点的数据区303之间的间隔值(10)，即第2个层次中第三个结点对应的显示宽度为34。则可以确定与第2个结点区域301的目标边界相距40、且宽度为34的数据区为第2个层次中第三个结点的数据区304。

第二种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点不存在子结点，且第i个层次中第j个结点是第i个层次中第一个结点，则将第一预设间隔值确定为第i个层次中第j个结点对应的显示距离值，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值的数据区确定为第i个层次中第j个结点的数据区。

由于第i个层次中的第j个结点不存在子结点，所以可以直接将第i个层次中第j个结点的数据区的宽度确定为第i个层次中第j个结点的数据卡片的宽度(即第一预设宽度)。也即，这种情况下，第i个层次中的第j个结点的数据区的宽度默认为第一预设宽度。

第三种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点不存在子结点，且第i个层次中第j个结点不是第i个层次中第一个结点，则将第一预设间隔值、第i个层次中前j-1个结点的数据区的宽度之和、第i个层次中前j-1个结点中所有相邻两个结点的数据区之间的间隔值之和、第二预设间隔值累加，得到第i个层次中第j个结点对应的显示距离值，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值的数据区确定为第i个层次中第j个结点的数据区。

这种情况下，第i个层次中的第j个结点的数据区的宽度默认为第i个层次中第j个结点的数据卡片的宽度，即默认为第一预设宽度。

例如：目标数据具有4个层次，i为2，j为3，第一预设间隔值为10，第二预设间隔值为10，第一预设宽度为12。图4为确定第i个层次中第j个结点的数据区的原理图。参见图4，图4中包括第2个结点区域401、第3个结点区域402、第2个层次中的前两个结点的数据区403、第2个层次中的第三个结点的数据区404。第2个结点区域401中第一个数据区403与第2个结点区域401的目标边界之间的距离值(即第一预设间隔值)为10，第2个结点区域401中前两个数据区403中每个数据区403的宽度为12，第2个结点区域401中第一个数据区403和第二个数据区403之间的间隔值为10。则第一预设间隔值(10)、第2个结点区域401中前两个结点的数据区403的宽度之和(24)、第2个结点区域401中前两个结点的数据区403之间的间隔值(10)和第二预设间隔值(10)的总和54为第2个层次中的第三个结点对应的显示距离值。之后可以确定与第2个结点区域401的目标边界相距54、且宽度为12的数据区为第2个层次中第三个结点的数据区404。

第四种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点不存在子结点，且第i个层次中第j个结点不是第i个层次中第一个结点，则在第i个层次中第j个结点的父结点与第j-1个结点的父结点为同一结点的情况下，将第一预设间隔值、第i个层次中前j-1个结点的数据区的宽度之和、第i个层次中前j-1个结点中所有相邻两个结点的数据区之间的间隔值之和、第二预设间隔值累加，得到第i个层次中第j个结点对应的显示距离值；将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值的数据区确定为第i个层次中第j个结点的数据区。

这种情况下，第i个层次中的第j个结点的数据区的宽度默认为第i个层次中第j个结点的数据卡片的宽度，即默认为第一预设宽度。

若第i个层次中第j个结点的父结点与第j-1个结点的父结点为同一结点，说明第i个层次中第j个结点的数据区和第j-1个结点的数据区之间的间隔值为第二预设间隔值。如此可以将第一预设间隔值、第i个层次中前j-1个结点的数据区的宽度之和、第i个层次中前j-1个结点中所有相邻两个结点的数据区之间的间隔值之和、第二预设间隔值累加，得到第i个层次中第j个结点对应的显示距离值。

第五种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点不存在子结点，且第i个层次中第j个结点不是第i个层次中第一个结点，则在第i个层次中第j个结点的父结点与第j-1个结点的父结点为不同结点的情况下，将第一预设间隔值、第i个层次中前j-1个结点的数据区的宽度之和、第i个层次中前j-1个结点中所有相邻两个结点的数据区之间的间隔值之和、第三预设间隔值累加，得到第i个层次中第j个结点对应的显示距离值；将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值的数据区确定为第i个层次中第j个结点的数据区，第三预设间隔值大于第二预设间隔值。

这种情况下，第i个层次中的第j个结点的数据区的宽度默认为第i个层次中第j个结点的数据卡片的宽度，即默认为第一预设宽度。

若第i个层次中第j个结点的父结点与第j-1个结点的父结点为不同结点，说明第i个层次中第j个结点的数据区和第j-1个结点的数据区之间的间隔值与属于同一父结点的相邻两个结点的数据区之间的间隔值(即第二预设间隔值)不同，也即第i个层次中第j个结点的数据区和第j-1个结点的数据区之间的间隔值为第三预设间隔值。如此可以使得属于同一父结点的结点的数据区集中显示，可以使得该脑图页面的数据关系更加清晰。

例如：目标数据具有4个层次，i为2，j为3，第一预设间隔值为10，第三预设间隔值为15，第一预设宽度为12。图5为确定第i个层次中第j个结点的数据区的原理图。参见图5，图5中包括第2个结点区域501、第3个结点区域502、第2个层次中的前两个结点的数据区503、第2个层次中的第三个结点的数据区504。第2个结点区域501中前两个数据区503中每个数据区503的宽度为12，第2个结点区域501中第一个数据区503和第二个数据区503之间的间隔值为10。则第一预设间隔值(10)、第2个结点区域501中前两个结点的数据区503的宽度之和(24)、第2个结点区域501中前两个结点的数据区503之间的间隔值(10)和第三预设间隔值(15)的总和59为第2个层次中的第三个结点对应的显示距离值。之后可以确定与第2个结点区域501的目标边界相距59、且宽度为12的数据区为第2个层次中第三个结点的数据区504。

下面对第二种可能的方式进行说明，第二种可能的方式可以在如下三种情况下实现。

第一种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点为第i个层次中的第一个结点，则将第一预设间隔值确定为第i个层次中的第j个结点对应的显示距离值。在第i个层次中的第j个结点不存在子结点的情况下，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值的数据区确定为第i个层次中第j个结点的数据区，这种情况下，第i个层次中的第j个结点的数据区的宽度默认为第i个层次中第j个结点的数据卡片的宽度，即默认为第一预设宽度。在第i个层次中的第j个结点存在子结点的情况下，将第i个层次中第j个结点的所有子结点的数据区的宽度之和与第i个层次中第j个结点的所有相邻两个子结点的数据区之间的间隔值之和相加，得到第i个层次中的第j个结点对应的显示宽度，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值、且宽度为第i个层次中第j个结点对应的显示宽度的数据区确定为第i个层次中第j个结点的数据区。

例如：目标数据具有4个层次，i为2，j为1，第一预设间隔值为10，第一预设宽度为12。图6为确定第i个层次中第一个结点的数据区的原理图。参见图6，图6中包括第2个结点区域601、第3个结点区域602、第2个层次中第一个结点的数据区603。第2个层次中第一个结点没有子结点。第2个层次中第一个结点对应的显示距离值为第一预设间隔值10，由于第2个层次中第一个结点没有子结点，所以可以确定与第2个结点区域601的目标边界相距10、且宽度为12的数据区为第2个层次中第一个结点的数据区603。

又例如：目标数据具有4个层次，i为2，j为1，第一预设间隔值为10，第二预设间隔值为10，第一预设宽度为12。图7为确定第i个层次中第一个结点的数据区的原理图。参见图7，图7中包括第2个结点区域701、第3个结点区域702、第2个层次中第一个结点的数据区703、第2个层次中第一个结点的两个子结点的数据区704。第2个层次中第一个结点对应的显示距离值为第一预设间隔值10。将第2个层次中第一个结点的两个子结点的数据区704的宽度之和(24)与第2个层次中第一个结点的所有相邻两个子结点的数据区704之间的间隔值(10)相加，得到第2个层次中的第一个结点对应的显示宽度为34。因而可以确定与第2个结点区域701的目标边界相距10、且宽度为34的数据区为第2个层次中第一个结点的数据区703。

第二种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点不是第i个层次中的第一个结点，则在第i个层次中的第j个结点的父结点和第j-1个结点的父结点为同一结点的情况下，将第i个层次中的第j-1个结点对应的显示距离值、第i个层次中的第j-1个结点的数据区的宽度和第二预设间隔值累加，得到第i个层次中的第j个结点对应的显示距离值，或者在第i个层次中的第j个结点的父结点和第j-1个结点的父结点为不同结点的情况下，将第i个层次中的第j-1个结点对应的显示距离值、第i个层次中的第j-1个结点的数据区的宽度和第三预设间隔值进行累加，得到第i个层次中的第j个结点对应的显示距离值。在第i个层次中的第j个结点不存在子结点的情况下，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值的数据区确定为第i个层次中第j个结点的数据区，这种情况下，第i个层次中的第j个结点的数据区的宽度默认为第i个层次中第j个结点的数据卡片的宽度，即默认为第一预设宽度。在第i个层次中的第j个结点存在子结点的情况下，将第i个层次中第j个结点的所有子结点的数据区的宽度之和与第i个层次中第j个结点的所有相邻两个子结点的数据区之间的间隔值之和相加，得到第i个层次中的第j个结点对应的显示宽度，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值、且宽度为第i个层次中第j个结点对应的显示宽度的数据区确定为第i个层次中第j个结点的数据区。

例如：目标数据具有4个层次，i为2，j为3，第二预设间隔值为10，第一预设宽度为12。图8为确定第i个层次中第j个结点的数据区的原理图。参见图8，图8中包括第2个结点区域801、第3个结点区域802、第2个层次中前两个结点的数据区803、第2个层次中第三个结点的数据区804。第2个层次中第二个结点的父结点与第三个结点的父结点为同一结点。第2个层次中第二个结点对应的显示距离值为40，第2个层次中第二个结点的数据区的宽度为12，第2个层次中第三个结点没有子结点。则将第2个结点对应的显示距离值(40)、第2个层次中第二个结点的数据区的宽度(12)、第二预设间隔值(10)累加，得到第2个层次中第三个结点对应的显示距离值为62。由于第2个层次中第三个结点没有子结点，则可以确定与第2个结点区域801的目标边界相距62、且宽度为12的数据区为第2个层次中第三个结点的数据区804。

又例如：目标数据具有4个层次，i为2，j为3，第二预设间隔值为10，第一预设宽度为12。图9为确定第i个层次中第j个结点的数据区的原理图。参见图9，图9中包括第2个结点区域901、第3个结点区域902、第2个层次中前两个结点的数据区903、第2个层次中第三个结点的数据区904、第2个层次中第三个结点的两个子结点的数据区905。第2个层次中第二个结点的父结点与第三个结点的父结点为同一结点。第2个层次中第二个结点对应的显示距离值为40，第2个层次中第二个结点的数据区的宽度为12。则将第2个结点对应的显示距离值(40)、第2个层次中第二个结点的数据区的宽度(12)、第二预设间隔值(10)累加，得到第2个层次中第三个结点对应的显示距离值为62。将第2个层次中第三个结点的两个子结点的数据区905的宽度之和(24)与第2个层次中第三个结点的所有相邻两个子结点的数据区905之间的间隔值(10)相加，得到第2个层次中的第三个结点对应的显示宽度为34，则可以确定与第2个结点区域901的目标边界相距62、且宽度为34的数据区为第2个层次中第三个结点的数据区904。

第三种情况，对于第i个层次中的第j个结点，若第i个层次中的第j个结点不是第i个层次中的第一个结点，则将第i个层次中的第j-1个结点对应的显示距离值、第i个层次中的第j-1个结点的数据区的宽度和第二预设间隔值累加，得到第i个层次中的第j个结点对应的显示距离值。在第i个层次中的第j个结点不存在子结点的情况下，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值的数据区确定为第i个层次中第j个结点的数据区，这种情况下，第i个层次中的第j个结点的数据区的宽度默认为第i个层次中第j个结点的数据卡片的宽度，即默认为第一预设宽度。在第i个层次中的第j个结点存在子结点的情况下，将第i个层次中第j个结点的所有子结点的数据区的宽度之和与第i个层次中第j个结点的所有相邻两个子结点的数据区之间的间隔值之和相加，得到第i个层次中的第j个结点对应的显示宽度，将与第i个结点区域的目标边界相距第i个层次中第j个结点对应的显示距离值、且宽度为第i个层次中第j个结点对应的显示宽度的数据区确定为第i个层次中第j个结点的数据区。

(4)终端在该n个结点区域中的第1个结点区域，确定第1个层次中每个结点的数据区。

在一些实施例中，步骤(4)的操作可以为：对于第1个层次中的第一个结点，将第四预设间隔值确定为第1个层次中第一个结点对应的显示距离值，将与第1个结点区域的目标边界相距第1个层次中第一个结点对应的显示距离值的数据区确定为第1个层次中第一个结点的数据区；对于第1个层次中的第s个结点，将第1个层次中第s-1个结点对应的显示距离值、第1个层次中第s-1个结点的数据区的宽度、第五预设间隔值累加，或者，将第1个层次中第s-1个结点对应的显示距离值、第1个层次中第s-1个结点的数据区的宽度、第六预设间隔值累加，得到第1个层次中第s个结点对应的显示距离值，将与第1个结点区域的目标边界相距第1个层次中第s个结点对应的显示距离值的数据区确定为第1个层次中第s个结点的数据区，s为大于或等于2的整数。

第四预设间隔值为第1个结点区域的目标边界与第1个结点区域的第一个数据区之间的间隔值。第四预设间隔值可以预先进行设置，且第四预设间隔值可以由技术人员根据该脑图页面的宽度进行设置。

第五预设间隔值和第六间隔值为第1个结点区域中相邻两个数据区之间的间隔值，第五预设间隔值和第六间隔值可以预先进行设置，且第五预设间隔值和第六间隔值可以由技术人员根据该脑图页面的宽度进行设置。

可选地，目标数据中还包含有第1个层次的结点的归属信息，例如：两个公司同时合作一个项目，第1个层次中的两个结点分别为这两个公司的项目数据，那么项目数据中的公司名称就是归属信息。

可选地，终端可以将第1个层次中每个结点的归属信息显示在对应结点的数据卡片中，也可以将每个结点的归属信息单独显示。若将每个结点的归属信息单独显示，则可以生成用于展示归属信息的数据卡片，用于展示归属信息的数据卡片的宽度可以预先设置。

在确定第1个层次中每个结点的数据区时依次确定具有同一归属信息的结点的数据区，在具有同一个归属信息的结点的数据区确定完成之后，再开始确定具有另外一个归属信息的结点的数据区。具有不同归属信息的相邻两个结点的数据区之间的间隔值与具有同一个归属信息的结点的数据区之间的间隔值可以设置的不同。例如：具有同一归属信息的相邻两个结点的数据区之间的间隔值可以设置为第五预设间隔值，具有不同归属信息的相邻两个结点的数据区之间的间隔值可以设置为第六预设间隔值，第六预设间隔值大于第五预设间隔值。

这种情况下，对于第1个层次中的第s个结点，若第1个层次中第s个结点与第s-1个结点的归属信息相同，则将第1个层次中第s-1个结点对应的显示距离值、第1个层次中第s-1个结点的数据区的宽度、第五预设间隔值累加，得到第1个层次中第s个结点对应的显示距离值。若第1个层次中第s个结点与第s-1个结点的归属信息不同，则将第1个层次中第s-1个结点对应的显示距离值、第1个层次中第s-1个结点的数据区的宽度、第六预设间隔值累加，得到第1个层次中第s个结点对应的显示距离值。

可选地，第1个层次的结点的数据卡片的宽度可以与除第1个层次外其他层次的结点的数据卡片的宽度(即第一预设宽度)相同，也可以与除第1个层次外其他层次的结点的数据卡片的宽度不同。例如：可以将第1个层次的结点的数据卡片的宽度设置为第二预设宽度，第二预设宽度可以小于第一预设宽度。

例如：s为3，第1个层次的结点的数据卡片的宽度为第一预设宽度，第一预设宽度为12，结点的归属信息显示在结点的数据卡片。图10为确定第1个层次中每个结点的数据区的原理图。参见图10，图10中包括第1个结点区域1001、第1个层次中前两个结点的数据区1002、第1个层次中的第三个结点的数据区1003。第1个层次中第二个结点与第三个结点不具有相同的归属信息，第1个层次中第二个结点对应的显示距离值为35，第六预设间隔值为20。则将第1个层次中第二个结点对应的显示距离值35、第1个层次中第二个结点的数据区的宽度12和第六预设间隔值20累加，得到第1个层次中第三个结点对应的显示距离值为67，则可以确定与第1个结点区域1001的目标边界相距67、且宽度为12的数据区为第1个层次中第三个结点的数据区1003。

在另一些实施例中，该n个结点区域中的第1个结点区域中不仅可以显示第1个层次中每个结点的数据卡片，还可以显示用于添加结点的第一按钮和第二按钮。

第一按钮用于添加具有不同归属信息的结点，第一按钮的宽度为第三预设宽度，第一按钮可以显示在第1个结点区域中的所有结点的数据区的上方。第二按钮用于添加具有相同归属信息的结点，第二按钮的宽度为第四预设宽度，第二按钮可以显示在第1个结点区域中具有相同归属信息的结点的数据区的下方。第三预设宽度和第四预设宽度均可以预先设置，且第三预设宽度和第四预设宽度可以由技术人员根据该脑图页面的宽度进行设置。

这种情况下，步骤(4)的操作可以为：对于第1个层次中的第一个结点，将第四预设间隔值、第三预设宽度、第七预设间隔值、第五预设宽度累加，得到第1个层次中第一个结点对应的显示距离值，将与第1个结点区域的目标边界相距第1个层次中第一个结点对应的显示距离值的数据区确定为第1个层次中第一个结点的数据区。

对于第1个层次中的第s个结点，在第1个层次中的第s个结点和第s-1个结点具有相同的归属信息的情况下，将第1个层次中第s-1个结点对应的显示距离值、第1个层次中第s-1个结点的数据区的宽度、第五预设间隔值累加，得到第1个层次中第s个结点对应的显示距离值；或者，在第1个层次中的第s个结点和第s-1个结点具有不同归属信息的情况下，将第1个层次中第s-1个结点对应的显示距离值、第1个层次中第s-1个结点的数据区的宽度、第八预设间隔值、第四预设宽度、第九预设间隔值、第五预设宽度累加，得到第1个层次中第s个结点对应的显示距离值。将与第1个结点区域的目标边界相距第1个层次中第s个结点对应的显示距离值的数据区确定为第1个层次中第s个结点的数据区，s为大于或等于2的整数。

这种情况下，是将每个结点的归属信息单独显示，第五预设宽度为生成的用于展示归属信息的数据卡片的宽度。

第七预设间隔值为第一按钮与第1个层次中的第一个归属信息的数据卡片之间的间隔值。第七预设间隔值可以预先进行设置，且第七预设间隔值可以由技术人员根据第1个结点区域的宽度进行设置。

第八预设间隔值为第二按钮与第1个层次中的第s-1个结点的数据区之间的间隔值。第八预设间隔值可以预先进行设置，且第八预设间隔值可以由技术人员根据第1个结点区域的宽度进行设置。

第九预设间隔值为第二按钮与下一个归属信息的数据卡片之间的间隔值。第九预设间隔值可以预先进行设置，且第九预设间隔值可以由技术人员根据第1个结点区域的宽度进行设置。

例如，s为2，第1个层次的结点的数据卡片的宽度为第二预设宽度，第二预设宽度为15，第1个层次的结点的归属信息的数据卡片的宽度为第五预设宽度，第五预设宽度为15。图11为确定第1个层次中每个结点的数据区的原理图。参见图11，图11中包括第1个结点区域1101、第一按钮1102、归属信息的数据卡片1103、第1个层次中第一个结点的数据区1104、第二按钮1105、第1个层次中的第二个结点的数据区1106。第一按钮1102与第1个结点区域1101的目标边界之间的间隔值为第四预设间隔值，第一按钮1102的宽度为第三预设宽度，第一按钮1102与第一个归属信息的数据卡片1103之间的间隔值为第七预设间隔值，因而第1个层次中第一个结点对应的显示距离值为第四预设间隔值、第三预设宽度、第七预设间隔值、第五预设宽度累加得到。假设第1个层次中第一个结点对应的显示距离值为40，第二按钮1105的宽度(即第四预设宽度)为10。第二按钮1105与第1个层次中第一个结点的数据区1104之间的间隔值为第八预设间隔值，假设第八预设间隔值为5，第二按钮1105与第1个层次中第二个归属信息的数据卡片1103之间的间隔值为第九预设间隔值，假设第九预设间隔值为20，则第1个层次中第二个结点对应的显示距离值为第1个层次中第一个结点对应的显示距离值(40)、第1个层次中第一个结点的数据区的宽度(15)、第八预设间隔值(5)、第四预设宽度(10)、第九预设间隔值(20)、第五预设宽度(15)累加，得到第1个层次中第二个结点对应的显示距离值为105。之后可以确定与第1个结点区域的目标边界相距105、且宽度为15的数据区为第1个层次中第二个结点的数据区1106。

值得注意的是，终端在确定该n个结点区域中各个结点的数据区之后，可以将各个结点对应的显示距离值(即各个结点的数据区与所在结点区域的目标边界之间的距离值)、以及各个结点对应的显示宽度(即各个结点的数据区的宽度)进行记录，以便后续使用。

(5)终端在该n个层次中每个结点的数据区显示每个结点的数据卡片。

可选地，终端在该n个层次中每个结点的数据区显示每个结点的数据卡片的方式可以为居中显示、顶部显示或底部显示等，本申请实施例对此不作限定。

步骤104：终端根据该n个层次的结点之间的父子关系，绘制该脑图页面中显示的各个结点的数据卡片之间的连接线。

可选地，终端可以通过<svg>标签绘制该脑图页面中显示的各个结点的数据卡片之间的连接线，通过<svg>标签绘制的连接线为可伸缩矢量图形，这种图形在放大或改变尺寸的情况下其质量不会有所损失。如此，该脑图页面中的脑图在任何分辨率下均能够清晰显示出来。

具体地，步骤104的操作可以为：对于该n个层次的结点中具有父子关系的任意的两个结点，根据该脑图页面中这两个结点的数据卡片所在的数据区，确定这两个结点中每个结点对应的连接线端点；根据这两个结点中每个结点对应的连接线端点，绘制这两个结点的数据卡片之间的连接线。

这种情况下，终端仅需要确定出两个结点中每个结点对应的连接线端点，之后将两个连接线端点进行连接即可绘制出这两个结点的数据卡片之间的连接线，使得绘制连接线的过程比较简单，同时节省计算资源。

例如：图12为两个结点的数据卡片之间的连接线的示意图。参见图12，图12中包括第2个结点区域1201、第3个结点区域1202、第2个结点区域中显示的数据卡片1203、第3个结点区域中显示的两个数据卡片1204、第2个结点区域中显示的数据卡片1203与第3个结点区域中显示的第一个数据卡片1204之间的连接线1205、第2个结点区域中显示的数据卡片1203与第3个结点区域中显示的第二个数据卡片1204之间的连接线1206。

其中，终端根据该脑图页面中这两个结点的数据卡片所在的数据区，确定这两个结点中每个结点对应的连接线端点的操作可以为：对于这两个结点中任意的一个结点，将该脑图页面中这个结点的数据卡片所在的数据区的宽度与t相乘后得到的数值与这个结点对应的显示距离值相加，得到目标距离值；将这个结点的数据卡片所在的数据区中与这个结点的数据卡片所在的结点区域的目标边界相距目标距离值的一个位置点确定为这个结点对应的连接线端点。

t可以预先进行设置。终端可以根据这个结点的数据卡片在这个结点的数据区中的显示位置确定t的值，t大于0且小于1。例如：若这个结点的数据卡片居中显示在这个结点的数据区中，则t的值为0.5。

由于目标距离值是将这个结点的数据卡片所在的数据区的宽度与t相乘后得到的数值与这个结点对应的显示距离值相加得到，所以根据目标距离值确定出的这个结点对应的连接线端点处于这个结点的数据卡片所在位置，从而使得后续根据这个结点对应的连接线端点绘制出的脑图中的数据关系比较清晰。

例如：图13为确定两个结点中每个结点对应的连接线端点的原理图。参见图13，图13中包括第2个结点区域1301、第3个结点区域1302、第2个结点区域1301中显示的一个结点的数据卡片1303、第3个结点区域1302中显示的一个结点的数据卡片1304、这两个结点中的一个结点(父结点)对应的连接线端点1305、这两个结点中的另一个结点(子结点)对应的连接线端点1306。这两个结点具有父子关系。这两个结点的数据卡片在数据区中均居中显示，因而可将t设为0.5。

第2个结点区域1301中显示的父结点的数据卡片1303所在的数据区的宽度为34，第3个结点区域1302中显示的子结点的数据卡片1304所在的数据区的宽度为12，父结点对应的显示距离值为25，子结点对应的显示距离值为25。则将父结点对应的显示距离值25加上0.5倍的父结点的数据卡片1303所在的数据区的宽度34，可以得到目标距离值为42，然后将父结点的数据卡片1303所在的数据区中与第2个结点区域1301的目标边界相距42的一个位置点作为父结点对应的连接线端点1305。将子结点对应的显示距离值25加上0.5倍的子结点的数据卡片1304所在的数据区的宽度12，可以得到目标距离值为31，然后将子结点的数据卡片1304所在的数据区中与第3个结点区域1302的目标边界相距31的一个位置点作为子结点对应的连接线端点1306。

其中，终端根据这两个结点中每个结点对应的连接线端点，绘制这两个结点的数据卡片之间的连接线的操作可以在如下两种情况下实现。

第一种情况，若这两个结点中的父结点为第i个层次的结点，则在第i个结点区域与第i+1个结点区域之间的间隔区域中确定第一参考线；在第一参考线中确定与第i个结点区域的目标边界所在的直线相距第一距离值的第一位置点；在第一参考线中确定与第i+1个结点区域的目标边界所在的直线相距第二距离值的第二位置点；依次绘制这两个结点中的父结点对应的连接线端点、第一位置点、第二位置点、这两个结点中的子结点对应的连接线端点之间的线条，得到这两个结点的数据卡片之间的连接线。

第一参考线用于作为参照物，从中确定第一位置点和第二位置点。第一参考线与第i个结点区域的目标边界和第i+1个结点区域的目标边界所在的直线垂直。第i个结点区域的目标边界和第i+1个结点区域的目标边界在同一条直线上。

第一距离值为这两个结点中的父结点对应的连接线端点与第i个结点区域的目标边界之间的距离值。第二距离值为这两个结点中的子结点对应的连接线端点与第i+1个结点区域的目标边界之间的距离值。

例如：这两个结点中的父结点为第2个层次的结点，这两个结点中的子结点为第3个层次的结点。如图14所示，图14为绘制两个结点的数据卡片之间的连接线的示意图，图14中包括第2个结点区域1401、第3个结点区域1402、第一参考线1403、第一位置点1404、第二位置点1405、第2个结点区域1401中显示的数据卡片1406、第3个结点区域1402中显示的数据卡片1407、这两个结点中的父结点对应的连接线端点1408、这两个结点中的子结点对应的连接线端点1409。其中，第一位置点1404和第二位置点1405均位于第一参考线1403。第一位置点1404与第2个结点区域1401的目标边界所在直线之间的距离与父结点对应的连接线端点1408与第2个结点区域1401的目标边界之间的距离相等，第二位置点1405与第3个结点区域1402的目标边界所在直线之间的距离与子结点对应的连接线端点1409与第3个结点区域1402的目标边界之间的距离相等。则将父结点对应的连接线端点1408与第一位置点1404进行连接，将第一位置点1404与第二位置点1405进行连接，将第二位置点1405与子结点对应的连接线端点1409进行连接，从而得到父结点的数据卡片1406和子结点的数据卡片1407之间的连接线。

值得注意的是，若第1个层次中只有一个结点，则可以按照第一种情况中的步骤去绘制第1个层次的结点的数据卡片与第2个层次的结点的数据卡片之间的连接线。若第1个层次中包括多个结点，则按照如下第二种情况中的步骤去绘制第1个层次的结点的数据卡片与第2个层次的结点的数据卡片之间的连接线。

第二种情况，若这两个结点中的父结点为第1个层次的结点，在第1个层次包括多个结点的情况下，在第1个结点区域与该n个结点区域中的第2个结点区域之间的间隔区域中确定第二参考线和第三参考线；在第二参考线中确定与第1个结点区域的目标边界所在的直线相距第三距离值的第三位置点；在第三参考线中确定与第2个结点区域的目标边界所在的直线相距第四距离值的第四位置点；将第1个层次中多个结点的数据区的宽度之和与第1个层次中多个结点中所有相邻两个结点的数据区之间的间隔值之和相加，得到目标数值；将目标数值除以2后得到的数值与第1个层次中第一个结点对应的显示距离值相加，得到第五距离值；在第二参考线中确定与第1个结点区域的目标边界所在的直线相距第五距离值的第五位置点，在第三参考线中确定与第2个结点区域的目标边界所在的直线相距第五距离值的第六位置点；依次绘制这两个结点中的父结点对应的连接线端点、第三位置点、第五位置点、第六位置点、第四位置点、这两个结点中的子结点对应的连接线端点之间的线条，得到这两个结点的数据卡片之间的连接线。

第二参考线用于作为参照物，从中确定第三位置点和第五位置点。第三参考线用于作为参照物，从中确定第四位置点和第六位置点。第二参考线和第三参考线均与第1个结点区域的目标边界和第2个结点区域的目标边界所在的直线垂直，且第1个结点区域的目标边界和第2个结点区域的目标边界在同一条直线上。第二参考线位于第1个结点区域与第三参考线之间。

第三距离值为这两个结点中的父结点对应的连接线端点与第1个结点区域的目标边界之间的距离值。第四距离值为这两个结点中的子结点对应的连接线端点与第2个结点区域的目标边界之间的距离值。

由于第五距离值是将第1个层次中第一个结点对应的显示距离值与0.5倍的目标数值相加后得到，且目标数值是第1个层次中多个结点的数据区的宽度之和与第1个层次中多个结点中所有相邻两个结点的数据区之间的间隔值之和相加得到，所以根据第五距离值确定出的第五位置点和第六位置点是位于第一个结点区域显示的所有结点的数据区的整体下属范围的中间部分。如此，可以使得绘制出的脑图中的数据关系更为清晰，更为美观。

例如：如图15所示，图15为绘制两个结点的数据卡片之间的连接线的示意图，图15中包括：第1个结点区域1501、第2个结点区域1502、第二参考线1503、第三参考线1504、第三位置点1505、第四位置点1506、第五位置点1507、第六位置点1508、第1个结点区域1501中显示的父结点的数据卡片1509、第2个结点区域1502中显示的子结点的数据卡片1510、父结点对应的连接线端点1511、子结点对应的连接线端点1512。其中，第三位置点1505和第五位置点1507位于第二参考线1503，第四位置点1506和第六位置点1508位于第三参考线1504。第三位置点1505与第1个结点区域1501的目标边界所在直线之间的距离与父结点对应的连接线端点1511与第1个结点区域1501的目标边界之间的距离相等。第四位置点1506与第2个结点区域1502的目标边界所在直线之间的距离与子结点对应的连接线端点1512与第1个结点区域1501的目标边界之间的距离相等。第五位置点1507与第1个结点区域1501的目标边界所在直线之间的距离与第六位置点1508与第2个结点区域1502的目标边界所在直线之间的距离相等。则将父结点对应的连接线端点1511与第三位置点1505进行连接，将第三位置点1505和第五位置点1507进行连接、将第五位置点1507和第六位置点1508进行连接、将第六位置点1508和第四位置点1506进行连接、将第四位置点1506和子结点对应的连接线端点1512进行连接，从而得到父结点的数据卡片1509与子结点的数据卡片1510之间的连接线。

值得注意的是，在上述两种情况下绘制的这两个结点的数据卡片之间的连接线会比较整齐、美观，从而使得该脑图页面中的数据流向更加清晰。

终端可以通过上述步骤101-步骤104在该脑图页面中绘制得到目标数据的脑图。这种情况下，终端还可以对该脑图页面中显示的任意的一个数据卡片所属的结点进行溯源。

具体地，终端若在该脑图页面中检测到对任意的一个数据卡片的选择操作，则从该n个层次的结点中确定与这个数据卡片所属的结点关联的所有结点；将这个数据卡片所属的结点关联的所有结点的数据卡片进行突出显示；将这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线进行突出显示。

选择操作用于表示这个数据卡片被选中了，则需要对这个数据卡片所属的结点进行溯源。该选择操作可以由用户触发，比如，用户可以通过点击这个数据卡片触发对这个数据卡片的选择操作。

由于本申请实施例中的数据卡片均是可被触发的，所以终端可以直接检测到对任意一个数据卡片的选择操作，继而就能确定这个数据卡片所属的结点是哪个结点，从而更加快速地对这个数据卡片所属的结点进行溯源，如此使得对任意一个数据卡片所属的结点的溯源操作更加方便、快捷。

终端在对这个数据卡片所属的结点进行溯源时，可以对这个数据卡片所属的结点关联的所有结点的数据卡片、以及这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线进行突出显示，以便用户可以及时获知这个数据卡片所属的结点关联的所有结点以及这些结点之间的关系。

在一种可能的方式中，终端将这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线进行突出显示的方式为：将这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线的stroke(描边)属性的颜色值设置为与原来的颜色值(即默认颜色值)不同的值。

在另一种可能的方式中，终端将这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线进行突出显示的操作可以为：终端根据这个数据卡片所属的结点关联的所有结点之间的父子关系，重新绘制这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线，并对重新绘制的连接线进行突出显示。

由于使用<svg>标签绘制两个数据卡片之间的连接线时，绘制的后一个线条总会覆盖前一个线条中与后一个线条重合的部分。这种情况下，若后面绘制的线条与前一个线条具有重合的部分，则即使对前一个线条进行突出显示，其在该脑图页面中也不能表现出来。为此，需要重新绘制这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线，并对重新绘制的连接线进行突出显示。

其中，终端对重新绘制的连接线进行突出显示时，可以将重新绘制的连接线的stroke属性的颜色值设置为与原来的颜色值(即默认颜色值)不同的值。

可选地，终端在检测到对这个数据卡片的解除选择操作时，取消对这个数据卡片所属的结点关联的所有结点的数据卡片的突出显示，以及取消对这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线的突出显示。

解除选择操作可以由用户触发，比如，用户可以通过点击另一个数据卡片来触发对这个数据卡片的解除选择操作，或者用户可以通过点击该脑图页面中的空白区域来触发对这个数据卡片的解除选择操作。

可选地，终端取消对这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线的突出显示的方式为：将这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线的stroke属性的颜色值设置为默认颜色值。

作为一种示例，用户想要知道一个数据卡片所属的结点的源头，则用户移动鼠标，点击选中这个数据卡片，以触发对这个数据卡片的选择操作，响应于该选择操作，终端将这个数据卡片所属的结点关联的所有结点的数据卡片突出显示，并将这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线突出显示，此时用户就可以根据突出显示的内容获知这个数据卡片所属的结点的源头。之后，若用户不想查看这个数据卡片所属的结点的源头了，可以将鼠标移动至空白区域并点击空白区域，以触发对这个数据卡片的解除选择操作，响应于该解除选择操作，终端取消对这个数据卡片所属的结点关联的所有结点的数据卡片的突出显示，以及取消对这个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线的突出显示。

进一步地，终端还可以对该脑图页面中显示的任意的一个数据卡片所属的结点进行删除。

具体地，若终端在该脑图页面中检测到对任意的一个数据卡片的删除指令，则在目标数据中删除这个数据卡片所属的结点，然后重新执行上述步骤102-步骤104。

删除指令用于指示删除目标数据中一个数据卡片所属的结点。删除指令可以由用户进行触发，用户可以通过点击操作、滑动操作、语音操作、手势操作、体感操作等操作进行触发，本申请实施例对此不作限定。

作为一种示例，若用户移动鼠标并点击该脑图页面中显示的任意的一个数据卡片中的删除按钮，则终端显示一个删除确认窗口，用户移动鼠标并点击删除确认窗口中的确认选项，以触发删除指令。响应于该删除指令，终端将目标数据中这个数据卡片所属的结点进行删除，实现对目标数据的更新，之后重新执行上述步骤102-步骤104来绘制更新后的目标数据的脑图。

进一步地，终端还可以对该脑图页面中显示的任意的一个数据卡片所属的结点的数据元素进行修改。

具体地，若终端在该脑图页面中检测到对任意的一个数据卡片的修改指令，则将目标数据中这个数据卡片所属的结点的数据元素修改为修改指令携带的数据元素，然后重新执行上述步骤102-步骤104。

修改指令用于指示修改目标数据中一个数据卡片所属的结点的数据元素。修改指令可以由用户进行触发，用户可以通过点击操作、滑动操作、语音操作、手势操作、体感操作等操作进行触发，本申请实施例对此不作限定。

作为一种示例，若用户移动鼠标并点击该脑图页面中显示的任意的一个数据卡片中的修改按钮，则终端显示一个修改确认窗口，用户在修改确认窗口中输入要修改为的数据元素，并点击确认选项，以触发修改指令。响应于该修改指令，终端将目标数据中这个数据卡片所属的结点的数据元素修改为修改指令携带的数据元素，实现对目标数据的更新，之后重新执行上述步骤102-步骤104来绘制更新后的目标数据的脑图。

进一步地，终端还可以对该脑图页面中显示的任意的一个数据卡片所属的结点添加新的结点。

具体地，若终端在该脑图页面中检测到结点添加指令，则根据结点添加指令携带的结点信息在目标数据中添加新结点，重新执行上述步骤102-步骤104来绘制更新后的目标数据的脑图。

添加指令用于指示在目标数据中添加新的结点，添加指令可以由用户进行触发，用户可以通过点击操作、滑动操作、语音操作、手势操作、体感操作等操作进行触发，本申请实施例对此不作限定。

作为一种示例，若用户移动鼠标并点击了该脑图页面中显示的一个数据卡片中的添加按钮，则终端显示一个添加确认窗口，用户可以在添加确认窗口中输入需要添加的结点信息，并点击确认选项，以触发结点添加指令。响应于该结点添加指令，终端根据该结点信息在目标数据中添加新的结点，实现对目标数据的更新，之后重新执行上述步骤102-步骤104来绘制更新后的目标数据的脑图。

可选地，技术人员还可以根据需求在数据卡片中添加一些其他功能的按钮，来实现对每个结点的其他的交互功能。

值得注意的是，本申请实施例提供的脑图绘制方法是以数据卡片为基础元素进行交互的，可以实现对每个数据卡片所属的结点的溯源操作，且交互较为快捷、友好。并且，对于技术人员来说，使用的技术均为前端的基础技术，因而学习成本低。另外，由于svg的可伸缩特性，使得绘制的脑图在任何分辨率下均能够清晰显示。

为了便于理解，下面以甲公司为发起方、乙公司为参与方，共同合作一个数据处理项目为例，结合图16来对上述脑图绘制方法进行举例说明。

参见图16，该方法包括如下步骤1601-步骤1608。

步骤1601：终端获取目标数据。

示例地，终端获取的目标数据可以如下表2所示：

表2

如上表2所示，目标数据具有4个层次。该数据处理项目由甲公司发起，乙公司参与，甲公司和乙公司均参与该数据处理项目的每个环节。该数据处理项目包括数据预处理1和数据预处理2。其中数据预处理1包括特征工程1和特征工程2，也就是说完成数据预处理1这个环节的工作，需要通过特征工程1和特征工程2来实现。数据预处理2包括特征工程3、特征工程4和特征工程5，也就是说完成数据预处理2这个环节的工作，需要通过特征工程3、特征工程4和特征工程5来实现。特征工程1包括安全建模1，也就是说要完成特征工程1这个环节的工作，需要通过安全建模1来实现。以此类推，特征工程5包括安全建模5，要完成特征工程5这个环节的工作，需要通过安全建模5来实现。

步骤1602：终端生成这4个层次的结点中每个结点的数据卡片，数据卡片包括用于显示和编辑结点的数据元素的控件。

步骤1603：终端在脑图页面中确定与这4个层次一一对应的4个结点区域。

步骤1604：终端根据这4个层次中的第3个层次中各个结点之间的排序关系，在这4个结点区域中的第4个结点区域，确定第4个层次中每个结点的数据区。

步骤1605：终端根据这4个层次中第i+1个层次中的每个结点的数据区，在这4个结点区域中的第i个结点区域，确定这4个层次中的第i个层次中每个结点的数据区。

对于这4个层次中第3个层次中的每个结点的数据区，根据这4个层次中第4个层次中的每个结点的数据区，在这4个结点区域中的第3个结点区域，确定这4个层次中的第3个层次中每个结点的数据区。

对于这4个层次中第2个层次中的每个结点的数据区，根据这4个层次中第3个层次中的每个结点的数据区，在这4个结点区域中的第2个结点区域，确定这4个层次中的第2个层次中每个结点的数据区。

步骤1606：终端在这4个结点区域中的第1个结点区域，确定第1个层次中每个结点的数据区。

步骤1607：终端在这4个层次中每个结点的数据区显示每个结点的数据卡片。

步骤1608：终端根据这4个层次的结点之间的父子关系，绘制该脑图页面中显示的各个结点的数据卡片之间的连接线。

该脑图页面中显示的各个结点的数据卡片之间的连接线绘制完成之后，即得到目标数据的脑图，也即是完成了脑图绘制。

如图17所示，图17为目标数据的脑图的示意图。图17中包括4个结点区域1701、目标数据中各个结点的数据卡片1702、该脑图页面中显示的各个结点的数据卡片之间的连接线1703。4个结点区域1701用于显示结点的数据卡片，目标数据中各个结点的数据卡片1702用于显示各个结点的数据元素，该脑图页面中显示的各个结点的数据卡片之间的连接线1703用于表示各个结点之间的数据流向。

在本申请实施例中，终端获取目标数据，目标数据包括n个层次的结点。之后，生成该n个层次的结点中每个结点的数据卡片。然后根据该n个层次的结点之间的排序关系，将该n个层次的结点中每个结点的数据卡片显示在脑图页面中，再根据该n个层次的结点之间的父子关系，绘制该脑图页面中显示的各个结点的数据卡片之间的连接线。由于每个结点的数据卡片均是用于显示和编辑对应结点的数据元素的控件，所以每个数据卡片均可针对性的被触发，也即，在用户点击任意一个数据卡片的时候，终端就能直接获知所点击的是哪个数据卡片，从而获知是要对这个数据卡片所属的结点进行相应的交互操作，如此交互比较友好。并且，对于技术人员来说，在脑图绘制时所用的技术均为前端的基础技术，无需学习其他框架，从而使得实现简单。

图18是本申请实施例提供的一种脑图绘制装置的结构示意图。该脑图绘制装置可以由软件、硬件或者两者的结合实现成为计算机设备的部分或者全部，该计算机设备可以为下文图19所示的计算机设备。参见图18，该装置包括：获取模块1801、生成模块1802、第一显示模块1803、绘制模块1804。

获取模块1801，用于获取目标数据，目标数据包括n个层次的结点，该n个层次中由第1个层次至第n个层次的结点顺序是由根结点至叶子结点的顺序，n为大于或等于2的整数；

生成模块1802，用于生成该n个层次的结点中每个结点的数据卡片，数据卡片包括用于显示和编辑结点的数据元素的控件；

第一显示模块1803，用于根据该n个层次的结点之间的排序关系，将n个层次的结点中每个结点的数据卡片显示在脑图页面；

绘制模块1804，用于根据该n个层次的结点之间的父子关系，绘制该脑图页面中显示的各个结点的数据卡片之间的连接线。

可选地，该装置还包括：

确定模块，用于若在该脑图页面中检测到对任意的一个数据卡片的选择操作，则在该n个层次的结点中确定与一个数据卡片所属的结点关联的所有结点；

第二显示模块，用于将一个数据卡片所属的结点关联的所有结点的数据卡片进行突出显示；

第三显示模块，用于将一个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线进行突出显示。

可选地，该装置还包括：

删除模块，用于若在该脑图页面中检测到对任意的一个数据卡片的删除指令，则在目标数据中删除一个数据卡片所属的结点，触发生成模块1802生成n个层次的结点中每个结点的数据卡片。

可选地，该装置还包括：

修改模块，用于若在该脑图页面中检测到对任意的一个数据卡片的修改指令，则将目标数据中一个数据卡片所属的结点的数据元素修改为修改指令携带的数据元素，触发生成模块1802生成n个层次的结点中每个结点的数据卡片。

可选地，该装置还包括：

添加模块，用于若在该脑图页面中检测到结点添加指令，则根据结点添加指令携带的结点信息在目标数据中添加新结点，触发生成模块1802生成n个层次的结点中每个结点的数据卡片。

在本申请实施例中，获取目标数据，目标数据包括n个层次的结点。之后，生成该n个层次的结点中每个结点的数据卡片。然后根据该n个层次的结点之间的排序关系，将该n个层次的结点中每个结点的数据卡片显示在脑图页面中，再根据该n个层次的结点之间的父子关系，绘制该脑图页面中显示的各个结点的数据卡片之间的连接线。由于每个结点的数据卡片均是用于显示和编辑对应结点的数据元素的控件，所以每个数据卡片均可针对性的被触发，也即，在用户点击任意一个数据卡片的时候，该装置就能直接获知所点击的是哪个数据卡片，从而获知是要对这个数据卡片所属的结点进行相应的交互操作，如此交互比较友好。并且，对于技术人员来说，在脑图绘制时所用的技术均为前端的基础技术，无需学习其他框架，从而使得实现简单。

需要说明的是：上述实施例提供的脑图绘制装置在绘制脑图时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

上述实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请实施例的保护范围。

上述实施例提供的脑图绘制装置与脑图绘制方法实施例属于同一构思，上述实施例中单元、模块的具体工作过程及带来的技术效果，可参见方法实施例部分，此处不再赘述。

图19为本申请实施例提供的一种计算机设备的结构示意图。如图19所示，计算机设备19包括：处理器190、存储器191以及存储在存储器191中并可在处理器190上运行的计算机程序192，处理器190执行计算机程序192时实现上述实施例中的脑图绘制方法中的步骤。

计算机设备19可以是一个通用计算机设备或一个专用计算机设备。在具体实现中，计算机设备19可以是台式机、便携式电脑、掌上电脑、移动手机、平板电脑等，本申请实施例不限定计算机设备19的类型。本领域技术人员可以理解，图19仅仅是计算机设备19的举例，并不构成对计算机设备19的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，比如还可以包括输入输出设备、网络接入设备等。

处理器190可以是中央处理单元(Central Processing Unit，CPU)，处理器190还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者也可以是任何常规的处理器。

存储器191在一些实施例中可以是计算机设备19的内部存储单元，比如计算机设备19的硬盘或内存。存储器191在另一些实施例中也可以是计算机设备19的外部存储设备，比如计算机设备19上配备的插接式硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(Secure Digital，SD)卡、闪存卡(Flash Card)等。进一步地，存储器191还可以既包括计算机设备19的内部存储单元也包括外部存储设备。存储器191用于存储操作***、应用程序、引导装载程序(Boot Loader)、数据以及其他程序等。存储器191还可以用于暂时地存储已经输出或者将要输出的数据。

本申请实施例还提供了一种计算机设备，该计算机设备包括：至少一个处理器、存储器以及存储在该存储器中并可在该至少一个处理器上运行的计算机程序，该处理器执行该计算机程序时实现上述任意各个方法实施例中的步骤。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时可实现上述各个方法实施例中的步骤。

本申请实施例提供了一种计算机程序产品，当其在计算机上运行时，使得计算机执行上述各个方法实施例中的步骤。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述方法实施例中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，该计算机程序包括计算机程序代码，该计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。该计算机可读介质至少可以包括：能够将计算机程序代码携带到拍照装置/终端设备的任何实体或装置、记录介质、计算机存储器、ROM(Read-Only Memory，只读存储器)、RAM(Random Access Memory，随机存取存储器)、CD-ROM(Compact Disc Read-Only Memory，只读光盘)、磁带、软盘和光数据存储设备等。本申请提到的计算机可读存储介质可以为非易失性存储介质，换句话说，可以是非瞬时性存储介质。

应当理解的是，实现上述实施例的全部或部分步骤可以通过软件、硬件、固件或者其任意结合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。该计算机程序产品包括一个或多个计算机指令。该计算机指令可以存储在上述计算机可读存储介质中。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (15)

1.一种脑图绘制方法，其特征在于，所述方法包括：

获取目标数据，所述目标数据包括n个层次的结点，所述n个层次中由第1个层次至第n个层次的结点顺序是由根结点至叶子结点的顺序，所述n为大于或等于2的整数；

生成所述n个层次的结点中每个结点的数据卡片，所述数据卡片包括用于显示和编辑结点的数据元素的控件；

根据所述n个层次的结点之间的排序关系，将所述n个层次的结点中每个结点的数据卡片显示在脑图页面；

根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线。

2.如权利要求1所述的方法，其特征在于，所述根据所述n个层次的结点之间的排序关系，将所述n个层次的结点中每个结点的数据卡片显示在脑图页面，包括：

在所述脑图页面中确定与所述n个层次一一对应的n个结点区域；

根据所述n个层次中的第n-1个层次中各个结点之间的排序关系，在所述n个结点区域中的第n个结点区域，确定所述第n个层次中每个结点的数据区；

根据所述n个层次中第i+1个层次中的每个结点的数据区，在所述n个结点区域中的第i个结点区域，确定所述n个层次中的第i个层次中每个结点的数据区，所述i是大于或等于2且小于或等于n-1的整数；

在所述n个结点区域中的第1个结点区域，确定所述第1个层次中每个结点的数据区；

在所述n个层次中每个结点的数据区显示每个结点的数据卡片。

3.如权利要求2所述的方法，其特征在于，所述根据所述n个层次中的第n-1个层次中各个结点之间的排序关系，在所述n个结点区域中的第n个结点区域，确定所述第n个层次中每个结点的数据区，包括：

对于所述第n个层次中的第一个结点，根据所述第n个层次中第一个结点的父结点在所述第n-1个层次中的结点中的排序位置，确定所述第n个层次中第一个结点对应的显示距离值，将与所述第n个结点区域的目标边界相距所述第n个层次中第一个结点对应的显示距离值的数据区确定为所述第n个层次中第一个结点的数据区；

对于所述第n个层次中的第一目标结点，所述第一目标结点是所述第n个层次中除第一个结点之外的任意一个结点，第二目标结点是所述第n个层次中与所述第一目标结点相邻的上一个结点，根据所述第一目标结点的父结点与所述第二目标结点的父结点之间的排序位置差异以及所述第二目标结点对应的显示距离值，确定所述第一目标结点对应的显示距离值，将与所述第n个结点区域的目标边界相距所述第一目标结点对应的显示距离值的数据区确定为所述第一目标结点的数据区。

4.如权利要求3所述的方法，其特征在于，所述数据卡片的宽度为第一预设宽度；所述根据所述第n个层次中第一个结点的父结点在所述第n-1个层次中的结点中的排序位置，确定所述第n个层次中第一个结点对应的显示距离值，包括：

若所述第n个层次中第一个结点的父结点为所述第n-1个层次中的第j个结点，则将第一预设间隔值、j-1倍的第二预设间隔值、j-1倍的所述第一预设宽度累加，得到所述第n个层次中第一个结点对应的显示距离值，所述j为正整数；或者，

若所述第n个层次中第一个结点的父结点为所述第n-1个层次中的第j个结点，则在所述第n-1个层次中的前j个结点的父结点为同一结点的情况下，将第一预设间隔值、j-1倍的第二预设间隔值、j-1倍的所述第一预设宽度累加，得到所述第n个层次中第一个结点对应的显示距离值，在所述第n-1个层次中的前j个结点的父结点为m个不同结点的情况下，将第一预设间隔值、j-m倍的第二预设间隔值、m-1倍的第三预设间隔值、j-1倍的所述第一预设宽度累加，得到所述第n个层次中第一个结点对应的显示距离值，所述m为大于或等于2的整数，所述第三预设间隔值大于所述第二预设间隔值。

5.如权利要求3所述的方法，其特征在于，所述数据卡片的宽度为第一预设宽度；所述根据所述第一目标结点的父结点与所述第二目标结点的父结点之间的排序位置差异以及所述第二目标结点对应的显示距离值，确定所述第一目标结点对应的显示距离值，包括：

若所述第一目标结点的父结点与所述第二目标结点的父结点之间间隔k个结点，则将所述第二目标结点对应的显示距离值、k+1倍的第二预设间隔值、k+1倍的所述第一预设宽度累加，得到所述第一目标结点对应的显示距离值，所述k为大于或等于0的整数；或者，

若所述第一目标结点的父结点与所述第二目标结点的父结点之间间隔k个结点，则在所述第一目标结点的祖父结点与所述第二目标结点的祖父结点为同一结点的情况下，将所述第二目标结点对应的显示距离值、k+1倍的第二预设间隔值、k+1倍的所述第一预设宽度累加，得到所述第一目标结点对应的显示距离值，在所述第一目标结点的祖父结点与所述第二目标结点的祖父结点为p个不同结点的情况下，将所述第二目标结点对应的显示距离值、k-p+2倍的第二预设间隔值、p-1倍的第三预设间隔值、k+1倍的所述第一预设宽度累加，得到所述第一目标结点对应的显示距离值，所述p为大于或等于2的整数，所述第三预设间隔值大于所述第二预设间隔值。

6.如权利要求3所述的方法，其特征在于，所述根据所述n个层次中第i+1个层次中的每个结点的数据区，在所述n个结点区域中的第i个结点区域，确定所述n个层次中的第i个层次中每个结点的数据区，包括：

对于所述第i个层次中的第j个结点，若所述第i个层次中的第j个结点存在子结点，则将所述第i个层次中第j个结点的第一个子结点对应的显示距离值确定为所述第i个层次中第j个结点对应的显示距离值，所述j为正整数；

将所述第i个层次中第j个结点的所有子结点的数据区的宽度之和与所述第i个层次中第j个结点的所有相邻两个子结点的数据区之间的间隔值之和相加，得到所述第i个层次中的第j个结点对应的显示宽度；

将与所述第i个结点区域的目标边界相距所述第i个层次中第j个结点对应的显示距离值、且宽度为所述第i个层次中第j个结点对应的显示宽度的数据区确定为所述第i个层次中第j个结点的数据区。

7.如权利要求3所述的方法，其特征在于，所述根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线，包括：

对于所述n个层次的结点中具有父子关系的任意的两个结点，根据所述脑图页面中所述两个结点的数据卡片所在的数据区，确定所述两个结点中每个结点对应的连接线端点；

根据所述两个结点中每个结点对应的连接线端点，绘制所述两个结点的数据卡片之间的连接线。

8.如权利要求7所述的方法，其特征在于，所述根据所述脑图页面中所述两个结点的数据卡片所在的数据区，确定所述两个结点中每个结点对应的连接线端点，包括：

对于所述两个结点中任意的一个结点，将所述脑图页面中所述一个结点的数据卡片所在的数据区的宽度与t相乘后得到的数值与所述一个结点对应的显示距离值相加，得到目标距离值，所述t大于0且小于1；

将所述一个结点的数据卡片所在的数据区中与所述一个结点的数据卡片所在的结点区域的目标边界相距所述目标距离值的一个位置点确定为所述一个结点对应的连接线端点。

9.如权利要求7所述的方法，其特征在于，所述根据所述两个结点中每个结点对应的连接线端点，绘制所述两个结点的数据卡片之间的连接线，包括：

若所述两个结点中的父结点为所述第i个层次的结点，则在所述第i个结点区域与所述第i+1个结点区域之间的间隔区域中确定第一参考线，所述第一参考线与所述第i个结点区域的目标边界和所述第i+1个结点区域的目标边界所在的直线垂直；

在所述第一参考线中确定与所述第i个结点区域的目标边界所在的直线相距第一距离值的第一位置点，所述第一距离值为所述两个结点中的父结点对应的连接线端点与所述第i个结点区域的目标边界之间的距离值；

在所述第一参考线中确定与所述第i+1个结点区域的目标边界所在的直线相距第二距离值的第二位置点，所述第二距离值为所述两个结点中的子结点对应的连接线端点与所述第i+1个结点区域的目标边界之间的距离值；

依次绘制所述两个结点中的父结点对应的连接线端点、所述第一位置点、所述第二位置点、所述两个结点中的子结点对应的连接线端点之间的线条，得到所述两个结点的数据卡片之间的连接线。

10.如权利要求7所述的方法，其特征在于，所述根据所述两个结点中每个结点对应的连接线端点，绘制所述两个结点的数据卡片之间的连接线，包括：

若所述两个结点中的父结点为所述第1个层次的结点，在所述第1个层次包括多个结点的情况下，在所述第1个结点区域与所述n个结点区域中的第2个结点区域之间的间隔区域中确定第二参考线和第三参考线，所述第二参考线和所述第三参考线均与所述第1个结点区域的目标边界和所述第2个结点区域的目标边界所在的直线垂直，所述第二参考线位于所述第1个结点区域与所述第三参考线之间；

在所述第二参考线中确定与所述第1个结点区域的目标边界所在的直线相距第三距离值的第三位置点，所述第三距离值为所述两个结点中的父结点对应的连接线端点与所述第1个结点区域的目标边界之间的距离值；

在所述第三参考线中确定与所述第2个结点区域的目标边界所在的直线相距第四距离值的第四位置点，所述第四距离值为所述两个结点中的子结点对应的连接线端点与所述第2个结点区域的目标边界之间的距离值；

将所述第1个层次中多个结点的数据区的宽度之和与所述第1个层次中多个结点中所有相邻两个结点的数据区之间的间隔值之和相加，得到目标数值；将所述目标数值除以2后得到的数值与所述第1个层次中第一个结点对应的显示距离值相加，得到第五距离值；

在所述第二参考线中确定与所述第1个结点区域的目标边界所在的直线相距第五距离值的第五位置点，在所述第三参考线中确定与所述第2个结点区域的目标边界所在的直线相距第五距离值的第六位置点；

依次绘制所述两个结点中的父结点对应的连接线端点、所述第三位置点、所述第五位置点、所述第六位置点、所述第四位置点、所述两个结点中的子结点对应的连接线端点之间的线条，得到所述两个结点的数据卡片之间的连接线。

11.如权利要求1-10任一所述的方法，其特征在于，所述根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线之后，还包括：

若在所述脑图页面中检测到对任意的一个数据卡片的选择操作，则在所述n个层次的结点中确定与所述一个数据卡片所属的结点关联的所有结点；将所述一个数据卡片所属的结点关联的所有结点的数据卡片进行突出显示；将所述一个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线进行突出显示；

和/或，

所述根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线之后，还包括：

若在所述脑图页面中检测到对任意的一个数据卡片的删除指令，则在所述目标数据中删除所述一个数据卡片所属的结点，重新执行所述生成所述n个层次的结点中每个结点的数据卡片的步骤以及后续步骤；

和/或，

所述根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线之后，还包括：

若在所述脑图页面中检测到对任意的一个数据卡片的修改指令，则将所述目标数据中所述一个数据卡片所属的结点的数据元素修改为所述修改指令携带的数据元素，重新执行所述生成所述n个层次的结点中每个结点的数据卡片的步骤以及后续步骤；

和/或，

所述根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线之后，还包括：

若在所述脑图页面中检测到结点添加指令，则根据所述结点添加指令携带的结点信息在所述目标数据中添加新结点，重新执行所述生成所述n个层次的结点中每个结点的数据卡片的步骤以及后续步骤。

12.如权利要求11所述的方法，其特征在于，所述将所述一个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线进行突出显示，包括：

根据所述一个数据卡片所属的结点关联的所有结点之间的父子关系，重新绘制所述一个数据卡片所属的结点关联的所有结点的数据卡片之间的连接线，并对重新绘制的连接线进行突出显示。

13.一种脑图绘制装置，其特征在于，所述装置包括：

获取模块，用于获取目标数据，所述目标数据包括n个层次的结点，所述n个层次中由第1个层次至第n个层次的结点顺序是由根结点至叶子结点的顺序，所述n为大于或等于2的整数；

生成模块，用于生成所述n个层次的结点中每个结点的数据卡片，所述数据卡片包括用于显示和编辑结点的数据元素的控件；

第一显示模块，用于根据所述n个层次的结点之间的排序关系，将所述n个层次的结点中每个结点的数据卡片显示在脑图页面；

绘制模块，用于根据所述n个层次的结点之间的父子关系，绘制所述脑图页面中显示的各个结点的数据卡片之间的连接线。

14.一种计算机设备，其特征在于，所述计算机设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至12任一项所述的方法。

15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至12任一项所述的方法。

Images