Automatic layout method based on JavaScript matrix data

Abstract

The invention discloses an automatic layout method based on JavaScript matrix data, which comprises the following steps of: S1, creating a matrix container: self-defining an HTML (Hypertext Markup Language) element as the matrix container, and creating a grid container; s2, data processing: performing format processing on the multi-source data; s3, data structure processing: judging whether the data is of a tree data structure or not, if so, performing data recursion processing and data grouping, and then turning to step S4, and if not, directly turning to step S4; s4, single data item configuration: configuring data attributes and states; s5, user interaction: initializing data state attributes, then judging whether to start user interaction or not, if so, performing dragging, state change and zooming, then obtaining change of the data attributes, modifying source data and then performing data presentation; otherwise, directly presenting the data. The problem of compatible presentation of tree-shaped and flattened data is solved.

Description

Technical Field

[0001] The present invention belongs to the technical field of Internet big data visualization, and in particular relates to a method for automatic layout of JavaScript-based matrix data. Background Art

[0002] Data visualization is a technique for presenting data in the form of graphs, charts, and images. It aims to make complex information within the data easier to understand and analyze through visual elements. This technique not only helps users quickly identify patterns, trends, and connections within the data, but also facilitates informed data-driven decision-making.

[0003] With the explosive growth of data volume, data visualization plays an increasingly important role in information transmission and decision analysis. It makes complex data intuitive and easy to understand, and improves the efficiency and effectiveness of data utilization.

[0004] Data visualization is widely used across various industries, including business intelligence, financial analysis, healthcare, education and research, and environmental protection. In the business sector, data visualization helps companies analyze market trends, consumer behavior, and sales data. In finance, it assists analysts and investors in understanding complex financial data and making investment decisions. In healthcare, data visualization is used to analyze patient data, disease transmission, and drug effectiveness.

[0005] Chinese patent document CN 115905657 A discloses a graph data clustering and hierarchical layout algorithm. This algorithm obtains node data and configuration items, clusters and groups nodes, dynamically calculates node coordinates, and ultimately returns a two-dimensional matrix of clustered and hierarchical node data. This matrix is ​​then rendered onto a canvas by a graph data visualization engine to create a visualization interface. Compared to existing graph layout algorithms, this invention provides a new layout algorithm for graph visualization engines, addressing the layout issues associated with clustered and hierarchical scene visualization. The proposed layout algorithm is universal and applicable to any graph visualization engine. Furthermore, it offers high scalability, allowing users to achieve different visualization effects through custom configuration.

[0006] However, matrix data is suitable for data visualization in conjunction with physical equipment. The data itself has physical attributes such as layout allocation, grouping and subordination, thus enabling data presentation, data manipulation, and data monitoring.

[0007] Because existing technologies only support flat data structures and do not support complex tree-like data structures, grouping functions that rely on attribute structures cannot be automatically responded to using existing technologies. They can only be developed through single customization by solidifying data, and are unable to simultaneously present data in both tree-like and flat-like data structures.

[0008] Therefore, it is necessary to provide a method for automatic layout of JavaScript matrix data, which realizes the unification of multiple data sources, tree-type or flat data visualization, multiple grouping, locking or unlocking, dragging single items or group positions, scaling data item weights, grid layout and other functions. Summary of the Invention

[0009] The technical problem to be solved by the present invention is to provide a method for automatic layout of matrix data based on JavaScript, which realizes the functions of unification of multiple data sources, tree-type or flat data visualization, multiple grouping, locking or unlocking, dragging single items or group positions, scaling data item proportion weights, grid layout, etc.

[0010] In order to solve the above technical problems, the technical solution adopted by the present invention is: the method for automatic layout of JavaScript matrix data specifically includes the following steps: S1 creates a matrix container: uses an initialization method to define an HTML element as a matrix container and creates a grid container; S2 data processing: format processing of multi-source data; S3 data structure processing: first determine whether the data is a tree data structure, if so, recursively process the data and group the data before going to step S4, if not, go directly to step S4; S4 single data item configuration: configure the data attributes and status; that is, configure the data positioning pixel, set the length and width, data ID, data subscript, initialize whether it can be dragged, zoom status, etc., among which length and width, position word, and data ID are required items; S5 User Interaction: First initialize the data state attributes, then determine whether to start user interaction. If so, perform dragging, state change, and scaling, obtain the changes in data attributes, and modify the source data before presenting the data; otherwise, directly present the data.

[0011] By adopting the above technical solution, when rendering the page through JavaScript in the browser, the weight ratio is given according to different data items, and the array data is visualized. Compared with the traditional method, this method is more flexible because the position and size can be changed at will; it is more compatible because it supports grouping and unlocking operations. The data in the traditional method is too simple and basically has a fixed structure. This method provides data mapping configuration, and the configuration attribute mapping relationship can be changed at will, so it has strong scalability. Among them, format processing is to convert the field name of the data through the default configuration, which is roughly divided into standard data format conversions such as unique identification tag, data node name conversion, parent-child node data conversion, and data attribute conversion. Through the configured custom data mapping relationship, the format of multi-source data is unified.

[0012] JavaScript: An interpreted scripting language that is dynamically typed, weakly typed, and prototype-based with built-in support for types. Its interpreter, called the JavaScript engine, is part of the browser and is widely used as a client-side scripting language. It was first used on HTML (an application of the Standard Generalized Markup Language) web pages to add dynamic functionality to HTML pages.

[0013] Tree-based data: Tree data structures are an important type of nonlinear data structure. They can represent one-to-many relationships between data elements. Trees and binary trees are the most commonly used. Intuitively, a tree is a hierarchical structure defined by branching relationships. Tree data structures are widely present in the objective world. For example, human family trees and various social organizations can be visually represented using tree data structures.

[0014] Flattening data: The core idea of ​​flattening data structures is to remove the nested relationships between data and flatten the data elements to the same level. In this way, each data element can be accessed by its unique identifier (such as index or key value).

[0015] Preferably, the creation of the matrix container in step S1 includes creating a container size, a matrix grid size, and a minimum unit size.

[0016] Preferably, the grid container created in step S1 is a default 24-grid container, and the data is marked after being acquired, and a default weight ratio is given.

[0017] Preferably, the specific steps of step S3 are: S31: First, determine whether the data has a data attribute identifier identified as a child node and whether the attribute value is valid to determine whether it is a tree data structure; S32: If it is determined to be a tree data structure, first map the attributes in different data and recursively implement the tree structure data; S33: After adding data mapping configuration, it will automatically correspond to the single data item configuration; S34: The tree structure data is automatically processed into groups, group affiliation is added, and the group series function is combined to reorganize the data and reconstruct the style layout.

[0018] Preferably, the grouping of the tree structure data in step S33 includes locking grouping and unlocking grouping, including secondary processing of the data, changing data affiliation, and data reorganization; specifically, the following steps: By changing the data relationship and the necessary parent-child relationship links, the data is reprocessed and the view display is refreshed; at the same time, group dragging is supported, and the layout weight ratio of the data items in the group is obtained through the overall weight offset algorithm, so as to ensure that the view rendering remains consistent for different data structures.

[0019] Preferably, in step S4, if there is a mandatory option user configuration item, the mandatory option user configuration item is used to overwrite the configuration option passed to the constructor; if it does not exist, the function is used to return the default option; at the same time, if it is a single data item configuration, the weight ratio data is provided to indicate how much it accounts for in the default 24 grids.

[0020] Preferably, step S4 further includes providing necessary attributes for layout processing, wherein the necessary attributes for layout processing include length, width, left offset, top offset, unique ID, minimum height and minimum width, and subscript. The units of the necessary attributes for layout processing are all percentage values, which can be expanded to various data structures.

[0021] Preferably, in step S5, the position, size, type, and state attributes are first initialized, then it is determined whether user interaction is performed, and finally the data is visualized. If user interaction is performed, the specific steps are as follows: S51: First, register and listen for a mouse drag event, and give a callback to process the mouse offset position, current position, and starting position; S52: Drag the position of a single item or group, and scale the weight of the data item; S53: If the data status changes in real time, step S3 will be re-executed; and according to the customized weight judgment condition, the value of the status attribute in the data is updated, and data monitoring is performed, thereby achieving data-driven view re-rendering.

[0022] Using the above technical solution, the visualization and high configurability of array data has always been a major problem in the industry. At present, this method has solved problems such as single data, fixed style, and presentation of data without affiliation, improving user experience and enhancing the intuitiveness and credibility of data visualization.

[0023] Preferably, the specific steps for dragging and changing the position of a group or a single group in step S52 are: S521-1: Calculate the ratio between the offset position and the total number of containers, and convert it into a weighted proportion through an algorithm; S521-2: Update the left offset and top offset of a single data item using the weight ratio and the total number of matrix grids; S521-3: Modifying the offset will automatically monitor and update the source data, automatically mapping the update.

[0024] Preferably, the specific steps for scaling in step S52 are: S522-1: Calculate the ratio between the offset position and the total number of containers, and convert it into a weighted proportion through an algorithm; S522-2: Using the weight ratio and the total number of matrix grids, update the left offset and top offset of the single data item; S522-3: Modifying the offset will automatically monitor and update the source data, automatically mapping the update.

[0025] Compared with existing technologies, the present invention has the following beneficial effects: This JavaScript-based automatic matrix data layout method includes methods such as matrix container creation, data configuration, unification of multiple data structures, grouping and ungrouping, and drag-and-drop scaling. It also implements functions such as unification of multiple data sources, tree-type or flat data visualization, multiple grouping, locking or unlocking, dragging individual items or group positions, scaling data item weights, and grid layout. It also addresses issues such as the incompatibility of tree-type and flat data presentation, fixed styles, immutable single data types, and presentation of data without dependencies, thereby improving the user experience and enhancing the intuitiveness and credibility of data visualization. Furthermore, it encapsulates various callback methods and a development and usage environment, improving technical development efficiency and saving development costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 This is a flowchart of the JavaScript-based matrix data automatic layout method of the present invention; Figure 2 This is a schematic diagram illustrating the functional structure of the JavaScript-based matrix data automatic layout method of the present invention. DETAILED DESCRIPTION

[0027] The embodiments of the present invention are described in detail below with reference to the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solutions of the present invention and are not intended to limit the scope of protection of the present invention.

[0028] The common knowledge underlying this technical solution is that JavaScript is an interpreted scripting language that is dynamically typed, weakly typed, and prototype-based, with built-in type support. Its interpreter, called a JavaScript engine, is part of the browser and is widely used as a client-side scripting language. It was first used on HTML (an application of the Standard Generalized Markup Language) web pages to add dynamic functionality to HTML pages.

[0029] Tree-based data: Tree data structures are an important type of nonlinear data structure. They can represent one-to-many relationships between data elements. Trees and binary trees are the most commonly used. Intuitively, a tree is a hierarchical structure defined by branching relationships. Tree data structures are widely present in the objective world. For example, human family trees and various social organizations can be visually represented using tree data structures.

[0030] Flattening data: The core idea of ​​flattening data structures is to remove the nested relationships between data and flatten the data elements to the same level. In this way, each data element can be accessed by its unique identifier (such as index or key value).

[0031] Example: Figure 1 As shown, the method for automatic layout of JavaScript matrix data specifically includes the following steps: S1 creates a matrix container: uses an initialization method to define an HTML element as a matrix container and creates a grid container; The creation of the matrix container in step S1 includes creating the container size, matrix grid size, and minimum cell size; The grid container created in step S1 is a default 24-grid container. After acquiring the data, it is marked and given a default weight ratio; that is, each data item occupies 2 grids, that is, 8.333333%; S2 Data Processing: Format processing of multi-source data; format processing is to convert the field name of the data through the default configuration, which is roughly divided into standard data format conversions such as unique identification tags, data node name conversion, parent-child node data conversion, and data attribute conversion. Through the configuration of custom data mapping relationships, the format of multi-source data is unified; S3 data structure processing: first determine whether the data is a tree data structure, if so, recursively process the data and group the data before going to step S4, if not, go directly to step S4; The specific steps of step S3 are: S31: First, determine whether the data has a data attribute identifier identified as a child node and whether the attribute value is valid to determine whether it is a tree data structure; S32: If it is determined to be a tree data structure, first map the attributes in different data and recursively implement the tree structure data; S33: After adding data mapping configuration, it will automatically correspond to the single data item configuration; In step S33, the grouping of the tree structure data includes locking grouping and unlocking grouping, including secondary processing of the data, changing the data affiliation, and data reorganization; specifically, By changing the data relationships and necessary parent-child relationship links, reprocess the data and refresh the view display; It also supports group dragging. The layout weight ratio of data items in the group is obtained through the overall weight offset algorithm, so as to ensure that the view rendering remains consistent across different data structures. S34: Tree-structured data is automatically processed into groups, group affiliation is added, and data reorganization and style layout reconstruction are performed in combination with group series functions; S4 single data item configuration: configure the data attributes and status; that is, configure the data positioning pixel, set the length and width, data ID, data subscript, initialize whether it can be dragged, zoom status, etc., among which length and width, position word, and data ID are required items; In step S4, if a mandatory option user configuration item exists, the mandatory option user configuration item is used to overwrite the configuration option passed to the constructor; if not, the function returns the default option; at the same time, if it is a single data item configuration, the weight ratio data is provided to indicate how much it accounts for in the default 24 grids; Step S4 also includes providing necessary attributes for layout processing, which include length, width, left offset, top offset, unique ID, minimum height and minimum width, and subscript; the units of the necessary attributes for layout processing are all percentage values, which can expand various data structures; S5 User Interaction: First, initialize the data state attributes, then determine whether to start user interaction. If so, perform dragging, state change, and scaling to obtain the changes in data attributes, modify the source data, and then present the data; otherwise, directly present the data; In step S5, the position, size, type, and state attributes are first initialized, then it is determined whether user interaction is performed, and finally the data is visualized. Highly configurable visualization of data arrays has always been a major problem in the industry. Currently, this method solves the problems of single data, fixed style, and data presentation without affiliation, thereby improving user experience and enhancing the intuitiveness and credibility of data visualization. The specific steps for user interaction are as follows: S51: First, register and listen for a mouse drag event, and give a callback to process the mouse offset position, current position, and starting position; S52: Drag the position of a single item or group, and scale the weight of the data item; The specific steps for dragging and changing the position of a group or a single group in step S52 are as follows: S521-1: Calculate the ratio between the offset position and the total number of containers, and convert it into a weighted proportion through an algorithm; S521-2: Update the left offset and top offset of a single data item using the weight ratio and the total number of matrix grids; S521-3: Modifying the offset will automatically monitor and update the source data, automatically mapping the update; The specific steps for scaling in step S52 are as follows: S522-1: Calculate the ratio between the offset position and the total number of containers, and convert it into a weighted proportion through an algorithm; S522-2: Using the weight ratio and the total number of matrix grids, update the left offset and top offset of the single data item; S522-3: Modifying the offset will automatically monitor and update the source data, automatically mapping the update.

[0032] S53: If the data status changes in real time, step S3 will be re-executed; and according to the customized weight judgment condition, the value of the status attribute in the data is updated, and data monitoring is performed, thereby achieving data-driven view re-rendering.

[0033] like Figure 2 As shown, the functions of the JavaScript-based matrix data automatic layout method include matrix container, single data configuration, data structure processing, data grouping function and user interaction function.

[0034] For ordinary technicians in this field, the specific embodiments are only illustrative descriptions of the present invention. It is obvious that the specific implementation of the present invention is not limited to the above-mentioned methods. As long as various non-substantial improvements are made using the method concepts and technical solutions of the present invention, or the concepts and technical solutions of the present invention are directly applied to other occasions without improvement, they are all within the scope of protection of the present invention.

Claims

1. A method for automatic layout of matrix data based on JavaScript, characterized in that: The specific steps include: S1 creates a matrix container: uses an initialization method to define an HTML element as a matrix container and creates a grid container; S2 data processing: format processing of multi-source data; S3 data structure processing: first determine whether the data is a tree data structure, if so, recursively process the data and group the data before going to step S4, if not, go directly to step S4; S4 single data item configuration: configure the attributes and status of the data; S5 User Interaction: First, initialize the data state attributes, then determine whether to start user interaction. If so, perform dragging, state change, and scaling to obtain changes in data attributes, modify the source data, and then present the data. Otherwise, the data is presented directly.

2. The method for automatic layout of JavaScript matrix data according to claim 1, characterized in that: The creation of the matrix container in step S1 includes creating the container size, the matrix grid size, and the minimum unit size.

3. The method for automatic layout of JavaScript matrix data according to claim 2, characterized in that: The grid container created in step S1 is a default 24-grid container. After the data is acquired, it is marked and a default weight ratio is given.

4. The method for automatic layout of JavaScript matrix data according to claim 2, characterized in that: The specific steps of step S3 are: S31: First, determine whether the data has a data attribute identifier identified as a child node and whether the attribute value is valid to determine whether it is a tree data structure; S32: If it is determined to be a tree data structure, first map the attributes in different data and recursively implement the tree structure data; S33: After adding data mapping configuration, it will automatically correspond to the single data item configuration; S34: The tree structure data is automatically processed into groups, group affiliation is added, and the group series function is combined to reorganize the data and reconstruct the style layout.

5. The method for automatic layout of JavaScript matrix data according to claim 4, characterized in that: In step S33, the grouping of the tree structure data includes locking grouping and unlocking grouping, including secondary processing of the data, changing the data affiliation, and data reorganization; specifically, By changing the data relationship and the necessary parent-child relationship links, the data is reprocessed and the view display is refreshed; at the same time, group dragging is supported, and the layout weight ratio of the data items in the group is obtained through the overall weight offset algorithm, so as to ensure that the view rendering remains consistent for different data structures.

6. The method for automatic layout of JavaScript matrix data according to claim 4, characterized in that: In step S4, if there is a mandatory option user configuration item, the mandatory option user configuration item is used to overwrite the configuration option passed to the constructor; if it does not exist, the function is used to return the default option; at the same time, if it is a single data item configuration, the weight ratio data is provided to indicate how much it accounts for in the default 24 grids.

7. The method for automatic layout of JavaScript matrix data according to claim 6, characterized in that: The step S4 also includes providing necessary attributes for layout processing, and the necessary attributes for layout processing include length, width, left offset, top offset, unique representation ID, minimum height and minimum width, and subscript.

8. The method for automatic layout of JavaScript matrix data according to claim 6, characterized in that: In step S5, the position, size, type, and state attributes are first initialized, then it is determined whether user interaction is performed, and finally the data is visualized. If user interaction is performed, the specific steps are as follows: S51: First, register and listen for a mouse drag event, and give a callback to process the mouse offset position, current position, and starting position; S52: Drag the position of a single item or group, and scale the weight of the data item; S53: If the data status changes in real time, step S3 will be re-executed; and according to the customized weight judgment condition, the value of the status attribute in the data is updated, and data monitoring is performed, thereby achieving data-driven view re-rendering.

9. The method for automatic layout of JavaScript matrix data according to claim 8, characterized in that: The specific steps for dragging and changing the position of a group or a single group in step S52 are as follows: S521-1: Calculate the ratio between the offset position and the total number of containers, and convert it into a weighted proportion through an algorithm; S521-2: Update the left offset and top offset of a single data item using the weight ratio and the total number of matrix grids; S521-3: Modifying the offset will automatically monitor and update the source data, automatically mapping the update.

10. The method for automatic layout of JavaScript matrix data according to claim 8, characterized in that: The specific steps for scaling in step S52 are as follows: S522-1: Calculate the ratio between the offset position and the total number of containers, and convert it into a weighted proportion through an algorithm; S522-2: Using the weight ratio and the total number of matrix grids, update the left offset and top offset of the single data item; S522-3: Modifying the offset will automatically monitor and update the source data, automatically mapping the update.

Images