阅读说明：本技术 一种基于拖拽式的人机互动数据可视化方法 (Human-computer interaction data visualization method based on dragging ) 是由 周国庆 吴凡 曹志富 于 2021-09-14 设计创作，主要内容包括：本发明公开了一种基于拖拽式的人机互动数据可视化方法,包括如下步骤：S1：数据解析,分析从图数据库读取关联关系数据,将其解析转化成结构化的本体数据；S2：数据处理,实例化数据模型映射业务类型；S3：人机互动操作,通过页面拖拽技术直接拖动页面中预先设定的元素配置查询参数；S4：界面层,根据业务类型呈现对应的可视化类图。本发明通过页面拖拽技术拖到箭头直接改变节点间的关联关系；拖动元素到目前区域,创建查询筛选条件；拖动节点、边线的建立新的节点；这种拖拽式的人机互动大大提高可视化分析效率,解决如何便捷地使用数据可视化查询、编辑技术的问题。(The invention discloses a human-computer interaction data visualization method based on a drag type, which comprises the following steps: s1: analyzing the data, namely analyzing the incidence relation data read from the graph database and converting the analysis into structured ontology data; s2: data processing, namely instantiating a data model to map the service type; s3: performing man-machine interaction operation, namely directly dragging preset elements in a page to configure query parameters through a page dragging technology; s4: and the interface layer presents the corresponding visual class diagram according to the service type. According to the invention, the association relation between the nodes is directly changed by dragging the page to an arrow by a page dragging technology; dragging the element to the current area, and creating a query screening condition; building new nodes for dragging nodes and edges; the dragging type human-computer interaction greatly improves the visual analysis efficiency, and solves the problem of how to use the data visual query and editing technology conveniently.)

1. A human-computer interaction data visualization method based on a drag mode is characterized by comprising the following steps:

s1: analyzing the data, namely analyzing the incidence relation data read from the graph database and converting the analysis into structured ontology data;

s2: data processing, namely instantiating a data model to map the service type;

s3: performing man-machine interaction operation, namely directly dragging preset elements in a page to configure query parameters through a page dragging technology;

s4: and the interface layer presents the corresponding visual class diagram according to the service type.

2. The method for visualizing the human-computer interaction data based on the drag-and-drop method as claimed in claim 1, wherein the S1 data parsing reads the stored association data from the Neo4j database, parses JSON data into defined ontology data, and converts the ontology data into V node and E edge instances, and the content comprises a nodes node V array and a links edge E array.

3. The method for visualizing human-computer interaction data based on drag-and-drop as claimed in claim 1, wherein the S1 data parsing comprises ontology data type definition and transformation V node and E edge.

4. The method for visualizing the human-computer interaction data based on the drag-and-drop method as claimed in claim 1, wherein the S2 data processing comprises configuring layout parameters and mapping a draw method according to Type.

5. The method for visualizing the human-computer interaction data based on the drag method as claimed in claim 1, wherein the human-computer interaction operation of S3 comprises dragging a node and dragging edges and arrows.

6. The method for visualizing human-computer interaction data based on drag-and-drop as claimed in claim 1, wherein the interface layer of S4 comprises a node layer display, an edge and an arrow layer display.

7. The method for visualizing the human-computer interaction data based on the drag formula as claimed in claim 1, wherein S2 data processing, configuring a layout initialization position, a layout area size, an Edge label length, a Node size radius initial value, an Edge and arrow length, and a Dragger object initial value, and drawing a text position, a curve position, and an arrow position by calculating positions according to a type mapping draw method.

8. The method for visualizing data of human-computer interaction based on drag-and-drop as claimed in claim 1, wherein S3 is implemented by obtaining the distance moved by the mouse and the coordinates (x, y) to calculate the new position.

9. The method as claimed in claim 1, wherein step 4 is an interface layer for determining whether the force position changes; and if the position changes, updating the positions of the nodes, the edges and the arrows in the graph to be displayed again.

Technical Field

The invention relates to the technical field of big data analysis visualization, in particular to a human-computer interaction data visualization method based on a dragging mode.

Background

With the rapid development of big data technology, large company enterprises, especially internet enterprises, are all collecting data, storing data, processing data, sharing data, retrieving data, analyzing data, displaying data and mining business values behind data from all angles, and a one-stop big data analysis platform is created. With the refinement of business applications, reducing the difficulty of data analysis has become a key research direction for various companies.

However, a certain gap still exists between the construction of the platform and the landing of the application, for example, the large data service application analysis logic is established, multiplexing cannot be realized, and for the characteristics of large data analysis, cooperation of technical personnel in many aspects is needed, a large amount of manpower and time are consumed, and under the current situations of insufficient talent reserve and insufficient knowledge fusion, it is very necessary to construct a set of large data visualized analysis system facing data analysts and service experts in order to reduce the development difficulty of large data application of enterprises.

In the similar products in the market at present, such as the ETL tool, when a user uses the tool to analyze big data, certain code writing or SQL logic processing needs to be performed, which has higher technical basic requirements on the user, thereby increasing the cost of using big data technology. In addition, the direction pointing at the edge of the editing network relationship graph is inconvenient, and if the direction pointing at the edge of the editing network relationship graph is dragged to an arrow to directly change the association relationship between the nodes, the editing efficiency is greatly improved.

Disclosure of Invention

The invention aims to provide a human-computer interaction data visualization method based on a dragging type, which directly changes the incidence relation between nodes by dragging an arrow to the arrow through a page dragging technology; dragging the element to the current area, and creating a query screening condition; building new nodes for dragging nodes and edges; the dragging type human-computer interaction greatly improves the visual analysis efficiency, and solves the problem of how to use the data visual query and editing technology conveniently.

In order to achieve the purpose, the invention provides the following technical scheme:

a human-computer interaction data visualization method based on a drag type comprises the following steps:

s1: analyzing the data, namely analyzing the incidence relation data read from the graph database and converting the analysis into structured ontology data;

s2: data processing, namely instantiating a data model to map the service type;

s3: performing man-machine interaction operation, namely directly dragging preset elements in a page to configure query parameters through a page dragging technology;

s4: and the interface layer presents the corresponding visual class diagram according to the service type.

Further, the S1 data analysis reads the stored incidence relation data from the Neo4j database, the JSON data is analyzed into defined ontology data, the ontology data is converted into V node and E edge examples, and the contents comprise a nodes V array and a links edge E array.

Further, the S1 data parsing includes ontology data type definition and transformation V nodes and E edges.

Further, the S2 data processing includes configuring layout parameters and mapping a draw method according to Type.

Further, the human-computer interaction operation of S3 includes dragging a node and dragging an edge and an arrow.

Further, the S4 interface layer includes a node layer display, an edge and an arrow layer display.

Further, in the data processing of S2, a layout initialization position, a size of a layout area, an Edge label length, an initial value of a radius of a Node size, an Edge and arrow length, and a Dragger object are configured, and a text position, a curve position, and an arrow position are drawn by calculating positions according to a type mapping draw method.

Further, in S3, a new position is calculated by acquiring the distance moved by the mouse and the coordinates (x, y) through the dragging operation.

Further, step 4, judging whether the force position changes or not by the interface layer; and if the position changes, updating the positions of the nodes, the edges and the arrows in the graph to be displayed again.

Compared with the prior art, the invention has the beneficial effects that:

1. the invention provides a human-computer interaction data visualization method based on a dragging type, which supports the incidence relation of ontology data types: the invention can convert the common incidence relation data into the structured ontology data, and maps the corresponding draw method according to the data type of the ontology.

2. The invention provides a human-computer interaction data visualization method based on a dragging type, which supports force layout configuration parameters: the distribution node positions are uniformly calculated by configuring the layout parameters through the force-oriented algorithm model, and the correlation relationship among the objects is favorably disclosed.

3. The invention provides a human-computer interaction data visualization method based on a dragging type, which supports the dragging of elements: the layout of the whole incidence relation graph is facilitated, the overlapping of positions can be effectively prevented, and the incidence relation is better displayed. The position of the dragging element can be updated, the arrow of the dragging edge can point to the node again, and the dragging node can be directly used as a condition for query.

Drawings

FIG. 1 is a frame diagram of a method for visually analyzing dragged human-computer interaction data according to the present invention;

FIG. 2 is a diagram of entity association locality relationships of the present invention;

FIG. 3 is a flowchart of a specific drawing method of dragging-type human-machine interaction according to the present invention;

FIG. 4 is a drawing result diagram of the association layout according to the present invention;

FIG. 5 is a diagram illustrating the coordinate change of the dragging position of the mouse according to the present invention;

FIG. 6 is a flow diagram of element drag of the present invention;

FIG. 7 is a flow chart of construction of a drag-and-drop human-computer interaction data visualization according to the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

A human-computer interaction data visualization method based on a dragging type is characterized in that logic condition screening and node and sideline visualization parameter setting in a service model are achieved through a page dragging technology, and the relationship between nodes is established. The invention can simplify the query workflow in the aspect of data visualization analysis and improve the visualization analysis efficiency, the invention principle is as shown in figure 1, and the invention comprises the following steps:

s1: data analysis, namely reading stored incidence relation data from a Neo4j database according to input JSON data, analyzing the JSON data into defined body data, and converting the defined body data into a V node and an E edge example, wherein the content comprises a nodes node V array and a links edge E array;

s2: and data processing, namely configuring a layout initialization position, a layout area size, an Edge label length, a Node size radius initial value, an Edge line, an arrow length and a Dragger object. According to a type mapping draw method, drawing a character position, a curve position and an arrow position by calculating the positions;

s3: performing man-machine interaction operation, dragging preset elements in a page through a page dragging technology, realizing visual parameter setting of each node and side line parameter in a service type, constructing a relationship between the nodes and the sides, forming a visual class diagram, acquiring the moving distance and coordinates (x, y) of a mouse through the dragging operation, and calculating a new position;

s4: the interface layer presents a corresponding visual class diagram according to the service type and judges whether the force position changes; and if the position changes, updating the positions of the nodes, the edges and the arrows in the graph to be displayed again.

Dragging type: namely, dragging the elements or content blocks set on the page to perform human-computer interaction visual data analysis.

As shown in fig. 2, the graph is a local relational graph drawn by entity association, where each circular node of the graph represents an entity node, directed edges represent association between nodes, a source node points to a target node, and association information between entities is marked on the edges, and dragging includes changing the direction from the edges to the nodes by an arrow; what is most important for the present invention is how to support the view and edit of the graph by dragging. When the dragging arrow changes the direction of the node, dragging the node changes the position of the node. And dragging a straight line between the two nodes to immediately create an edge.

The detailed steps of the S1 data parsing module are as follows:

s1.1 ontology data type definition:

the node comprises: class, things, equivalents, obsoletes, external, text, data types, rdfs class, rdfs resources, intersections, unions, complements.

The edge includes: object, data type, rdf, retire, outer, disjoint, subclass.

The arrow includes: normal 1, dashed, special.

Packaging a dragged object: class tractor, target, source tractor.

S1.2, converting the V node and the E edge, converting the nodes array of the JSON data into a V node array, and adding an initial radius, width, height and body data type for each V node; converting the links array in the JSON format into an E edge array, adding initial radius, width, height and body edge tag attribute data types, edge chain line types, edge tag attribute main titles and subtitles on each E edge. Traversing the array to calculate whether the edge has multiple edges and points to the edge.

The detailed steps of the S2 data processing module are as follows:

s2.1 configuration layout initialization location

Initializing parameters: the layout area size width is 800px, height is 600 px; edge label length 160 px; the initial value of the radius of the Node size is 30 px; edge line and arrow length 200 px; the Dragger object is initialized and hidden, and is displayed when the mouse moves to the dragged object; and the drag object is hidden again after being separated.

S2.2 method for mapping draw according to Type

The Draw method is based on a browser SVG, the Draw method of the node is to firstly circle and text of the node, then to center the characters, if there are auxiliary characters and pictures added in the lower right corner. In the Draw method of the edge line, the length of the edge is calculated by using a distance formula between two node points, then the length is divided by 2 to find a central point, the position of the attribute is added to the central point, and the result is drawn by the incidence relation layout as shown in fig. 4.

The Draw method for a node is as follows:

the Draw method for the sidelines is as follows:

the detailed steps of the human-computer interaction operation module of S3 are as follows:

the dragging operation is realized by acquiring the moving distance of the mouse, namely, the difference value of the coordinates (x, y) of the position before the movement and the coordinates (x, y) of the position in the movement is calculated, and the coordinates of the dragging position of the mouse are changed as shown in fig. 5.

S3.1 dragging node

Calculating the position of the drag node: when the mouse is pressed down, the initial position of the mouse and the initial position of the target element need to be remembered, and the aim is to realize that when the mouse moves, the target element also moves along with the movement, and the movement position relationship is as follows: the moved mouse position-mouse initial position is equal to the moved target element position-target element initial position; if the difference of the mouse positions is represented by dis, the position of the moved target element is dis + the initial position of the target element; the current position of the mouse can be accurately known through the event object, so that the difference value of the movement of the mouse can be continuously calculated when the mouse is dragged, and the current position of the target element can be obtained. And when the mouse is released and the dragging is finished, calculating the final position (x, y) of the moved target element, searching the mapped dragging object according to the positions of the x and y in the layout, changing the mapping to a new pointing targetDragger, and only moving the node if the target element is not placed in the singly dragged node in the actual application, and changing the position of the node. If the node is dragged to the query box, the associated information is queried under the condition, and the element dragging process is as shown in FIG. 6.

S3.2 dragging edge and arrow

If the pointer points to the edge or arrow of the target object, the pointer is pressed and dragged to a new target position, and then the point of the edge is changed again after releasing.

If the arrow on the target node is dragged to the target node independently, an edge is newly created.

And if the node type can not be dragged, the dragging function is forbidden.

The detailed steps of the S4 interface layer module are as follows:

and (4) performing layered display processing on nodes and edges on the operation interface, and dragging an operation object when a mouse hover node or a mouse hover edge appears.

S4.1 node level display

And displaying all the node V array objects as nodes, wherein index is the index of the node in the node array, x is the current x coordinate of the node, y is the current y coordinate of the node, Vx is the current x-direction speed of the node, and vy is the current y-direction speed of the node.

S4.2 edge and arrow layer display

Displaying all the E array objects of links as link edges, wherein source is a source node of the edges; target is the target node of the edge; index-an index in links based on 0, is automatically assigned. For convenience, the source and target nodes of an edge may initially use an index or string identifier, rather than necessarily being object references. Source or link target is converted to node reference form according to the specified identifier. Redrawing is recalled if the specified links array is modified, such as adding or removing edges.

The constructed human-computer interaction data visualization relation based on the drag type is shown in FIG. 7.

The data analysis module is added, so that the entity type can be analyzed, and the association relationship of the entity is supported; then converting into V node and E edge examples, adding corresponding draw methods according to the data types of the body, realizing the drawing methods of different nodes, and having good expansibility; adding a data processing model, configuring force layout parameters and uniformly laying out nodes and edges; and a man-machine interaction operation module is added to support the editing and query method functions of the nodes and the edges and the operation of the aspect graph.

Firstly, the method combines practical application, optimizes the classification definition problem of ontology data, provides real ontology data definition and optimizes the application value of the ontology data. Secondly, in the problem of data processing, layout parameters are configured, and parameter values are fully adjusted and optimized; a uniform distribution, high symmetry can be used; while mapping the draw method according to different types. And finally, through the dragging type human-computer interaction operation, the positions of the elements can be changed rapidly, node information can be edited and inquired, the change of the positions can be monitored, and if x and y are changed through dragging, the positions can be updated in time.

The above description is only for the preferred embodiment of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art should be able to cover the technical solutions and the inventive concepts of the present invention within the technical scope of the present invention.