Mind Map Drawing Method, Device, Equipment and Storage Medium

Abstract

The present application discloses a mind map drawing method, apparatus, device and storage medium, belonging to the field of computer technology. It includes: obtaining target data, where the target data includes nodes at n levels, and the order of nodes from the 1st level to the nth level among the n levels is the order from the root node to the leaf node, and n is an integer greater than or equal to 2; generating data cards for each node among the nodes at n levels, where the data cards include controls for displaying and editing data elements of the nodes; according to the sorting relationship among the nodes at n levels, displaying the data cards of each node among the nodes at n levels on the mind map page; according to the parent-child relationship among the nodes at n levels, drawing connection lines between the data cards of the respective nodes displayed on the mind map page. In this way, for technical personnel, the technologies used in mind map drawing are all basic front-end technologies, and there is no need to learn other frameworks, thus making the implementation simple.

Description

Technical Field

[0001] This application relates to the field of computer technology, and particularly to a method, apparatus, device, and storage medium for drawing mind maps. Background Art

[0002] When data is displayed based on the web (World Wide Web), data is usually displayed in a table form on a web page. However, a table cannot clearly express the source and flow of data. The emergence of mind maps (also known as mind mapping) solves this problem. A mind map includes the relationships between data. Displaying data in the form of a mind map on a web page allows users to clearly see the source and flow of data, thereby improving the user experience.

[0003] In related technologies, mind map drawing is implemented through the AntV / G6 framework. The AntV / G6 framework encapsulates API (Application Program Interface) functions that can draw mind maps. When drawing a mind map, the data in the tree structure to be displayed is used as the parameter of the API function for drawing the mind map, and by directly calling this API function, the mind map corresponding to this data can be drawn on the web page.

[0004] However, the above-mentioned mind map drawing method requires calling the API functions in the AntV / G6 framework, which requires technicians to be familiar with the AntV / G6 framework. Then, technicians need to spend a large amount of energy learning the AntV / G6 framework, so the learning cost is relatively high and the implementation difficulty is relatively large. Summary of the Invention

[0005] This application provides a method, apparatus, device, and storage medium for drawing mind maps, which can draw the mind map of data at a relatively low learning cost and is simple to implement. The technical solution is as follows:

[0006] In a first aspect, a method for drawing a mind map is provided, and the method includes:

[0007] Obtain target data, where the target data includes nodes at n levels, and the order of nodes from the 1st level to the nth level among the n levels is the order from the root node to the leaf node, and n is an integer greater than or equal to 2;

[0008] Generate a data card for each node among the nodes at the n levels, where the data card includes a control for displaying and editing data elements of the node;

[0009] According to the sorting relationship between the nodes at the n levels, display the data cards of each node among the nodes at the n levels on the mind map page;

[0010] According to the parent - child relationship between the nodes of the n levels, draw the connection lines between the data cards of each node displayed in the mind - map page.

[0011] In this application, target data is obtained. The target data includes nodes of n levels. Then, data cards for each node among the n levels of nodes are generated. Then, according to the sorting relationship between the nodes of the n levels, the data cards of each node among the n levels of nodes are displayed in the mind - map page. Furthermore, according to the parent - child relationship between the nodes of the n levels, the connection lines between the data cards of each node displayed in the mind - map page are drawn. Since each data card of a node is a control for displaying and editing the data elements of the corresponding node, each data card can be triggered specifically. That is, when the user clicks any data card, the terminal can directly know which data card is clicked, and thus know that it is necessary to perform corresponding interaction operations on the node to which this data card belongs. In this way, the interaction is relatively friendly. Moreover, for technical personnel, the technologies used in mind - map drawing are all basic front - end technologies, without the need to learn other frameworks, thus making the implementation simple.

[0012] In a second aspect, a mind - map drawing device is provided. The device includes:

[0013] An acquisition module, configured to acquire target data. The target data includes nodes of n levels. The order of nodes from the 1st level to the nth level among the n levels is the order from the root node to the leaf node, and n is an integer greater than or equal to 2;

[0014] A generation module, configured to generate data cards for each node among the n levels of nodes. The data card includes a control for displaying and editing the data elements of the node;

[0015] A first display module, configured to display the data cards of each node among the n levels of nodes in the mind - map page according to the sorting relationship between the nodes of the n levels;

[0016] A drawing module, configured to draw the connection lines between the data cards of each node displayed in the mind - map page according to the parent - child relationship between the nodes of the n levels.

[0017] In a third aspect, a computer device is provided. The computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, the above - mentioned mind - map drawing method is implemented.

[0018] Fourthly, a computer-readable storage medium is provided. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the above-mentioned mind map drawing method is implemented.

[0019] Fifthly, a computer program product containing instructions is provided. When it runs on a computer, it enables the computer to execute the steps of the above-mentioned mind map drawing method.

[0020] It can be understood that the beneficial effects of the above-mentioned second aspect, third aspect, fourth aspect, and fifth aspect can refer to the relevant descriptions in the first aspect above, and will not be elaborated here. Description of the Drawings

[0021] To more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0022] Figure 1 is a flowchart of a mind map drawing method provided by an embodiment of the present application;

[0023] Figure 2 is a schematic diagram of a data card provided by an embodiment of the present application;

[0024] Figure 3 is a schematic diagram of the principle for determining the data area of the j-th node in the i-th layer provided by the first embodiment of the present application;

[0025] Figure 4 is a schematic diagram of the principle for determining the data area of the j-th node in the i-th layer provided by the second embodiment of the present application;

[0026] Figure 5 is a schematic diagram of the principle for determining the data area of the j-th node in the i-th layer provided by the third embodiment of the present application;

[0027] Figure 6 is a schematic diagram of the principle for determining the data area of the first node in the i-th layer provided by an embodiment of the present application;

[0028] Figure 7 is another schematic diagram of the principle for determining the data area of the first node in the i-th layer provided by an embodiment of the present application;

[0029] Figure 8 is a schematic diagram of the principle for determining the data area of the j-th node in the i-th layer provided by the fourth embodiment of the present application;

[0030] Figure 9It is the schematic diagram of the fifth method for determining the data area of the j-th node in the i-th layer provided by the embodiments of the present application;

[0031] Figure 10 It is the schematic diagram of a method for determining the data area of each node in the 1st layer provided by the embodiments of the present application;

[0032] Figure 11 It is another schematic diagram of a method for determining the data area of each node in the 1st layer provided by the embodiments of the present application;

[0033] Figure 12 It is the schematic diagram of the connection line between the data cards of two nodes provided by the embodiments of the present application;

[0034] Figure 13 It is the schematic diagram of a method for determining the connection line endpoints corresponding to each of the two nodes provided by the embodiments of the present application;

[0035] Figure 14 It is another schematic diagram of the connection line between the data cards of two nodes provided by the embodiments of the present application;

[0036] Figure 15 It is yet another schematic diagram of the connection line between the data cards of two nodes provided by the embodiments of the present application;

[0037] Figure 16 It is the flowchart of another mind map drawing method provided by the embodiments of the present application;

[0038] Figure 17 It is the schematic diagram of a mind map page provided by the embodiments of the present application;

[0039] Figure 18 It is the structural schematic diagram of a mind map drawing device provided by the embodiments of the present application;

[0040] Figure 19 It is the structural schematic diagram of a computer device provided by the embodiments of the present application. Detailed implementation manners

[0041] To make the objectives, technical solutions and advantages of the present application clearer, the following will further describe the embodiments of the present application in detail with reference to the accompanying drawings.

[0042] It should be understood that the "multiple" mentioned in this application refers to two or more. In the description of this application, unless otherwise specified, " / " means "or". For example, A / B can mean A or B. The "and / or" in this article is just a description of the association relationship between associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone. In addition, in order to clearly describe the technical solution of this application, words such as "first" and "second" are used to distinguish the same items or similar items with basically the same functions and roles. Those skilled in the art can understand that the words such as "first" and "second" do not limit the quantity and execution order, and the words such as "first" and "second" do not necessarily limit to being different.

[0043] Before explaining the embodiments of this application in detail, the application scenarios of the embodiments of this application will be described first.

[0044] One method for drawing a mind map in the related art is implemented through the AntV / G6 framework. However, the AntV / G6 framework does not have a traceability function. Therefore, the mind map drawn using the AntV / G6 framework cannot perform traceability operations, that is, it is not possible to view the source of a certain data through the mind map drawn using the AntV / G6 framework.

[0045] Another method for drawing a mind map in the related art is implemented through canvas (drawing board). The specific implementation steps are as follows: Regarding the web page as a drawing board, setting a coordinate system with the upper left corner of the web page as the origin of the coordinate system. First, determine the coordinate points of each node in the tree structure data to be displayed on the drawing board, then draw each node on the drawing board according to the coordinate points of each node, and then draw the paths between the parent nodes and the child nodes on the drawing board according to the coordinate points of each node to implement mind map drawing.

[0046] However, since all the content on the web page is drawn in the way of implementing mind map drawing using canvas, the mind map presented on the web page is essentially a painting. Moreover, any operation performed on the web page depends on this coordinate system. Therefore, when performing an interaction operation on a certain node, if a click operation is detected on the web page, it is necessary to first determine the coordinate point of the click position, and then compare the coordinate point of the click position on the web page with the coordinate points of each node to determine the node corresponding to the click position on the web page. Only after that can the relationship between this node and other nodes be determined. This way of mind map drawing based on the coordinate system has strong dependence, the process of interacting with the mind map is relatively complex, and it is difficult to implement complex interaction functions such as adding nodes. In addition, since the mind map drawn in this way is essentially a painting, it is more dependent on the resolution. Therefore, the mind map displayed in the case of a relatively large screen resolution is relatively blurred.

[0047] To this end, the embodiments of the present application provide a mind map drawing method. This mind map drawing method can be applied to the scenario of drawing a mind map, specifically to the scenario of displaying data in the form of a mind map on a page. Specifically, obtain the data to be displayed. This data is in the form of a tree structure and includes nodes at multiple levels. Then, according to these nodes at multiple levels, generate a data card for each node. Each data card of the node is used to display the data element corresponding to the node. Then, display each data card of the node on the page, and then draw the connection lines between the data cards of each node on the page according to the parent-child relationship between the nodes to complete the mind map drawing. Each data card of the node is a control for displaying and editing the data element corresponding to the node. Therefore, each data card can be triggered specifically. That is, when the user clicks on any data card, the terminal can directly know which data card is clicked, so as to know that the corresponding interaction operation is to be performed on the node to which this data card belongs. In this way, the interaction is relatively friendly. Moreover, for technicians, the technologies used in the mind map drawing method provided by the embodiments of the present application are all basic front-end technologies, and there is no need to learn other frameworks, thus making the implementation simple.

[0048] The mind map drawing method provided by the embodiments of the present application will be explained in detail below.

[0049] Figure 1 is a flowchart of a mind map drawing method provided by the embodiments of the present application. Refer to Figure 1 This method includes the following steps.

[0050] Step 101: The terminal obtains target data, and the target data includes nodes at n levels.

[0051] The node order from the first layer to the nth layer among the n layers is the order from the root node to the leaf node, where n is an integer greater than or equal to 2.

[0052] The target data is the data that needs to be displayed in the form of a mind map. Exemplarily, the target data can be data designed by technicians according to requirements, and the target data can be obtained from the backend (including but not limited to servers). The structure of the target data is a tree structure. For example: the target data is a treeList (tree list).

[0053] For example, the target data is the tree list shown in Table 1 below. Table 1 includes nodes at 3 levels. The node (initiator) in the first level is the parent node of the two nodes (data preprocessing 1 and data preprocessing 2) in the second level, and is also the root node of the entire tree list. The first node (data preprocessing 1) in the second level has two child nodes (feature engineering 1 and feature engineering 2), and both of these child nodes are at the third level. The second node (data preprocessing 2) in the second level has two child nodes (feature engineering 3 and feature engineering 4), and both of these child nodes are at the third level.

[0054] Table 1

[0055]

[0056] The embodiments of the present application only use Table 1 above as an example to illustrate the target data, and Table 1 above does not limit the embodiments of the present application.

[0057] Optionally, before the terminal obtains the target data, it can first build a front-end framework. For example, it can build a React framework or a Vue framework. The embodiments of the present application do not limit this. In this way, the mind map of relevant data can be drawn using the built front-end framework later.

[0058] Optionally, after the terminal obtains the target data, it can select UI (User Interface) components to build a web page. For example, it can use the components in the ANTD component library to build a web page. In this way, it is convenient to draw a mind map in the built web page later.

[0059] Step 102: The terminal generates a data card for each node among the n nodes, and the data card includes a control for displaying and editing the data elements of the node.

[0060] The data card of each node among the n levels is used to display the data element of the corresponding node. The controls included in the data card refer to the encapsulation of data and methods. A control can have its own attributes and methods. Among them, the method is some simple and visible functions of the control, and the control can be triggered. In the embodiment of the present application, it is manifested that the data card can be triggered, that is, the user can perform operations on the data card specifically. For example, the user can directly click to select a certain data card.

[0061] Optionally, the controls in the data card can implement functions such as selecting the corresponding node, deleting the corresponding node, modifying the data element of the corresponding node, and adding a new node. That is, the data element of the node can be edited through the controls in the data card.

[0062] Optionally, the way for the terminal to generate the data card of each node among the n levels can be to use the The tag defines a block-level element and adds the data element of the corresponding node to be used with In the block-level elements defined by the label, the data card of the corresponding node can be obtained. In this case, the data card is the one using Block-level elements defined by the label.

[0063] Tags are used to define divisions or sections in an HTML document. Labels are often used to group block-level elements so that they can be formatted with a style sheet. Labels can divide a document into independent and different parts. In this way, the data cards of each node generated by the terminal are independent of each other, with simple formatting settings, and for technicians, the technical implementation is simple. For example, Figure 2 is a schematic diagram of the data card, as Figure 2 shown, Figure 2 includes the border 201 of the data card, the data element 202 corresponding to the node, the delete button 203, and the add button 204. Among them, the delete button 203 is used to trigger the operation of deleting the corresponding node, and the add button 204 is used to trigger the operation of adding a new child node corresponding to the node.

[0064] Step 103: The terminal displays the data cards of each node in the n levels of nodes on the mind map page according to the sorting relationship between the n levels of nodes.

[0065] The mind map page can be a web page. Of course, it can also be other pages that can implement mind map drawing. The embodiments of the present application do not limit this.

[0066] In this case, during the interaction operation, when the user clicks on a certain data card displayed on the mind map page, since this data card is triggerable, the terminal can directly know which data card on the mind map page the user clicks, so as to know which operation to perform on the node to which this data card belongs, thus making the interaction operation more efficient and user-friendly.

[0067] Specifically, the operation of Step 103 can be implemented by the following steps (1)-(5).

[0068] (1) The terminal determines n node areas in the mind map page that correspond one-to-one to the n levels.

[0069] Each of the n node areas is used to display the data cards of the nodes at the corresponding level. This can make the levels of the entire mind map page clearer. Exemplarily, each of the n node areas can be a rectangular area.

[0070] Optionally, the operation of step (1) can be: determining the first preset length as the length of each of the n node areas; determining the width of each of the n node areas according to the number of nodes in the level with the most nodes among the n levels.

[0071] The first preset length can be set in advance. For example, the first preset length can be set by a technician according to actual requirements; or, the first preset length can be automatically set by the terminal based on the length of the mind map page and the number of levels of the target data. For example, the terminal can subtract a preset interval value from the value obtained by dividing the length of the mind map page by the number of levels of the target data to obtain the first preset length.

[0072] Optionally, the layout of the n node areas in the mind map page from the first node area to the nth node area can adopt the absolute positioning method. Since the absolute positioning method will cause the mind map page to break away from the document flow, when a data card of a new node is added to a node area in the mind map page, the width of this node area can be re-determined.

[0073] Optionally, the layout of the data cards from the first data card of each node area to the last data card of each node area in the n node areas can be the Flex (flexible) layout method.

[0074] (2) The terminal determines the data area of each node in the nth level in the nth node area according to the sorting relationship between the nodes in the (n - 1)th level among the n levels.

[0075] The data area of any node is used to display the data card of this node, and only one data card is displayed in one data area. In this case, determining the data area of each node in the nth level is equivalent to determining the position where the data card of each node is placed in the mind map page.

[0076] To ensure the aesthetics of the mind map page, the display positions of the data cards of the nodes in the n levels can be associated with the display positions of the data cards of the child nodes of each node. Only in this way can it be ensured that the data cards of the child nodes belonging to the same parent node are evenly displayed behind the data card of this parent node, thereby ensuring that the data relationship of the mind map page is relatively clear. For this purpose, it is necessary to determine the data areas of the nodes in each node area in turn starting from the last node area. First, determine the data area of each node in the nth level in the nth node area among the n node areas.

[0077] Specifically, the operation in step (2) can be as follows: for the first node in the nth layer, determine the display distance value corresponding to the first node in the nth layer according to the sorting position of the parent node of the first node in the nth layer among the nodes in the (n - 1)th layer, and determine the data area corresponding to the first node in the nth layer as the data area that is at a distance equal to the display distance value corresponding to the first node in the nth layer from the target boundary of the nth node area; for the first target node in the nth layer, determine the display distance value corresponding to the first target node according to the sorting position difference between the parent node of the first target node and the parent node of the second target node and the display distance value corresponding to the second target node, and determine the data area corresponding to the first target node as the data area that is at a distance equal to the display distance value corresponding to the first target node from the target boundary of the nth node area.

[0078] The display distance value corresponding to any node is the distance between the data area where the data card of this node is located and the target boundary of the node area where the data card of this node is located. The target boundary of each node area in the n node areas can be one of the upper boundary, lower boundary, left boundary, and right boundary, and the embodiments of the present application do not limit this. For example: the display distance value corresponding to the first node in the nth layer is the distance between the upper boundary of the data area of the first node in the nth layer (i.e., the data area where the data card of the first node is located) and the upper boundary of the nth node area.

[0079] Since each node in the nth layer has no child nodes, the width of the data area of each node in the nth layer can be the width of the data card of this node. That is, for any node without child nodes, the width of its data area is the width of the data card of this node. To facilitate determining the data areas of each node, the widths of the data cards of each node can be preset to a first preset width, and the first preset width can be set by a technician according to the width of the mind map page.

[0080] The first target node is any node in the nth layer except the first node, and the second target node is the node adjacent to the first target node in the upper layer in the nth layer.

[0081] Among them, the operation of the terminal to determine the display distance value corresponding to the first node in the nth layer according to the sorting position of the parent node of the first node in the nth layer among the nodes in the (n - 1)th layer can be implemented in the following three cases.

[0082] In the first case, if the parent node of the first node in the nth level is the jth node in the (n - 1)th level, then the first preset interval value, (j - 1) times the second preset interval value, and (j - 1) times the first preset width are accumulated to obtain the display distance value corresponding to the first node in the nth level, where j is a positive integer.

[0083] The first preset interval value is the interval value between the target boundary of the nth node area and the first data area in the nth node area. The first preset interval value can be set in advance, and the first preset interval value can be set by the technician according to the width of the mind map page.

[0084] The second preset interval value is the distance value between adjacent two data areas in any one of the second node area to the last node area in the n node area. The second preset interval value can be set in advance, and the second preset interval value can be set by the technician according to the width of the mind map page.

[0085] In this way, regardless of whether two adjacent nodes belong to the same parent node, the interval between the data areas of two adjacent nodes is set to the second preset interval value, which can save computing resources.

[0086] For example: The target data has 4 levels, and the first preset interval value is 10. The parent node of the first node in the 4th level is the first node in the 3rd level, then the first preset interval value 10 is determined as the display distance value corresponding to the first node in the 4th level.

[0087] Another example: The target data has 4 levels, the first preset interval value is 10, the second preset interval value is 10, and the first preset width is 20. The parent node of the first node in the 4th level is the third node in the 3rd level, then the first preset interval value 10, 2 times the second preset interval value 10, and 2 times the first preset width 20 are accumulated, and the display distance value corresponding to the first node in the 4th level is 70.

[0088] In the second case, if the parent node of the first node in the nth level is the jth node in the (n - 1)th level, and the parent nodes of the first j nodes in the (n - 1)th level are the same node, then the first preset interval value, (j - 1) times the second preset interval value, and (j - 1) times the first preset width are accumulated to obtain the display distance value corresponding to the first node in the nth level.

[0089] In this case, the second preset interval value is the distance value between the data areas of adjacent two nodes belonging to the same parent node in any one of the second node area to the last node area in the n node area.

[0090] If the parent nodes of the first j nodes in the (n - 1)-th level are the same node, it indicates that the interval values between the data areas of adjacent two nodes among the first j nodes are the same (i.e., the second preset interval value). Then, the first preset interval value, (j - 1) times the second preset interval value, and (j - 1) times the first preset width can be accumulated to obtain the display distance value corresponding to the first node in the n-th level.

[0091] For example: The target data has 4 levels, the first preset interval value is 10, the second preset interval value is 10, and the first preset width is 20. The parent node of the first node in the 4th level is the second node in the 3rd level, and the parent nodes of the first 2 nodes in the 3rd level are the same node. Then, the first preset interval value 10, the second preset interval value 10, and the first preset width 20 can be accumulated to obtain the display distance value corresponding to the first node in the 4th level, which is 40.

[0092] In the third case, if the parent node of the first node in the n-th level is the j-th node in the (n - 1)-th level, and the parent nodes of the first j nodes in the (n - 1)-th level are m different nodes, then the first preset interval value, (j - m) times the second preset interval value, (m - 1) times the third preset interval value, and (j - 1) times the first preset width are accumulated to obtain the display distance value corresponding to the first node in the n-th level, where m is an integer greater than or equal to 2.

[0093] The third preset interval value is the interval value between the data areas of adjacent two nodes that do not belong to the same parent node, and the third preset interval value is greater than the second preset interval value. By setting the interval values between the data areas of adjacent two nodes that belong to the same parent node and those that do not belong to the same parent node differently, the interval between the data areas of adjacent two nodes that do not belong to the same parent node is increased, so that the data cards of the nodes that belong to the same parent node can be displayed concentratedly, thus making the data relationship on the mind map page clearer.

[0094] For example: The target data has 4 levels, the first preset interval value is 10, the second preset interval value is 10, the third preset interval value is 15, and the first preset width is 20. The parent node of the first node in the 4th level is the second node in the 3rd level, and the parent nodes of the first 2 nodes in the 3rd level are 2 different nodes. Then, the first preset interval value 10, the third preset interval value 15, and the first preset width 20 can be accumulated to obtain the display distance value corresponding to the first node in the 4th level, which is 45.

[0095] Among them, the operation in which the terminal determines the display distance value corresponding to the first target node according to the sorting position difference between the parent node of the first target node and the parent node of the second target node and the display distance value corresponding to the second target node can be implemented in the following three cases.

[0096] In the first case, if there are k nodes between the parent node of the first target node and the parent node of the second target node, then the display distance value corresponding to the second target node, (k + 1) times the second preset interval value, and (k + 1) times the first preset width are accumulated to obtain the display distance value corresponding to the first target node, where k is an integer greater than or equal to 0.

[0097] In this case, setting the interval between the data areas of two adjacent nodes to the second preset interval value can save computing resources.

[0098] When k is 0, the parent node of the first target node is adjacent to the parent node of the second target node. When k is greater than or equal to 1, there is at least one other node between the parent node of the first target node and the parent node of the second target node.

[0099] If there are k nodes between the parent node of the first target node and the parent node of the second target node, then the display distance value corresponding to the second target node, the sum of the intervals between the parent node of the first target node and the parent node of the second target node (i.e., (k + 1) times the second preset interval value), and the widths of the data cards of (k + 1) nodes (i.e., the k nodes and the second target node) (i.e., (k + 1) times the first preset width) can be accumulated to obtain the display distance value corresponding to the first target node.

[0100] For example: The target data has 4 levels, the first preset interval value is 10, the second preset interval value is 10, the first preset width is 20, and the display distance value corresponding to the second target node is 60. There are 2 nodes between the parent node of the first target node and the parent node of the second target node. Then, the display distance value 60 corresponding to the second target node, 3 times the second preset interval value 10, and 3 times the first preset width 20 can be accumulated to obtain the display distance value corresponding to the first target node as 150.

[0101] In the second case, if there are k nodes between the parent node of the first target node and the parent node of the second target node, then in the case where the grandparent node of the first target node and the grandparent node of the second target node are the same node, the display distance value corresponding to the second target node, (k + 1) times the second preset interval value, and (k + 1) times the first preset width are accumulated to obtain the display distance value corresponding to the first target node.

[0102] In this case, if the grandparent nodes of the first target node and the second target node are the same node, it indicates that the interval values between the data areas of adjacent nodes among the k nodes are the same. Then, the display distance value corresponding to the second target node, the sum of the intervals between the parent node of the first target node and the parent node of the second target node (i.e., k + 1 times the second preset interval value), and the widths of the data cards of k + 1 nodes (i.e., the k nodes and the second target node) (i.e., k + 1 times the first preset width) can be accumulated to obtain the display distance value corresponding to the first target node.

[0103] For example: The target data has 4 levels, the first preset interval value is 10, the second preset interval value is 10, the first preset width is 20, and the display distance value corresponding to the second target node is 60. There are 2 nodes between the parent node of the first target node and the parent node of the second target node, and the grandparent nodes of the first target node and the second target node are the same node. Then, the display distance value 60 corresponding to the second target node, 3 times the second preset interval value 10, and 3 times the first preset width 20 can be accumulated to obtain the display distance value corresponding to the first target node, which is 150.

[0104] In the third case, if there are k nodes between the parent node of the first target node and the parent node of the second target node, and the grandparent nodes of the first target node and the second target node are p different nodes, then the display distance value corresponding to the second target node, k - p + 2 times the second preset interval value, p - 1 times the third preset interval value, and k + 1 times the first preset width are accumulated to obtain the display distance value corresponding to the first target node, where p is an integer greater than or equal to 2.

[0105] In this case, if the grandparent nodes of the first target node and the second target node are p different nodes, it indicates that there are p - 1 third preset interval values and k - p + 2 second preset interval values among the intervals between adjacent nodes among the k nodes. Then, the display distance value corresponding to the second target node, the sum of the intervals between the parent node of the first target node and the parent node of the second target node (i.e., the sum of k - p + 2 times the second preset interval value and p - 1 times the third preset interval value), and the widths of the data cards of k + 1 nodes (i.e., the k nodes and the second target node) (i.e., k + 1 times the first preset width) can be accumulated to obtain the display distance value corresponding to the first target node.

[0106] For example: The target data has 4 levels. The first preset interval value is 10, the second preset interval value is 10, the third preset interval value is 15, the first preset width is 20, and the display distance value corresponding to the second target node is 60. There are 2 nodes between the parent node of the first target node and the parent node of the second target node, and the grandparent nodes of the first target node and the second target node are 2 different nodes. Then, the display distance value 60 corresponding to the second target node, 2 times the second preset interval value 10, the third preset interval value 15, and 3 times the first preset width 20 can be accumulated to obtain the display distance value corresponding to the first target node, which is 155.

[0107] (3) The terminal determines the data area of each node in the i-th level of the n levels in the i-th node area among the n node areas according to the data area of each node in the (i + 1)-th level of the n levels, where i is an integer greater than or equal to 2 and less than or equal to n - 1.

[0108] Since there is a parent-child relationship between the levels in the target data, the data area of the nodes in the subsequent level of the target data will affect the data area of the nodes in the previous level. Therefore, determining the data area of each node in the i-th level according to the data area of each node in the (i + 1)-th level in the i-th node area can make the determined data area of each node in the i-th level more reasonable, thus ensuring that the data relationship presented on the mind map page is clearer.

[0109] Specifically, the operation in step (3) can be implemented in the following two possible ways.

[0110] The following describes the first possible way. The first possible way can be implemented in the following five cases.

[0111] In the first case, for the j-th node in the i-th level, if the j-th node in the i-th level has child nodes, then the display distance value corresponding to the first child node of the j-th node in the i-th level is determined as the display distance value corresponding to the j-th node in the i-th level, where j is a positive integer; the sum of the widths of the data areas of all child nodes of the j-th node in the i-th level and the sum of the interval values between the data areas of all adjacent two child nodes of the j-th node in the i-th level are added to obtain the display width corresponding to the j-th node in the i-th level; the data area that is at a distance from the target boundary of the i-th node area equal to the display distance value corresponding to the j-th node in the i-th level and has a width equal to the display width corresponding to the j-th node in the i-th level is determined as the data area of the j-th node in the i-th level.

[0112] If the target boundaries of the i-th node region and the (i + 1)-th node region can be on the same straight line, then when there are child nodes for the j-th node in the i-th level, the display distance value corresponding to the j-th node in the i-th level is the same as the display distance value corresponding to the first child node of the j-th node in the i-th level. Therefore, the display distance value corresponding to the first child node of the j-th node in the i-th level can be determined as the display distance value corresponding to the j-th node in the i-th level.

[0113] In this case, the width of the data area of the j-th node in the i-th level is obtained by adding the sum of the widths of the data areas of all child nodes of the j-th node in the i-th level and the sum of the interval values between the data areas of all adjacent child nodes of the j-th node in the i-th level. This can ensure that the data areas of all child nodes belonging to the same parent node are within the subordinate range of the data area of this parent node, thus making the data relationship in the mind map page clearer.

[0114] For example: The target data has 4 levels, i = 2, and j = 3. Figure 3 Schematic diagram for determining the data area of the j-th node in the i-th level. See Figure 3 , Figure 3 which includes the 2nd node region 301, the 3rd node region 302, the data areas 303 of the two child nodes of the third node in the 2nd level, and the data area 304 of the third node in the 2nd level.

[0115] The distance from the target boundary of the 3rd node region 302 to the data area 303 of the first child node of the third node in the 2nd level is 40, that is, the display distance value corresponding to the first child node of the third node in the 2nd level is 40. The width of each data area 303 of the child nodes of the third node in the 2nd level is 12, and the interval value between the data areas 303 of the adjacent two child nodes of the third node in the 2nd level is 10. Accordingly, the display distance value corresponding to the third node in the 2nd level is the display distance value 40 corresponding to the first child node of the third node in the 2nd level. The display width corresponding to the third node in the 2nd level is the sum of the widths of the data areas 303 of the two child nodes of the third node in the 2nd level (24) plus the interval value (10) between the data areas 303 of all adjacent two child nodes of the third node in the 2nd level, that is, the display width corresponding to the third node in the 2nd level is 34. Then, it can be determined that the data area 304, which is 40 away from the target boundary of the 2nd node region 301 and has a width of 34, is the data area of the third node in the 2nd level.

[0116] In the second case, for the j-th node in the i-th level, if the j-th node in the i-th level has no child nodes and the j-th node in the i-th level is the first node in the i-th level, then the first preset interval value is determined as the display distance value corresponding to the j-th node in the i-th level, and the data area that is at a distance of the display distance value corresponding to the j-th node in the i-th level from the target boundary of the i-th node area is determined as the data area of the j-th node in the i-th level.

[0117] Since the j-th node in the i-th level has no child nodes, the width of the data area of the j-th node in the i-th level can be directly determined as the width of the data card of the j-th node in the i-th level (i.e., the first preset width). That is to say, in this case, the width of the data area of the j-th node in the i-th level is defaulted to the first preset width.

[0118] In the third case, for the j-th node in the i-th level, if the j-th node in the i-th level has no child nodes and the j-th node in the i-th level is not the first node in the i-th level, then the first preset interval value, the sum of the widths of the data areas of the first j - 1 nodes in the i-th level, the sum of the interval values between the data areas of all adjacent two nodes among the first j - 1 nodes in the i-th level, and the second preset interval value are accumulated to obtain the display distance value corresponding to the j-th node in the i-th level, and the data area that is at a distance of the display distance value corresponding to the j-th node in the i-th level from the target boundary of the i-th node area is determined as the data area of the j-th node in the i-th level.

[0119] In this case, the width of the data area of the j-th node in the i-th level is defaulted to the width of the data card of the j-th node in the i-th level, that is, defaulted to the first preset width.

[0120] For example: The target data has 4 levels, i is 2, j is 3, the first preset interval value is 10, the second preset interval value is 10, and the first preset width is 12. Figure 4 For the schematic diagram of determining the data area of the j-th node in the i-th level. Refer to Figure 4 , Figure 4 It includes the second node area 401, the third node area 402, the data areas 403 of the first two nodes in the second layer, and the data area 404 of the third node in the second layer. The distance value (i.e., the first preset interval value) between the first data area 403 in the second node area 401 and the target boundary of the second node area 401 is 10. The width of each data area 403 among the first two data areas 403 in the second node area 401 is 12. The interval value between the first data area 403 and the second data area 403 in the second node area 401 is 10. Then the sum 54 of the first preset interval value (10), the sum of the widths of the data areas 403 of the first two nodes in the second node area 401 (24), the interval value (10) between the data areas 403 of the first two nodes in the second node area 401, and the second preset interval value (10) is the display distance value corresponding to the third node in the second layer. Then, a data area that is 54 away from the target boundary of the second node area 401 and has a width of 12 can be determined as the data area 404 of the third node in the second layer.

[0121] In the fourth case, for the j-th node in the i-th layer, if the j-th node in the i-th layer has no child nodes and the j-th node in the i-th layer is not the first node in the i-th layer, then when the parent node of the j-th node in the i-th layer and the parent node of the (j - 1)-th node are the same node, the first preset interval value, the sum of the widths of the data areas of the first (j - 1) nodes in the i-th layer, the sum of the interval values between the data areas of all adjacent two nodes among the first (j - 1) nodes in the i-th layer, and the second preset interval value are accumulated to obtain the display distance value corresponding to the j-th node in the i-th layer; a data area that is at a distance from the target boundary of the i-th node area equal to the display distance value corresponding to the j-th node in the i-th layer is determined as the data area of the j-th node in the i-th layer.

[0122] In this case, the width of the data area of the j-th node in the i-th layer is defaulted to the width of the data card of the j-th node in the i-th layer, that is, defaulted to the first preset width.

[0123] If the parent node of the j-th node in the i-th layer and the parent node of the (j - 1)-th node are the same node, it means that the interval value between the data area of the j-th node and the data area of the (j - 1)-th node in the i-th layer is the second preset interval value. In this way, the first preset interval value, the sum of the widths of the data areas of the first (j - 1) nodes in the i-th layer, the sum of the interval values between the data areas of all adjacent two nodes among the first (j - 1) nodes in the i-th layer, and the second preset interval value can be accumulated to obtain the display distance value corresponding to the j-th node in the i-th layer.

[0124] In the fifth case, for the j-th node in the i-th level, if the j-th node in the i-th level has no child nodes and the j-th node in the i-th level is not the first node in the i-th level, then when the parent node of the j-th node in the i-th level and the parent node of the (j - 1)-th node are different nodes, the first preset interval value, the sum of the widths of the data areas of the first (j - 1) nodes in the i-th level, the sum of the interval values between the data areas of all adjacent two nodes among the first (j - 1) nodes in the i-th level, and the third preset interval value are accumulated to obtain the display distance value corresponding to the j-th node in the i-th level; the data area that is at a distance from the target boundary of the i-th node area equal to the display distance value corresponding to the j-th node in the i-th level is determined as the data area of the j-th node in the i-th level, and the third preset interval value is greater than the second preset interval value.

[0125] In this case, the width of the data area of the j-th node in the i-th level is defaulted to the width of the data card of the j-th node in the i-th level, that is, it is defaulted to the first preset width.

[0126] If the parent node of the j-th node in the i-th level and the parent node of the (j - 1)-th node are different nodes, it means that the interval value between the data area of the j-th node in the i-th level and the data area of the (j - 1)-th node is different from the interval value between the data areas of two adjacent nodes belonging to the same parent node (i.e., the second preset interval value), that is, the interval value between the data area of the j-th node in the i-th level and the data area of the (j - 1)-th node is the third preset interval value. In this way, the data areas of the nodes belonging to the same parent node can be centrally displayed, and the data relationship of the mind map page can be made clearer.

[0127] For example: The target data has 4 levels, i is 2, j is 3, the first preset interval value is 10, the third preset interval value is 15, and the first preset width is 12. Figure 5 The schematic diagram for determining the data area of the j-th node in the i-th level. See Figure 5 , Figure 5 It includes the second node area 501, the third node area 502, the data areas 503 of the first two nodes in the second layer, and the data area 504 of the third node in the second layer. The width of each data area 503 in the first two data areas 503 of the second node area 501 is 12, and the interval value between the first data area 503 and the second data area 503 in the second node area 501 is 10. Then, the sum of 59 of the first preset interval value (10), the sum of the widths of the data areas 503 of the first two nodes in the second node area 501 (24), the interval value (10) between the data areas 503 of the first two nodes in the second node area 501, and the third preset interval value (15) is the display distance value corresponding to the third node in the second layer. Then, it can be determined that the data area with a width of 12 and a distance of 59 from the target boundary of the second node area 501 is the data area 504 of the third node in the second layer.

[0128] The following describes the second possible method, which can be implemented in the following three cases.

[0129] In the first case, for the j-th node in the i-th layer, if the j-th node in the i-th layer is the first node in the i-th layer, the first preset interval value is determined as the display distance value corresponding to the j-th node in the i-th layer. When there are no child nodes for the j-th node in the i-th layer, the data area that is at a distance from the target boundary of the i-th node area equal to the display distance value corresponding to the j-th node in the i-th layer is determined as the data area of the j-th node in the i-th layer. In this case, the width of the data area of the j-th node in the i-th layer is defaulted to the width of the data card of the j-th node in the i-th layer, that is, defaulted to the first preset width. When there are child nodes for the j-th node in the i-th layer, the sum of the widths of all the data areas of the child nodes of the j-th node in the i-th layer and the sum of the interval values between all the adjacent two child nodes' data areas of the j-th node in the i-th layer are added together to obtain the display width corresponding to the j-th node in the i-th layer. The data area that is at a distance from the target boundary of the i-th node area equal to the display distance value corresponding to the j-th node in the i-th layer and has a width equal to the display width corresponding to the j-th node in the i-th layer is determined as the data area of the j-th node in the i-th layer.

[0130] For example: The target data has 4 layers, i is 2, j is 1, the first preset interval value is 10, and the first preset width is 12. Figure 6 For the schematic diagram of determining the data area of the first node in the i-th layer. See Figure 6 , Figure 6 It includes the second node area 601, the third node area 602, and the data area 603 of the first node in the second level. The first node in the second level has no child nodes. The display distance value corresponding to the first node in the second level is the first preset interval value 10. Since the first node in the second level has no child nodes, it can be determined that the data area 603 with a distance of 10 from the target boundary of the second node area 601 and a width of 12 is the data area of the first node in the second level.

[0131] For another example: The target data has 4 levels, i is 2, j is 1, the first preset interval value is 10, the second preset interval value is 10, and the first preset width is 12. Figure 7 It is a schematic diagram for determining the data area of the first node in the i-th level. See Figure 7 , Figure 7 It includes the second node area 701, the third node area 702, the data area 703 of the first node in the second level, and the data areas 704 of the two child nodes of the first node in the second level. The display distance value corresponding to the first node in the second level is the first preset interval value 10. Add the sum of the widths of the data areas 704 of the two child nodes of the first node in the second level (24) to the interval value (10) between the data areas 704 of all adjacent two child nodes of the first node in the second level, and the display width corresponding to the first node in the second level is obtained as 34. Therefore, it can be determined that the data area with a distance of 10 from the target boundary of the second node area 701 and a width of 34 is the data area 703 of the first node in the second level.

[0132] In the second case, for the j-th node in the i-th level, if the j-th node in the i-th level is not the first node in the i-th level, then when the parent node of the j-th node in the i-th level and the parent node of the (j - 1)-th node are the same node, the display distance value corresponding to the (j - 1)-th node in the i-th level, the width of the data area of the (j - 1)-th node in the i-th level, and the second preset interval value are accumulated to obtain the display distance value corresponding to the j-th node in the i-th level; or when the parent node of the j-th node in the i-th level and the parent node of the (j - 1)-th node are different nodes, the display distance value corresponding to the (j - 1)-th node in the i-th level, the width of the data area of the (j - 1)-th node in the i-th level, and the third preset interval value are accumulated to obtain the display distance value corresponding to the j-th node in the i-th level. When there are no child nodes for the j-th node in the i-th level, the data area that is at a distance corresponding to the display distance value of the j-th node in the i-th level from the target boundary of the i-th node area is determined as the data area of the j-th node in the i-th level. In this case, the width of the data area of the j-th node in the i-th level is defaulted to the width of the data card of the j-th node in the i-th level, that is, defaulted to the first preset width. When there are child nodes for the j-th node in the i-th level, the sum of the widths of the data areas of all child nodes of the j-th node in the i-th level and the sum of the interval values between the data areas of all adjacent two child nodes of the j-th node in the i-th level are added to obtain the display width corresponding to the j-th node in the i-th level, and the data area that is at a distance corresponding to the display distance value of the j-th node in the i-th level from the target boundary of the i-th node area and has a width corresponding to the display width of the j-th node in the i-th level is determined as the data area of the j-th node in the i-th level.

[0133] For example: The target data has 4 levels, i is 2, j is 3, the second preset interval value is 10, and the first preset width is 12. Figure 8 Schematic diagram for determining the data area of the j-th node in the i-th level. Refer to Figure 8 , Figure 8 It includes the second node area 801, the third node area 802, the data areas 803 of the first two nodes in the second layer, and the data area 804 of the third node in the second layer. The parent nodes of the second and third nodes in the second layer are the same node. The display distance value corresponding to the second node in the second layer is 40, the width of the data area of the second node in the second layer is 12, and the third node in the second layer has no child nodes. Then, the display distance value (40) corresponding to the second node, the width (12) of the data area of the second node in the second layer, and the second preset interval value (10) are accumulated to obtain the display distance value of 62 corresponding to the third node in the second layer. Since the third node in the second layer has no child nodes, it can be determined that the data area with a width of 12 and a distance of 62 from the target boundary of the second node area 801 is the data area 804 of the third node in the second layer.

[0134] For another example: The target data has 4 layers, i is 2, j is 3, the second preset interval value is 10, and the first preset width is 12. Figure 9 It is a schematic diagram for determining the data area of the j-th node in the i-th layer. Refer to Figure 9 , Figure 9 It includes the second node area 901, the third node area 902, the data areas 903 of the first two nodes in the second layer, the data area 904 of the third node in the second layer, and the data areas 905 of the two child nodes of the third node in the second layer. The parent nodes of the second and third nodes in the second layer are the same node. The display distance value corresponding to the second node in the second layer is 40, and the width of the data area of the second node in the second layer is 12. Then, the display distance value (40) corresponding to the second node, the width (12) of the data area of the second node in the second layer, and the second preset interval value (10) are accumulated to obtain the display distance value of 62 corresponding to the third node in the second layer. The sum of the widths (24) of the data areas 905 of the two child nodes of the third node in the second layer and the interval value (10) between the data areas 905 of all adjacent two child nodes of the third node in the second layer are added to obtain the display width of 34 corresponding to the third node in the second layer. Then, it can be determined that the data area with a width of 34 and a distance of 62 from the target boundary of the second node area 901 is the data area 904 of the third node in the second layer.

[0135] In the third case, for the j-th node in the i-th level, if the j-th node in the i-th level is not the first node in the i-th level, then add the display distance value corresponding to the (j - 1)-th node in the i-th level, the width of the data area of the (j - 1)-th node in the i-th level, and the second preset interval value to obtain the display distance value corresponding to the j-th node in the i-th level. When there are no child nodes for the j-th node in the i-th level, determine the data area that is at a distance corresponding to the display distance value of the j-th node in the i-th level from the target boundary of the i-th node area as the data area of the j-th node in the i-th level. In this case, the width of the data area of the j-th node in the i-th level is defaulted to the width of the data card of the j-th node in the i-th level, that is, defaulted to the first preset width. When there are child nodes for the j-th node in the i-th level, add the sum of the widths of the data areas of all child nodes of the j-th node in the i-th level and the sum of the interval values between the data areas of all adjacent two child nodes of the j-th node in the i-th level to obtain the display width corresponding to the j-th node in the i-th level. Determine the data area that is at a distance corresponding to the display distance value of the j-th node in the i-th level from the target boundary of the i-th node area and has a width corresponding to the display width of the j-th node in the i-th level as the data area of the j-th node in the i-th level.

[0136] (4) The terminal determines the data area of each node in the first level in the first node area among the n node areas.

[0137] In some embodiments, the operation in step (4) may be: for the first node in the first level, determine the fourth preset interval value as the display distance value corresponding to the first node in the first level, and determine the data area that is at a distance corresponding to the display distance value of the first node in the first level from the target boundary of the first node area as the data area of the first node in the first level; for the s-th node in the first level, add the display distance value corresponding to the (s - 1)-th node in the first level, the width of the data area of the (s - 1)-th node in the first level, and the fifth preset interval value, or add the display distance value corresponding to the (s - 1)-th node in the first level, the width of the data area of the (s - 1)-th node in the first level, and the sixth preset interval value to obtain the display distance value corresponding to the s-th node in the first level. Determine the data area that is at a distance corresponding to the display distance value of the s-th node in the first level from the target boundary of the first node area as the data area of the s-th node in the first level, where s is an integer greater than or equal to 2.

[0138] The fourth preset interval value is the interval value between the target boundary of the first node area and the first data area of the first node area. The fourth preset interval value can be set in advance, and the fourth preset interval value can be set by the technician according to the width of the mind map page.

[0139] The fifth preset interval value and the sixth interval value are the interval values between two adjacent data areas in the first node area. The fifth preset interval value and the sixth interval value can be set in advance, and the fifth preset interval value and the sixth interval value can be set by the technician according to the width of the mind map page.

[0140] Optionally, the target data also includes the attribution information of the nodes at the first level. For example, if two companies cooperate on a project at the same time, and the two nodes at the first level are the project data of these two companies respectively, then the company names in the project data are the attribution information.

[0141] Optionally, the terminal can display the attribution information of each node in the first level in the data card corresponding to the node, or display the attribution information of each node separately. If the attribution information of each node is displayed separately, a data card for displaying the attribution information can be generated, and the width of the data card for displaying the attribution information can be set in advance.

[0142] When determining the data areas of each node in the first level, the data areas of the nodes with the same attribution information are determined in sequence. After the determination of the data areas of the nodes with the same attribution information is completed, the determination of the data areas of the nodes with another attribution information is started. The interval value between the data areas of two adjacent nodes with different attribution information can be set differently from the interval value between the data areas of the nodes with the same attribution information. For example, the interval value between two adjacent nodes with the same attribution information can be set as the fifth preset interval value, and the interval value between two adjacent nodes with different attribution information can be set as the sixth preset interval value, and the sixth preset interval value is greater than the fifth preset interval value.

[0143] In this case, for the s-th node in the first level, if the attribution information of the s-th node in the first level is the same as that of the (s - 1)-th node, then the display distance value corresponding to the (s - 1)-th node in the first level, the width of the data area of the (s - 1)-th node in the first level, and the fifth preset interval value are accumulated to obtain the display distance value corresponding to the s-th node in the first level. If the attribution information of the s-th node in the first level is different from that of the (s - 1)-th node, then the display distance value corresponding to the (s - 1)-th node in the first level, the width of the data area of the (s - 1)-th node in the first level, and the sixth preset interval value are accumulated to obtain the display distance value corresponding to the s-th node in the first level.

[0144] Optionally, the width of the data card of the nodes at the first level may be the same as the width of the data cards of the nodes at other levels except the first level (i.e., the first preset width), or may be different from the width of the data cards of the nodes at other levels except the first level. For example: the width of the data card of the nodes at the first level may be set to a second preset width, and the second preset width may be less than the first preset width.

[0145] For example: s is 3, the width of the data card of the nodes at the first level is the first preset width, the first preset width is 12, and the attribution information of the nodes is displayed on the data cards of the nodes. Figure 10 To determine the schematic diagram of the data area of each node in the first level. Refer to Figure 10 , Figure 10 which includes the first node area 1001, the data areas 1002 of the first two nodes in the first level, and the data area 1003 of the third node in the first level. The second node and the third node in the first level do not have the same attribution information. The display distance value corresponding to the second node in the first level is 35, and the sixth preset interval value is 20. Then, the display distance value 35 corresponding to the second node in the first level, the width 12 of the data area of the second node in the first level, and the sixth preset interval value 20 are accumulated, and the display distance value corresponding to the third node in the first level is obtained as 67. Then, it can be determined that the data area with a width of 12 and a distance of 67 from the target boundary of the first node area 1001 is the data area 1003 of the third node in the first level.

[0146] In some other embodiments, in the first node area among the n node areas, not only the data cards of each node in the first level can be displayed, but also the first button and the second button for adding nodes can be displayed.

[0147] The first button is used to add nodes with different attribution information. The width of the first button is the third preset width, and the first button can be displayed above the data areas of all nodes in the first node area. The second button is used to add nodes with the same attribution information. The width of the second button is the fourth preset width, and the second button can be displayed below the data areas of the nodes with the same attribution information in the first node area. The third preset width and the fourth preset width can both be preset, and the third preset width and the fourth preset width can be set by the technician according to the width of the mind map page.

[0148] In this case, the operation in step (4) can be as follows: for the first node in the first level, accumulate the fourth preset interval value, the third preset width, the seventh preset interval value, and the fifth preset width to obtain the display distance value corresponding to the first node in the first level, and determine the data area that is at a distance equal to the display distance value corresponding to the first node in the first level from the target boundary of the first node area as the data area of the first node in the first level.

[0149] For the s-th node in the first level, in the case where the s-th node and the (s - 1)-th node in the first level have the same attribution information, accumulate the display distance value corresponding to the (s - 1)-th node in the first level, the width of the data area of the (s - 1)-th node in the first level, and the fifth preset interval value to obtain the display distance value corresponding to the s-th node in the first level; or, in the case where the s-th node and the (s - 1)-th node in the first level have different attribution information, accumulate the display distance value corresponding to the (s - 1)-th node in the first level, the width of the data area of the (s - 1)-th node in the first level, the eighth preset interval value, the fourth preset width, the ninth preset interval value, and the fifth preset width to obtain the display distance value corresponding to the s-th node in the first level. Determine the data area that is at a distance equal to the display distance value corresponding to the s-th node in the first level from the target boundary of the first node area as the data area of the s-th node in the first level, where s is an integer greater than or equal to 2.

[0150] In this case, the attribution information of each node is displayed separately, and the fifth preset width is the width of the data card generated for displaying the attribution information.

[0151] The seventh preset interval value is the interval value between the first button and the data card of the first attribution information in the first level. The seventh preset interval value can be set in advance, and the seventh preset interval value can be set by the technical personnel according to the width of the first node area.

[0152] The eighth preset interval value is the interval value between the second button and the data area of the (s - 1)-th node in the first level. The eighth preset interval value can be set in advance, and the eighth preset interval value can be set by the technical personnel according to the width of the first node area.

[0153] The ninth preset interval value is the interval value between the second button and the data card of the next attribution information. The ninth preset interval value can be set in advance, and the ninth preset interval value can be set by the technical personnel according to the width of the first node area.

[0154] For example, s is 2. The width of the data card of the node in the first layer is the second preset width, and the second preset width is 15. The width of the data card of the attribution information of the node in the first layer is the fifth preset width, and the fifth preset width is 15. Figure 11 To determine the schematic diagram of the data area of each node in the first layer. Refer to Figure 11 , Figure 11 which includes the first node area 1101, the first button 1102, the data card 1103 of the attribution information, the data area 1104 of the first node in the first layer, the second button 1105, and the data area 1106 of the second node in the first layer. The interval value between the first button 1102 and the target boundary of the first node area 1101 is the fourth preset interval value, the width of the first button 1102 is the third preset width, and the interval value between the first button 1102 and the first data card 1103 of the attribution information is the seventh preset interval value. Therefore, the display distance value corresponding to the first node in the first layer is obtained by adding the fourth preset interval value, the third preset width, the seventh preset interval value, and the fifth preset width. Assume that the display distance value corresponding to the first node in the first layer is 40, and the width of the second button 1105 (i.e., the fourth preset width) is 10. The interval value between the second button 1105 and the data area 1104 of the first node in the first layer is the eighth preset interval value. Assume that the eighth preset interval value is 5, and the interval value between the second button 1105 and the second data card 1103 of the attribution information in the first layer is the ninth preset interval value. Assume that the ninth preset interval value is 20. Then, the display distance value corresponding to the second node in the first layer is the sum of the display distance value corresponding to the first node in the first layer (40), the width of the data area of the first node in the first layer (15), the eighth preset interval value (5), the fourth preset width (10), the ninth preset interval value (20), and the fifth preset width (15), resulting in a display distance value of 105 corresponding to the second node in the first layer. Then, it can be determined that the data area with a width of 15 and a distance of 105 from the target boundary of the first node area is the data area 1106 of the second node in the first layer.

[0155] It should be noted that after the terminal determines the data areas of each node in the n node areas, it can record the display distance values corresponding to each node (i.e., the distance values between the data areas of each node and the target boundaries of the corresponding node areas) and the display widths corresponding to each node (i.e., the widths of the data areas of each node) for subsequent use.

[0156] (5) The terminal displays the data card of each node in the data area of each node in the n layers.

[0157] Optionally, the way for the terminal to display the data card of each node in the data area of each node in the n levels may be centered display, top display, bottom display, etc., and the embodiments of the present application do not limit this.

[0158] Step 104: The terminal draws connection lines between the data cards of the respective nodes displayed in the mind map page according to the parent-child relationship between the nodes in the n levels.

[0159] Optionally, the terminal may pass through <svg>The label draws the connecting lines between the data cards of each node displayed on this mind map page, through <svg>The connection lines drawn by the label are scalable vector graphics, and the quality of such graphics will not be lost when enlarged or resized. In this way, the mind map on the mind map page can be clearly displayed at any resolution.

[0160] Specifically, the operation in step 104 can be: for any two nodes with a parent-child relationship among the n-level nodes, determine the connection line endpoints corresponding to each of the two nodes according to the data areas where the data cards of the two nodes are located in the mind map page; draw the connection line between the data cards of the two nodes according to the connection line endpoints corresponding to each of the two nodes.

[0161] In this case, the terminal only needs to determine the connection line endpoints corresponding to each of the two nodes, and then connect the two connection line endpoints to draw the connection line between the data cards of the two nodes, making the process of drawing the connection line relatively simple and saving computing resources at the same time.

[0162] For example: Figure 12 is a schematic diagram of the connection line between the data cards of two nodes. See Figure 12 , Figure 12 includes the second node area 1201, the third node area 1202, the data card 1203 displayed in the second node area, the two data cards 1204 displayed in the third node area, the connection line 1205 between the data card 1203 displayed in the second node area and the first data card 1204 displayed in the third node area, and the connection line 1206 between the data card 1203 displayed in the second node area and the second data card 1204 displayed in the third node area.

[0163] Among them, the operation of the terminal to determine the connection line endpoints corresponding to each of the two nodes according to the data areas where the data cards of the two nodes are located in the mind map page can be: for any one of the two nodes, add the value obtained by multiplying the width of the data area where the data card of this node is located in the mind map page by t to the display distance value corresponding to this node to obtain the target distance value; determine a position point in the data area where the data card of this node is located that is at a target distance from the target boundary of the node area where the data card of this node is located as the connection line endpoint corresponding to this node.

[0164] t can be set in advance. The terminal can determine the value of t according to the display position of the data card of this node in the data area of this node, and t is greater than 0 and less than 1. For example: if the data card of this node is centered in the data area of this node, the value of t is 0.5.

[0165] Since the target distance value is obtained by adding the value obtained by multiplying the width of the data area where the data card of this node is located by t to the display distance value corresponding to this node, the connection line endpoint corresponding to this node determined according to the target distance value is located at the position where the data card of this node is located, so that the data relationship in the mind map drawn subsequently based on the connection line endpoint corresponding to this node is relatively clear.

[0166] For example: Figure 13 The schematic diagram for determining the connection line endpoints corresponding to each of the two nodes. Refer to Figure 13 , Figure 13 which includes the second node area 1301, the third node area 1302, a data card 1303 of a node displayed in the second node area 1301, a data card 1304 of a node displayed in the third node area 1302, a connection line endpoint 1305 corresponding to one of the two nodes (the parent node), and a connection line endpoint 1306 corresponding to the other node (the child node) of the two nodes. The two nodes have a parent-child relationship. The data cards of the two nodes are both centered in the data area, so t can be set to 0.5.

[0167] The width of the data area where the data card 1303 of the parent node displayed in the second node area 1301 is 34, the width of the data area where the data card 1304 of the child node displayed in the third node area 1302 is 12, the display distance value corresponding to the parent node is 25, and the display distance value corresponding to the child node is 25. Then, adding 25 times the display distance value corresponding to the parent node to 0.5 times the width 34 of the data area where the data card 1303 of the parent node is located, the target distance value can be obtained as 42. Then, a position point 42 away from the target boundary of the second node area 1301 in the data area where the data card 1303 of the parent node is located is used as the connection line endpoint 1305 corresponding to the parent node. Adding 25 times the display distance value corresponding to the child node to 0.5 times the width 12 of the data area where the data card 1304 of the child node is located, the target distance value can be obtained as 31. Then, a position point 31 away from the target boundary of the third node area 1302 in the data area where the data card 1304 of the child node is located is used as the connection line endpoint 1306 corresponding to the child node.

[0168] Among them, the operation of the terminal to draw the connection line between the data cards of the two nodes according to the connection line endpoints corresponding to each of the two nodes can be realized in the following two cases.

[0169] In the first case, if the parent node of these two nodes is a node at the i-th level, determine the first reference line in the interval area between the i-th node area and the (i + 1)-th node area; determine the first position point in the first reference line that is at a first distance value from the straight line where the target boundary of the i-th node area is located; determine the second position point in the first reference line that is at a second distance value from the straight line where the target boundary of the (i + 1)-th node area is located; successively draw the lines between the connection line endpoints corresponding to the parent node of these two nodes, the first position point, the second position point, and the connection line endpoints corresponding to the child nodes of these two nodes to obtain the connection line between the data cards of these two nodes.

[0170] The first reference line is used as a reference object to determine the first position point and the second position point therefrom. The first reference line is perpendicular to the straight lines where the target boundaries of the i-th node area and the (i + 1)-th node area are located. The target boundaries of the i-th node area and the (i + 1)-th node area are on the same straight line.

[0171] The first distance value is the distance value between the connection line endpoint corresponding to the parent node of these two nodes and the target boundary of the i-th node area. The second distance value is the distance value between the connection line endpoint corresponding to the child node of these two nodes and the target boundary of the (i + 1)-th node area.

[0172] For example: the parent node of these two nodes is a node at the 2nd level, and the child node of these two nodes is a node at the 3rd level. As Figure 14 shown, Figure 14 is a schematic diagram for drawing the connection line between the data cards of two nodes, Figure 14 It includes the second node area 1401, the third node area 1402, the first reference line 1403, the first position point 1404, the second position point 1405, the data card 1406 displayed in the second node area 1401, the data card 1407 displayed in the third node area 1402, the connection line endpoints 1408 corresponding to the parent node in these two nodes, and the connection line endpoints 1409 corresponding to the child node in these two nodes. Among them, both the first position point 1404 and the second position point 1405 are located on the first reference line 1403. The distance between the first position point 1404 and the straight line where the target boundary of the second node area 1401 is located is equal to the distance between the connection line endpoint 1408 corresponding to the parent node and the target boundary of the second node area 1401, and the distance between the second position point 1405 and the straight line where the target boundary of the third node area 1402 is located is equal to the distance between the connection line endpoint 1409 corresponding to the child node and the target boundary of the third node area 1402. Then, connect the connection line endpoint 1408 corresponding to the parent node with the first position point 1404, connect the first position point 1404 with the second position point 1405, and connect the second position point 1405 with the connection line endpoint 1409 corresponding to the child node, so as to obtain the connection line between the data card 1406 of the parent node and the data card 1407 of the child node.

[0173] It should be noted that if there is only one node in the first layer, the connection line between the data card of the node in the first layer and the data card of the node in the second layer can be drawn according to the steps in the first case. If there are multiple nodes in the first layer, the connection line between the data card of the node in the first layer and the data card of the node in the second layer is drawn according to the steps in the following second case.

[0174] In the second case, if the parent node among the two nodes is a node at the first level, and there are multiple nodes at the first level, a second reference line and a third reference line are determined in the interval area between the first node area and the second node area among the n node areas; a third position point that is at a third distance value from the straight line where the target boundary of the first node area is located is determined in the second reference line; a fourth position point that is at a fourth distance value from the straight line where the target boundary of the second node area is located is determined in the third reference line; the sum of the widths of the data areas of the multiple nodes at the first level is added to the sum of the interval values between the data areas of all adjacent two nodes among the multiple nodes at the first level to obtain a target value; the value obtained by dividing the target value by 2 is added to the display distance value corresponding to the first node at the first level to obtain a fifth distance value; a fifth position point that is at a fifth distance value from the straight line where the target boundary of the first node area is located is determined in the second reference line, and a sixth position point that is at a fifth distance value from the straight line where the target boundary of the second node area is located is determined in the third reference line; the lines between the connection line endpoints corresponding to the parent node of the two nodes, the third position point, the fifth position point, the sixth position point, the fourth position point, and the connection line endpoints corresponding to the child node of the two nodes are sequentially drawn to obtain the connection line between the data cards of the two nodes.

[0175] The second reference line is used as a reference object to determine the third position point and the fifth position point therefrom. The third reference line is used as a reference object to determine the fourth position point and the sixth position point therefrom. Both the second reference line and the third reference line are perpendicular to the straight line where the target boundary of the first node area and the target boundary of the second node area are located, and the target boundary of the first node area and the target boundary of the second node area are on the same straight line. The second reference line is located between the first node area and the third reference line.

[0176] The third distance value is the distance value between the connection line endpoint corresponding to the parent node of the two nodes and the target boundary of the first node area. The fourth distance value is the distance value between the connection line endpoint corresponding to the child node of the two nodes and the target boundary of the second node area.

[0177] Since the fifth distance value is obtained by adding the display distance value corresponding to the first node at the first level to 0.5 times the target value, and the target value is obtained by adding the sum of the widths of the data areas of the multiple nodes at the first level to the sum of the interval values between the data areas of all adjacent two nodes among the multiple nodes at the first level, the fifth position point and the sixth position point determined according to the fifth distance value are in the middle part of the overall subordinate range of the data areas of all the nodes displayed in the first node area. In this way, the data relationship in the drawn mind map can be made clearer and more beautiful.

[0178] For example, as Figure 15 shown, Figure 15 FIG. Figure 15 is a schematic diagram of connecting lines between data cards of two nodes. Figure 15 It includes: the first node area 1501, the second node area 1502, the second reference line 1503, the third reference line 1504, the third position point 1505, the fourth position point 1506, the fifth position point 1507, the sixth position point 1508, the data card 1509 of the parent node shown in the first node area 1501, the data card 1510 of the child node shown in the second node area 1502, the connection line end point 1511 corresponding to the parent node, and the connection line end point 1512 corresponding to the child node. Among them, the third position point 1505 and the fifth position point 1507 are located on the second reference line 1503, and the fourth position point 1506 and the sixth position point 1508 are located on the third reference line 1504. The distance between the third position point 1505 and the straight line where the target boundary of the first node area 1501 is located is equal to the distance between the connection line end point 1511 corresponding to the parent node and the target boundary of the first node area 1501. The distance between the fourth position point 1506 and the straight line where the target boundary of the second node area 1502 is located is equal to the distance between the connection line end point 1512 corresponding to the child node and the target boundary of the first node area 1501. The distance between the fifth position point 1507 and the straight line where the target boundary of the first node area 1501 is located is equal to the distance between the sixth position point 1508 and the straight line where the target boundary of the second node area 1502 is located. Then, connect the connection line end point 1511 corresponding to the parent node and the third position point 1505, connect the third position point 1505 and the fifth position point 1507, connect the fifth position point 1507 and the sixth position point 1508, connect the sixth position point 1508 and the fourth position point 1506, and connect the fourth position point 1506 and the connection line end point 1512 corresponding to the child node, so as to obtain the connection line between the data card 1509 of the parent node and the data card 1510 of the child node.

[0179] It should be noted that the connection lines between the data cards of these two nodes drawn in the above two cases will be relatively neat and beautiful, making the data flow in the mind map page clearer.

[0180] The terminal can draw the mind map of the target data in the mind map page through the above steps 101 - 104. In this case, the terminal can also trace back to the node to which any data card shown in the mind map page belongs.

[0181] Specifically, if the terminal detects a selection operation on any one of the data cards in the mind map page, it determines all the nodes associated with the node to which this data card belongs from the n-level nodes; highlights the data cards of all the nodes associated with the node to which this data card belongs; and highlights the connection lines between the data cards of all the nodes associated with the node to which this data card belongs.

[0182] The selection operation is used to indicate that this data card is selected, and then it is necessary to trace the node to which this data card belongs. This selection operation can be triggered by the user. For example, the user can trigger the selection operation of this data card by clicking on this data card.

[0183] Since the data cards in the embodiments of the present application are all triggerable, the terminal can directly detect the selection operation on any one of the data cards, and then can determine which node the node to which this data card belongs is, so as to more quickly trace the node to which this data card belongs, making the tracing operation of the node to which any one of the data cards belongs more convenient and fast.

[0184] When the terminal traces the node to which this data card belongs, it can highlight the data cards of all the nodes associated with the node to which this data card belongs, as well as the connection lines between the data cards of all the nodes associated with the node to which this data card belongs, so that the user can timely know all the nodes associated with the node to which this data card belongs and the relationships between these nodes.

[0185] In a possible way, the way for the terminal to highlight the connection lines between the data cards of all the nodes associated with the node to which this data card belongs is: set the color value of the stroke (outline) attribute of the connection lines between the data cards of all the nodes associated with the node to which this data card belongs to a value different from the original color value (i.e., the default color value).

[0186] In another possible way, the operation for the terminal to highlight the connection lines between the data cards of all the nodes associated with the node to which this data card belongs can be: the terminal redraws the connection lines between the data cards of all the nodes associated with the node to which this data card belongs according to the parent-child relationships between all the nodes associated with the node to which this data card belongs, and highlights the redrawn connection lines.

[0187] Since using <svg>When drawing the connection line between two data cards, the latter drawn line always covers the overlapping part of the previous line. In this case, if the latter drawn line overlaps with the previous line, even if the previous line is highlighted, it cannot be shown on this mind map page. Therefore, it is necessary to redraw the connection lines between all the data cards of the nodes associated with the node to which this data card belongs, and highlight the redrawn connection lines.

[0188] Among them, when the terminal highlights the redrawn connection line, the color value of the stroke attribute of the redrawn connection line can be set to a value different from the original color value (i.e., the default color value).

[0189] Optionally, when the terminal detects the deselection operation of this data card, it cancels the highlighting of all the data cards of the nodes associated with the node to which this data card belongs, and cancels the highlighting of the connection lines between all the data cards of the nodes associated with the node to which this data card belongs.

[0190] The deselection operation can be triggered by the user. For example, the user can trigger the deselection operation of this data card by clicking on another data card, or the user can trigger the deselection operation of this data card by clicking on the blank area in this mind map page.

[0191] Optionally, the way for the terminal to cancel the highlighting of the connection lines between all the data cards of the nodes associated with the node to which this data card belongs is: set the color value of the stroke attribute of the connection lines between all the data cards of the nodes associated with the node to which this data card belongs to the default color value.

[0192] As an example, if the user wants to know the source of the node to which a data card belongs, the user moves the mouse and clicks on this data card to trigger the selection operation of this data card. In response to this selection operation, the terminal highlights all the data cards of the nodes associated with the node to which this data card belongs, and highlights the connection lines between all the data cards of the nodes associated with the node to which this data card belongs. At this time, the user can know the source of the node to which this data card belongs according to the highlighted content. After that, if the user does not want to view the source of the node to which this data card belongs anymore, the user can move the mouse to the blank area and click on the blank area to trigger the deselection operation of this data card. In response to this deselection operation, the terminal cancels the highlighting of all the data cards of the nodes associated with the node to which this data card belongs, and cancels the highlighting of the connection lines between all the data cards of the nodes associated with the node to which this data card belongs.

[0193] Further, the terminal can also delete the node to which any one of the data cards displayed in the mind map page belongs.

[0194] Specifically, if the terminal detects a deletion instruction for any one of the data cards in the mind map page, it deletes the node to which this data card belongs in the target data, and then re-executes the above steps 102-step 104.

[0195] The deletion instruction is used to indicate the deletion of the node to which a data card in the target data belongs. The deletion instruction can be triggered by the user. The user can trigger it through operations such as click operation, swipe operation, voice operation, gesture operation, and somatosensory operation. The embodiments of the present application do not limit this.

[0196] As an example, if the user moves the mouse and clicks the delete button in any one of the data cards displayed in the mind map page, the terminal displays a delete confirmation window. The user moves the mouse and clicks the confirmation option in the delete confirmation window to trigger the deletion instruction. In response to the deletion instruction, the terminal deletes the node to which this data card belongs in the target data, realizes the update of the target data, and then re-executes the above steps 102-step 104 to draw the mind map of the updated target data.

[0197] Further, the terminal can also modify the data elements of the node to which any one of the data cards displayed in the mind map page belongs.

[0198] Specifically, if the terminal detects a modification instruction for any one of the data cards in the mind map page, it modifies the data elements of the node to which this data card belongs in the target data to the data elements carried by the modification instruction, and then re-executes the above steps 102-step 104.

[0199] The modification instruction is used to indicate the modification of the data elements of the node to which a data card in the target data belongs. The modification instruction can be triggered by the user. The user can trigger it through operations such as click operation, swipe operation, voice operation, gesture operation, and somatosensory operation. The embodiments of the present application do not limit this.

[0200] As an example, if the user moves the mouse and clicks the modification button in any one of the data cards displayed in the mind map page, the terminal displays a modification confirmation window. The user enters the data elements to be modified in the modification confirmation window and clicks the confirmation option to trigger the modification instruction. In response to the modification instruction, the terminal modifies the data elements of the node to which this data card belongs in the target data to the data elements carried by the modification instruction, realizes the update of the target data, and then re-executes the above steps 102-step 104 to draw the mind map of the updated target data.

[0201] Further, the terminal can also add a new node to the node to which any one of the data cards displayed in the mind map page belongs.

[0202] Specifically, if the terminal detects a node addition instruction in the mind map page, a new node is added to the target data according to the node information carried in the node addition instruction, and the above steps 102-104 are re-executed to draw the mind map of the updated target data.

[0203] The addition instruction is used to indicate adding a new node to the target data. The addition instruction can be triggered by the user. The user can trigger it through operations such as click operation, swipe operation, voice operation, gesture operation, and somatosensory operation. The embodiments of the present application do not limit this.

[0204] As an example, if the user moves the mouse and clicks the add button in a data card displayed in the mind map page, the terminal displays an add confirmation window. The user can enter the node information to be added in the add confirmation window and click the confirmation option to trigger the node addition instruction. In response to the node addition instruction, the terminal adds a new node to the target data according to the node information, realizes the update of the target data, and then re-executes the above steps 102-104 to draw the mind map of the updated target data.

[0205] Optionally, technicians can also add buttons with some other functions to the data card to realize other interaction functions for each node.

[0206] It should be noted that the mind map drawing method provided by the embodiments of the present application is based on data cards for interaction, can realize the traceability operation of the nodes to which each data card belongs, and the interaction is relatively fast and friendly. Moreover, for technicians, the technologies used are all basic front-end technologies, so the learning cost is low. In addition, due to the scalable characteristics of svg, the drawn mind map can be clearly displayed at any resolution.

[0207] For ease of understanding, the following takes a data processing project jointly cooperated by Company A as the initiator and Company B as the participant as an example, combined with Figure 16 to illustrate the above mind map drawing method.

[0208] See Figure 16 , the method includes the following steps 1601-1608.

[0209] Step 1601: The terminal obtains target data.

[0210] Exemplarily, the target data obtained by the terminal can be as shown in Table 2 below:

[0211] Table 2

[0212]

[0213]

[0214] As shown in Table 2 above, the target data has four levels. This data processing project was initiated by Company A and participated in by Company B. Both Company A and Company B participated in each link of this data processing project. This data processing project includes Data Preprocessing 1 and Data Preprocessing 2. Among them, Data Preprocessing 1 includes Feature Engineering 1 and Feature Engineering 2. That is to say, to complete the work of this link of Data Preprocessing 1, it needs to be achieved through Feature Engineering 1 and Feature Engineering 2. Data Preprocessing 2 includes Feature Engineering 3, Feature Engineering 4, and Feature Engineering 5. That is to say, to complete the work of this link of Data Preprocessing 2, it needs to be achieved through Feature Engineering 3, Feature Engineering 4, and Feature Engineering 5. Feature Engineering 1 includes Security Modeling 1. That is to say, to complete the work of this link of Feature Engineering 1, it needs to be achieved through Security Modeling 1. And so on, Feature Engineering 5 includes Security Modeling 5. To complete the work of this link of Feature Engineering 5, it needs to be achieved through Security Modeling 5.

[0215] Step 1602: The terminal generates data cards for each node among these four levels of nodes. The data cards include controls for displaying and editing the data elements of the nodes.

[0216] Step 1603: The terminal determines four node areas in the mind map page that correspond one-to-one to these four levels.

[0217] Step 1604: The terminal determines the data areas of each node in the fourth level in the fourth node area among these four node areas according to the sorting relationship among the nodes in the third level among these four levels.

[0218] Step 1605: The terminal determines the data areas of each node in the i-th level among these four levels in the i-th node area among these four node areas according to the data areas of each node in the (i + 1)-th level among these four levels.

[0219] For the data areas of each node in the third level among these four levels, according to the data areas of each node in the fourth level among these four levels, the data areas of each node in the third level among these four levels are determined in the third node area among these four node areas.

[0220] For the data areas of each node in the second level among these four levels, according to the data areas of each node in the third level among these four levels, the data areas of each node in the second level among these four levels are determined in the second node area among these four node areas.

[0221] Step 1606: The terminal determines the data areas of each node in the first layer within the first node area among these 4 node areas.

[0222] Step 1607: The terminal displays the data cards of each node in the data areas of each node among these 4 layers.

[0223] Step 1608: The terminal draws the connection lines between the data cards of each node displayed in this mind map page according to the parent-child relationships between the nodes of these 4 layers.

[0224] After the connection lines between the data cards of each node displayed in this mind map page are drawn, the mind map of the target data is obtained, that is, the mind map drawing is completed.

[0225] As Figure 17 shown, Figure 17 it is a schematic diagram of the mind map of the target data. Figure 17 It includes 4 node areas 1701, the data cards of each node in the target data 1702, and the connection lines 1703 between the data cards of each node displayed in this mind map page. The 4 node areas 1701 are used to display the data cards of the nodes, the data cards of each node in the target data 1702 are used to display the data elements of each node, and the connection lines 1703 between the data cards of each node displayed in this mind map page are used to represent the data flow directions between each node.

[0226] In the embodiment of the present application, the terminal obtains target data, and the target data includes nodes of n layers. Then, data cards of each node among these n layers of nodes are generated. Then, according to the sorting relationships between the nodes of these n layers, the data cards of each node among these n layers of nodes are displayed in the mind map page, and then, according to the parent-child relationships between the nodes of these n layers, the connection lines between the data cards of each node displayed in this mind map page are drawn. Since each data card is a control for displaying and editing the data elements of the corresponding node, each data card can be triggered specifically. That is, when the user clicks any data card, the terminal can directly know which data card is clicked, so as to know that the corresponding interaction operation is to be performed on the node to which this data card belongs. In this way, the interaction is relatively friendly. And for technicians, the technologies used in mind map drawing are all basic front-end technologies, without the need to learn other frameworks, thus making the implementation simple.

[0227] Figure 18 It is a schematic structural diagram of a mind map drawing device provided by an embodiment of the present application. This mind map drawing device can be implemented as part or all of a computer device by software, hardware, or a combination of both. This computer device can be the computer device as shown in Figure 19 below. See Figure 18 , the device includes: an acquisition module 1801, a generation module 1802, a first display module 1803, and a drawing module 1804.

[0228] The acquisition module 1801 is configured to acquire target data, where the target data includes nodes at n levels, and the order of the nodes from the 1st level to the nth level among the n levels is the order from the root node to the leaf node, and n is an integer greater than or equal to 2;

[0229] The generation module 1802 is configured to generate a data card for each node among the n levels of nodes, and the data card includes a control for displaying and editing data elements of the node;

[0230] The first display module 1803 is configured to display the data card of each node among the n levels of nodes on the mind map page according to the sorting relationship between the n levels of nodes;

[0231] The drawing module 1804 is configured to draw a connection line between the data cards of the respective nodes displayed on the mind map page according to the parent-child relationship between the n levels of nodes.

[0232] Optionally, the device further includes:

[0233] A determination module, configured to, if a selection operation on any one of the data cards is detected on the mind map page, determine all the nodes associated with the node to which a data card belongs among the n levels of nodes;

[0234] A second display module, configured to prominently display the data cards of all the nodes associated with the node to which a data card belongs;

[0235] A third display module, configured to prominently display the connection lines between the data cards of all the nodes associated with the node to which a data card belongs.

[0236] Optionally, the device further includes:

[0237] A deletion module, configured to, if a deletion instruction for any one of the data cards is detected on the mind map page, delete the node to which a data card belongs from the target data, and trigger the generation module 1802 to generate a data card for each node among the n levels of nodes.

[0238] Optionally, the device further includes:

[0239] A modification module, configured to, if a modification instruction for any one of the data cards is detected on the mind map page, modify the data elements of the node to which a data card belongs in the target data to the data elements carried by the modification instruction, and trigger the generation module 1802 to generate a data card for each node among the n levels of nodes.

[0240] Optionally, the apparatus further includes:

[0241] An adding module, configured to add a new node to the target data according to the node information carried in the node adding instruction if a node adding instruction is detected on the mind map page, and trigger the generating module 1802 to generate data cards for each node in the n-level nodes.

[0242] In the embodiment of the present application, the target data is obtained, and the target data includes n-level nodes. Then, data cards for each node in the n-level nodes are generated. Then, according to the sorting relationship between the n-level nodes, the data cards for each node in the n-level nodes are displayed on the mind map page, and then, according to the parent-child relationship between the n-level nodes, connection lines between the data cards of the respective nodes displayed on the mind map page are drawn. Since each data card of a node is a control for displaying and editing the data elements of the corresponding node, each data card can be triggered specifically, that is, when the user clicks any one of the data cards, the apparatus can directly know which data card is clicked, so as to know that corresponding interaction operations are to be performed on the node to which this data card belongs. In this way, the interaction is relatively friendly. Moreover, for technicians, the technologies used in mind map drawing are all basic front-end technologies, and there is no need to learn other frameworks, thus making the implementation simple.

[0243] It should be noted that: when the mind map drawing apparatus provided in the above embodiment draws a mind map, only the division of the above functional modules is used for illustration. In practical applications, the above functions can be allocated to different functional modules according to needs, that is, the internal structure of the apparatus is divided into different functional modules to complete all or part of the functions described above.

[0244] The above functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above integrated unit can be implemented in the form of hardware or in the form of a software functional unit. In addition, the specific names of the functional units and modules are only for the convenience of mutual distinction and do not limit the protection scope of the embodiments of the present application.

[0245] The mind map drawing apparatus provided in the above embodiment and the embodiment of the mind map drawing method belong to the same concept. For the specific working processes and the technical effects brought by the units and modules in the above embodiments, reference can be made to the method embodiment part, which will not be elaborated here.

[0246] Figure 19 This is a schematic structural diagram of a computer device provided in an embodiment of the present application. As Figure 19 As shown, the computer device 19 includes: a processor 190, a memory 191, and a computer program 192 stored in the memory 191 and executable on the processor 190. When the processor 190 executes the computer program 192, the steps in the mind map drawing method in the above embodiments are implemented.

[0247] The computer device 19 can be a general-purpose computer device or a special-purpose computer device. In specific implementations, the computer device 19 can be a desktop computer, a portable computer, a handheld computer, a mobile phone, a tablet computer, etc. The embodiments of the present application do not limit the type of the computer device 19. Those skilled in the art can understand that Figure 19 merely examples of the computer device 19, which do not constitute a limitation on the computer device 19, may include more or fewer components than shown in the figure, or combine certain components, or different components. For example, it may also include input / output devices, network access devices, etc.

[0248] The processor 190 can be a central processing unit (CPU), and the processor 190 can also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor.

[0249] In some embodiments, the memory 191 can be an internal storage unit of the computer device 19, such as the hard disk or memory of the computer device 19. In other embodiments, the memory 191 can also be an external storage device of the computer device 19, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the computer device 19. Further, the memory 191 can also include both the internal storage unit and the external storage device of the computer device 19. The memory 191 is used to store an operating system, application programs, a boot loader, data, and other programs, etc. The memory 191 can also be used to temporarily store data that has been output or will be output.

[0250] An embodiment of the present application further provides a computer device, which includes: at least one processor, a memory, and a computer program stored in the memory and executable on the at least one processor. When the processor executes the computer program, the steps in any of the above method embodiments are implemented.

[0251] An embodiment of the present application further provides a computer-readable storage medium storing a computer program, which when executed by a processor can implement the steps in each of the above method embodiments.

[0252] An embodiment of the present application provides a computer program product, which when running on a computer causes the computer to execute the steps in each of the above method embodiments.

[0253] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, to implement all or part of the processes in the above method embodiments of the present application, a computer program can be used to instruct the relevant hardware to complete. The computer program can be stored in a computer-readable storage medium. When the computer program is executed by a processor, the steps in each of the above method embodiments can be implemented. Among them, the computer program includes computer program code, which can be in the form of source code, object code, executable file, or some intermediate form, etc. The computer-readable medium can at least include: any entity or device capable of carrying the computer program code to the photographing device / terminal device, recording medium, computer memory, ROM (Read-Only Memory), RAM (Random Access Memory), CD-ROM (Compact Disc Read-Only Memory), magnetic tape, floppy disk, and optical data storage device, etc. The computer-readable storage medium mentioned in the present application can be a non-volatile storage medium, in other words, a non-transitory storage medium.

[0254] It should be understood that all or part of the steps to implement the above embodiments can be achieved by software, hardware, firmware, or any combination thereof. When implemented using software, it can be fully or partially implemented in the form of a computer program product. The computer program product includes one or more computer instructions. The computer instructions can be stored in the above computer-readable storage medium.

[0255] In the above embodiments, the descriptions of each embodiment have their own emphases. For the parts not detailed or recorded in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0256] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professionals can use different methods for each specific application to implement the described functions, but such implementation should not be considered to exceed the scope of this application.

[0257] The above embodiments are only used to illustrate the technical solutions of this application, rather than to limit them; although this application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included in the protection scope of this application.< / svg> < / svg> < / svg>

Claims

1. A method for drawing a mind map, characterized in that, The method includes: Obtaining target data, where the target data includes nodes at n levels, and the order of nodes from the 1st level to the nth level among the n levels is the order from the root node to the leaf node, and n is an integer greater than or equal to 2; Generating a data card for each node among the nodes at the n levels, where the data card includes a control for displaying and editing data elements of the node; Displaying the data cards of each node among the nodes at the n levels on a mind map page according to the sorting relationship among the nodes at the n levels; Drawing connection lines between the data cards of the respective nodes displayed on the mind map page according to the parent-child relationship among the nodes at the n levels; Among them, the step of displaying the data cards of each node among the nodes at the n levels on the mind map page according to the sorting relationship among the nodes at the n levels includes: Determining n node areas corresponding one by one to the n levels in the mind map page; Determining the data area of each node at the nth level in the nth node area according to the sorting relationship among the nodes at the (n - 1)th level among the n levels; Determining the data area of each node at the ith level among the n levels in the ith node area among the n node areas according to the data area of each node at the (i + 1)th level among the n levels, where i is an integer greater than or equal to 2 and less than or equal to n - 1; Determining the data area of each node at the 1st level in the 1st node area among the n node areas; Displaying the data cards of each node in the data areas of each node among the n levels.

2. The method according to claim 1, wherein, The step of determining the data area of each node at the nth level in the nth node area according to the sorting relationship among the nodes at the (n - 1)th level among the n levels includes: For the first node at the nth level, determining the display distance value corresponding to the first node at the nth level according to the sorting position of the parent node of the first node at the nth level among the nodes at the (n - 1)th level, and determining the data area that is at a distance corresponding to the display distance value of the first node at the nth level from the target boundary of the nth node area as the data area of the first node at the nth level; For the first target node at the nth level, where the first target node is any node other than the first node at the nth level, and the second target node is the previous node adjacent to the first target node at the nth level, determining the display distance value corresponding to the first target node according to the sorting position difference between the parent node of the first target node and the parent node of the second target node and the display distance value corresponding to the second target node, and determining the data area that is at a distance corresponding to the display distance value of the first target node from the target boundary of the nth node area as the data area of the first target node.

3. The method according to claim 2, wherein The width of the data card is the first preset width; determining the display distance value corresponding to the first node in the nth layer according to the sorting position of the parent node of the first node in the nth layer among the nodes in the (n - 1)th layer includes: If the parent node of the first node in the nth layer is the jth node in the (n - 1)th layer, then accumulate the first preset interval value, (j - 1) times the second preset interval value, and (j - 1) times the first preset width to obtain the display distance value corresponding to the first node in the nth layer, where j is a positive integer; or, If the parent node of the first node in the nth layer is the jth node in the (n - 1)th layer, then when the parent nodes of the first j nodes in the (n - 1)th layer are the same node, accumulate the first preset interval value, (j - 1) times the second preset interval value, and (j - 1) times the first preset width to obtain the display distance value corresponding to the first node in the nth layer; when the parent nodes of the first j nodes in the (n - 1)th layer are m different nodes, accumulate the first preset interval value, (j - m) times the second preset interval value, (m - 1) times the third preset interval value, and (j - 1) times the first preset width to obtain the display distance value corresponding to the first node in the nth layer, where m is an integer greater than or equal to 2, and the third preset interval value is greater than the second preset interval value.

4. The method according to claim 2, characterized in that, The width of the data card is the first preset width; determining the display distance value corresponding to the first target node according to the sorting position difference between the parent node of the first target node and the parent node of the second target node and the display distance value corresponding to the second target node includes: If there are k nodes between the parent node of the first target node and the parent node of the second target node, then accumulate the display distance value corresponding to the second target node, (k + 1) times the second preset interval value, and (k + 1) times the first preset width to obtain the display distance value corresponding to the first target node, where k is an integer greater than or equal to 0; or, If there are k nodes between the parent node of the first target node and the parent node of the second target node, then when the grandparent node of the first target node and the grandparent node of the second target node are the same node, accumulate the display distance value corresponding to the second target node, (k + 1) times the second preset interval value, and (k + 1) times the first preset width to obtain the display distance value corresponding to the first target node; when the grandparent node of the first target node and the grandparent node of the second target node are p different nodes, accumulate the display distance value corresponding to the second target node, (k - p + 2) times the second preset interval value, (p - 1) times the third preset interval value, and (k + 1) times the first preset width to obtain the display distance value corresponding to the first target node, where p is an integer greater than or equal to 2, and the third preset interval value is greater than the second preset interval value.

5. The method according to claim 2, wherein Determining the data area of each node in the \(i\)-th level among the \(n\) levels according to the data area of each node in the \((i + 1)\)-th level among the \(n\) levels includes: For the \(j\)-th node in the \(i\)-th level, if the \(j\)-th node in the \(i\)-th level has child nodes, then determine the display distance value corresponding to the \(j\)-th node in the \(i\)-th level as the display distance value corresponding to the first child node of the \(j\)-th node in the \(i\)-th level, where \(j\) is a positive integer; Add the sum of the widths of the data areas of all child nodes of the \(j\)-th node in the \(i\)-th level and the sum of the interval values between the data areas of all adjacent two child nodes of the \(j\)-th node in the \(i\)-th level to obtain the display width corresponding to the \(j\)-th node in the \(i\)-th level; Determine the data area with a width of the display width corresponding to the \(j\)-th node in the \(i\)-th level and a distance from the target boundary of the \(i\)-th node area equal to the display distance value corresponding to the \(j\)-th node in the \(i\)-th level as the data area of the \(j\)-th node in the \(i\)-th level.

6. The method according to claim 2, characterized in that Drawing the connection lines between the data cards of the respective nodes displayed in the mind map page according to the parent-child relationship between the nodes of the \(n\) levels includes: For any two nodes with a parent-child relationship among the nodes of the \(n\) levels, determine the connection line endpoints corresponding to each of the two nodes according to the data areas where the data cards of the two nodes are located in the mind map page; Draw the connection line between the data cards of the two nodes according to the connection line endpoints corresponding to each of the two nodes.

7. The method according to claim 6, characterized in that, Determining the connection line endpoints corresponding to each of the two nodes according to the data areas where the data cards of the two nodes are located in the mind map page includes: For any one of the two nodes, add the value obtained by multiplying the width of the data area where the data card of the one node is located in the mind map page by \(t\) to the display distance value corresponding to the one node to obtain a target distance value, where \(t\gt0\) and \(t\lt1\); Determine a position point in the data area where the data card of the one node is located and at a distance from the target boundary of the node area where the data card of the one node is located equal to the target distance value as the connection line endpoint corresponding to the one node.

8. The method according to claim 6, wherein Drawing the connection line between the data cards of the two nodes according to the connection line endpoints corresponding to each of the two nodes includes: If the parent node of the two nodes is a node in the \(i\)-th level, then determine a first reference line in the interval area between the \(i\)-th node area and the \((i + 1)\)-th node area, and the first reference line is perpendicular to the straight line where the target boundaries of the \(i\)-th node area and the \((i + 1)\)-th node area are located; Determine a first position point in the first reference line that is at a first distance value from the line where the target boundary of the i-th node region is located, where the first distance value is the distance value between the connection line endpoint corresponding to the parent node among the two nodes and the target boundary of the i-th node region; Determine a second position point in the first reference line that is at a second distance value from the line where the target boundary of the (i + 1)-th node region is located, where the second distance value is the distance value between the connection line endpoint corresponding to the child node among the two nodes and the target boundary of the (i + 1)-th node region; Sequentially draw the lines between the connection line endpoint corresponding to the parent node among the two nodes, the first position point, the second position point, and the connection line endpoint corresponding to the child node among the two nodes to obtain the connection line between the data cards of the two nodes.

9. The method according to claim 6, wherein The drawing of the connection line between the data cards of the two nodes according to the connection line endpoints corresponding to each of the two nodes includes: If the parent node among the two nodes is a node at the first level, in the case where there are multiple nodes at the first level, determine a second reference line and a third reference line in the interval region between the first node region and the second node region among the n node regions. Both the second reference line and the third reference line are perpendicular to the line where the target boundaries of the first node region and the second node region are located, and the second reference line is located between the first node region and the third reference line; Determine a third position point in the second reference line that is at a third distance value from the line where the target boundary of the first node region is located, where the third distance value is the distance value between the connection line endpoint corresponding to the parent node among the two nodes and the target boundary of the first node region; Determine a fourth position point in the third reference line that is at a fourth distance value from the line where the target boundary of the second node region is located, where the fourth distance value is the distance value between the connection line endpoint corresponding to the child node among the two nodes and the target boundary of the second node region; Add the sum of the widths of the data areas of the multiple nodes at the first level and the sum of the interval values between the data areas of all adjacent two nodes among the multiple nodes at the first level to obtain a target value; add the value obtained by dividing the target value by 2 to the display distance value corresponding to the first node at the first level to obtain a fifth distance value; Determine a fifth position point in the second reference line that is at a fifth distance value from the line where the target boundary of the first node region is located, and determine a sixth position point in the third reference line that is at a fifth distance value from the line where the target boundary of the second node region is located; Sequentially draw the lines between the connection line endpoint corresponding to the parent node among the two nodes, the third position point, the fifth position point, the sixth position point, the fourth position point, and the connection line endpoint corresponding to the child node among the two nodes to obtain the connection line between the data cards of the two nodes.

10. The method according to any one of claims 1-9, characterized in that, After drawing the connection lines between the data cards of each node displayed in the mind map page according to the parent-child relationship between the nodes of the n levels, the following steps are further included: If a selection operation on any one data card is detected in the mind map page, determine all the nodes associated with the node to which the one data card belongs among the nodes of the n levels; highlight the data cards of all the nodes associated with the node to which the one data card belongs; highlight the connection lines between the data cards of all the nodes associated with the node to which the one data card belongs; and / or After drawing the connection lines between the data cards of each node displayed in the mind map page according to the parent-child relationship between the nodes of the n levels, the following steps are further included: If a deletion instruction for any one data card is detected in the mind map page, delete the node to which the one data card belongs from the target data, and re-execute the step of generating the data cards of each node in the n levels and subsequent steps; and / or After drawing the connection lines between the data cards of each node displayed in the mind map page according to the parent-child relationship between the nodes of the n levels, the following steps are further included: If a modification instruction for any one data card is detected in the mind map page, modify the data element of the node to which the one data card belongs in the target data to the data element carried by the modification instruction, and re-execute the step of generating the data cards of each node in the n levels and subsequent steps; and / or After drawing the connection lines between the data cards of each node displayed in the mind map page according to the parent-child relationship between the nodes of the n levels, the following steps are further included: If a node addition instruction is detected in the mind map page, add a new node to the target data according to the node information carried by the node addition instruction, and re-execute the step of generating the data cards of each node in the n levels and subsequent steps.

11. The method according to claim 10, wherein The highlighting of the connection lines between the data cards of all the nodes associated with the node to which the one data card belongs includes: Redraw the connection lines between the data cards of all the nodes associated with the node to which the one data card belongs according to the parent-child relationship between all the nodes associated with the node to which the one data card belongs, and highlight the redrawn connection lines.

12. A mind map drawing device, characterized in that, The device includes: An acquisition module, configured to acquire target data, where the target data includes nodes of n levels, and the order of the nodes from the 1st level to the nth level among the n levels is the order from the root node to the leaf node, and n is an integer greater than or equal to 2; A generation module, configured to generate data cards for each node in the n levels, where the data cards include controls for displaying and editing the data elements of the nodes; The first display module is configured to determine n node regions in the mind map page that correspond one-to-one to the n levels; according to the sorting relationship between each node in the (n - 1)-th level among the n levels, in the n-th node region among the n node regions, determine the data area of each node in the n-th level; according to the data area of each node in the (i + 1)-th level among the n levels, in the i-th node region among the n node regions, determine the data area of each node in the i-th level among the n levels, where i is an integer greater than or equal to 2 and less than or equal to n - 1; in the first node region among the n node regions, determine the data area of each node in the first level; and display the data card of each node in the data area of each node in the n levels. The drawing module is configured to draw the connection lines between the data cards of each node displayed in the mind map page according to the parent-child relationship between the nodes of the n levels.

13. A computer device, characterized in that, The computer device includes a memory, a processor, and a computer program stored in the memory and running on the processor. When the computer program is executed by the processor, the method according to any one of claims 1 to 11 is implemented.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program. When the computer program is executed by a processor, the method according to any one of claims 1 to 11 is implemented.

Images