CN112861058A

CN112861058A - Visual node processing method, device, medium and electronic equipment

Info

Publication number: CN112861058A
Application number: CN202110282336.1A
Authority: CN
Inventors: 卜申雷; 刘小娟
Original assignee: Beijing Tongbang Zhuoyi Technology Co ltd
Current assignee: Beijing Tongbang Zhuoyi Technology Co ltd
Priority date: 2021-03-16
Filing date: 2021-03-16
Publication date: 2021-05-28

Abstract

The invention provides a visualized node processing method, which comprises the following steps: receiving input operation of a user for a visual node in a webpage; determining a visual node to be edited in a webpage according to the input operation of the user for the visual node in the webpage; adding an element covering layer on the visual node to be edited; and on the element overlay, receiving the editing operation of the user aiming at the visual node to be edited, and editing the visual node to be edited according to the editing operation, so that the user-defined editing of the visual node can be realized, the personalized requirements of the user are met, and the user experience is improved. The invention also provides a visualized node processing device, a medium and electronic equipment.

Description

Visual node processing method, device, medium and electronic equipment

Technical Field

The invention relates to the technical field of data processing, in particular to a visualized node processing method, a visualized node processing device, a visualized node processing medium and electronic equipment.

Background

The front end is a foreground part of the website and runs on browsers such as a PC (personal computer) end and a mobile end to display webpages browsed by a user. The front-end data visualization research is to convert data into interactive graphs or images and the like, express the interactive graphs or images in a visually perceptible mode, enhance the cognitive ability of people and achieve the purposes of finding, explaining, analyzing, exploring, deciding and learning. The chart has many choices in front-end visualization, such as echart, d3, three.js, etc., echart and d3 are suitable for two-dimensional charts, such as line charts, pie charts, etc., and three.js is suitable for three-dimensional scene display.

The essence of data visualization is that data is mapped into a graph through various visual channels, which can make a user understand data more quickly and accurately. Therefore, the problem to be solved in data visualization is how to express data in a visually observable manner, and meanwhile, the aesthetic and intelligibility needs to be considered, the problems of coverage, disorder, conflict and the like under the condition that the displayed space (canvas) is limited need to be solved, and then the details of the data are viewed in an interactive manner. However, the existing related technologies have the disadvantages that most chart libraries can only be displayed, but visual nodes cannot be edited, so that the personalized requirements of users cannot be met, and the user experience is reduced.

It is to be noted that the information disclosed in the above background section is only for enhancement of understanding of the background of the present invention and therefore may include information that does not constitute prior art known to a person of ordinary skill in the art.

Disclosure of Invention

Embodiments of the present invention provide a method, an apparatus, a medium, and an electronic device for processing a visual node, so that user-defined editing of the visual node can be implemented at least to a certain extent, thereby satisfying personalized requirements of users and improving user experience.

Additional features and advantages of the invention will be set forth in the detailed description which follows, or may be learned by practice of the invention.

According to a first aspect of the embodiments of the present invention, there is provided a visualization node processing method, including: receiving input operation of a user for a visual node in a webpage; determining a visual node to be edited in a webpage according to input operation of a user aiming at the visual node in the webpage; adding an element covering layer on a visual node to be edited; and on the element overlay, receiving the editing operation of a user aiming at the visual node to be edited, and editing the visual node to be edited according to the editing operation.

In some embodiments of the present invention, before receiving an input operation of a user for a visualization node in a web page, the method further comprises: receiving webpage data, wherein the webpage data comprises visual node data; rendering the visualized node data based on a rendering engine of the browser; and displaying the rendered visualization nodes on the webpage, wherein the visualization nodes are editable visualization nodes.

In some embodiments of the invention, the number of visualization nodes is included in the visualization node data, and the method further comprises: when the number of the visual nodes is larger than a preset threshold value, determining data of a target visual node from the visual node data, wherein the target visual node is a visual node with an animation effect; and according to the data of the target visual node, cancelling the animation effect corresponding to the target visual node.

In some embodiments of the present invention, the web page data further includes data for generating an element mask layer, and before adding a layer of element mask layer on the visual node to be edited, the method further includes: determining data corresponding to the identification of the visual node to be edited from the data for generating the element masking layer according to the identification of the visual node to be edited; and generating an element masking layer based on the data corresponding to the identification of the visual node to be edited.

In some embodiments of the invention, adding a layer of element masks on the visualization node to be edited comprises: acquiring position information of a visual node to be edited; and adding the element covering layer on the visual node to be edited according to the position information of the visual node to be edited.

In some embodiments of the invention, the method further comprises: and if the condition that the user clicks a newly added key in the webpage is detected, adding a new visual node in the webpage.

In some embodiments of the invention, adding a new visualization node in the web page comprises: acquiring a blank area of a webpage and a network topological graph of the webpage; and adding a new visual node in the blank area of the webpage according to the network topological graph of the webpage and the blank area of the webpage.

According to a second aspect of the embodiments of the present invention, there is provided a visualization node processing apparatus, including: the first receiving module is used for receiving input operation of a user for a visual node in a webpage; the first determining module is used for determining a visual node to be edited in the webpage according to the input operation of a user aiming at the visual node in the webpage; the element covering layer adding module is used for adding an element covering layer on a visual node to be edited; and the editing module receives the editing operation of the user aiming at the visual node to be edited on the element layer and edits the visual node to be edited according to the editing operation.

In some embodiments of the present invention, before receiving an input operation of a user for a visualization node in a web page, the apparatus further includes: the second receiving module is used for receiving webpage data, and the webpage data comprises visual node data; the rendering module renders the visualized node data based on a rendering engine of the browser; and the display module displays the rendered visual nodes on the webpage, wherein the visual nodes can be edited.

In some embodiments of the present invention, the number of visualization nodes is included in the visualization node data, and the apparatus further includes: the second determining module is used for determining data of a target visualization node from the visualization node data when the number of the visualization nodes is larger than a preset threshold value, wherein the target visualization node is a visualization node with an animation effect; and the cancelling module is used for cancelling the animation effect corresponding to the target visual node according to the data of the target visual node.

In some embodiments of the present invention, the web page data further includes data for generating an element mask layer, and before adding a layer of element mask layer on the visual node to be edited, the apparatus further includes: the third determining module is used for determining data corresponding to the identifier of the visual node to be edited from the data used for generating the element masking layer according to the identifier of the visual node to be edited; and the generating module is used for generating an element covering layer based on the data corresponding to the identification of the visual node to be edited.

In some embodiments of the present invention, the element layer adding module includes: the first acquisition module is used for acquiring the position information of the visual node to be edited; and the submodule of the element covering layer adding module is used for adding the element covering layer on the visual node to be edited according to the position information of the visual node to be edited.

In some embodiments of the invention, the apparatus further comprises: and the visual node adding module is used for adding a new visual node into the webpage if detecting that the user clicks a new key in the webpage.

In some embodiments of the present invention, the visualization node adding module includes: the second acquisition module is used for acquiring the blank area of the webpage and the network topological graph of the webpage; and the sub-module of the visual node adding module is used for adding a new visual node in the blank area of the webpage according to the network topological graph of the webpage and the blank area of the webpage.

According to a third aspect of embodiments of the present invention, there is provided an electronic apparatus, including: one or more processors; a storage device for storing one or more programs which, when executed by the one or more processors, cause the one or more processors to implement the visualization node processing method as described in the first aspect of the embodiments above.

According to a fourth aspect of embodiments of the present invention, there is provided a computer-readable medium, on which a computer program is stored, which when executed by a processor, implements the visualization node processing method according to the first aspect of the embodiments.

The technical scheme provided by the embodiment of the invention has the following beneficial effects:

in the technical solutions provided by some embodiments of the present invention, an input operation of a user for a visual node in a web page is received, the visual node to be edited in the web page is determined according to the input operation of the user for the visual node in the web page, an element masking layer is added to the visual node to be edited, an editing operation of the user for the visual node to be edited is received on the element masking layer, and the visual node to be edited is edited according to the editing operation, so that a customized editing of the visual node can be realized, a personalized requirement of the user is met, and user experience is improved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention, as claimed.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and together with the description, serve to explain the principles of the invention. It is obvious that the drawings in the following description are only some embodiments of the invention, and that for a person skilled in the art, other drawings can be derived from them without inventive effort. In the drawings:

fig. 1 shows a schematic diagram of an exemplary system architecture to which a visualization node processing method or a visualization node processing apparatus of an embodiment of the present invention may be applied;

FIG. 2 schematically shows a flow diagram of a visualization node processing method according to an embodiment of the invention;

FIG. 3 schematically illustrates a flow diagram of a visualization node processing method according to another embodiment of the invention;

FIG. 4 schematically illustrates a flow diagram of a visualization node processing method according to another embodiment of the invention;

FIG. 5 schematically illustrates a flow diagram of a visualization node processing method according to another embodiment of the invention;

FIG. 6 schematically illustrates a flow diagram of a visualization node processing method according to another embodiment of the invention;

FIG. 7 schematically illustrates a flow diagram of a visualization node processing method according to another embodiment of the invention;

FIG. 8 schematically shows a block diagram of a visualization node processing apparatus according to an embodiment of the present invention;

FIG. 9 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention;

FIG. 10 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention;

FIG. 11 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention;

FIG. 12 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention;

FIG. 13 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention;

FIG. 14 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention;

FIG. 15 illustrates a schematic structural diagram of a computer system suitable for use with the electronic device to implement an embodiment of the invention.

Detailed Description

Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art.

Furthermore, the described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to provide a thorough understanding of embodiments of the invention. One skilled in the relevant art will recognize, however, that the invention may be practiced without one or more of the specific details, or with other methods, components, devices, steps, and so forth. In other instances, well-known methods, devices, implementations or operations have not been shown or described in detail to avoid obscuring aspects of the invention.

The block diagrams shown in the figures are functional entities only and do not necessarily correspond to physically separate entities. I.e. these functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor means and/or microcontroller means.

The flow charts shown in the drawings are merely illustrative and do not necessarily include all of the contents and operations/steps, nor do they necessarily have to be performed in the order described. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the actual execution sequence may be changed according to the actual situation.

Fig. 1 is a schematic diagram illustrating an exemplary system architecture to which a visualization node processing method or a visualization node processing apparatus according to an embodiment of the present invention may be applied.

As shown in fig. 1, the system architecture 100 may include one or more of

terminal devices

101, 102, 103, a network 104, and a server 105. The network 104 serves as a medium for providing communication links between the

terminal devices

101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation. For example, server 105 may be a server cluster comprised of multiple servers, or the like.

The user may use the

terminal devices

101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. The

terminal devices

101, 102, 103 may be various electronic devices having a display screen, including but not limited to smart phones, tablet computers, portable computers, desktop computers, and the like.

The server 105 may be a server that provides various services. For example, the terminal device 103 (or the terminal device 101 or 102) may obtain webpage data from the server 105, where the webpage data includes visual node data, render the visual node data by a rendering engine based on a browser, display the rendered visual node on the webpage, receive an input operation of a user for the visual node in the webpage, determine a visual node to be edited in the webpage according to the input operation of the user for the visual node in the webpage, add an element masking layer on the visual node to be edited, receive an editing operation of the user for the visual node to be edited on the element masking layer, and edit the visual node to be edited according to the editing operation, so that custom editing of the visual node can be implemented, a personalized demand of the user is met, and user experience is improved.

Fig. 2 schematically shows a flow chart of a visualization node processing method according to an embodiment of the present invention.

As shown in fig. 2, the visualization node processing method may include steps S210 to S240.

In step S210, an input operation of a user for a visualization node in a web page is received.

In step S220, a visual node to be edited in the web page is determined according to an input operation of the user on the visual node in the web page.

In step S230, an element mask layer is added on the visual node to be edited.

In step S240, on the element mask layer, an editing operation of the user for the visual node to be edited is received, and the visual node to be edited is edited according to the editing operation.

The method can receive the input operation of a user for the visual node in the webpage, determine the visual node to be edited in the webpage according to the input operation of the user for the visual node in the webpage, add an element covering layer on the visual node to be edited, receive the editing operation of the user for the visual node to be edited on the element covering layer, and edit the visual node to be edited according to the editing operation, so that the user-defined editing of the visual node can be realized, the personalized requirement of the user is met, and the user experience is improved.

In an embodiment of the present invention, the user input operation on a visualization node in a web page may be an operation of selecting one visualization node of the web page by the user. For example, after a rendering engine of a browser on the terminal renders web page data, a plurality of visualization nodes may be presented on a web page of the browser. In this embodiment, when a user selects a visual node of a web page, an element overlay is automatically added to the visual node, so that the user can edit the visual node on the element overlay.

In one embodiment of the invention, the visual node to be edited in the webpage is determined according to the input operation of the user on the visual node in the webpage. For example, when a user selects a visualization node in a web page, the browser may use the visualization node at the user selected location as the visualization node to be edited.

In one embodiment of the invention, an element covering layer is added on the visual node to be edited. For example, according to the identification of the visual node to be edited, the data corresponding to the identification of the visual node to be edited is determined from the data for generating the element mask layer, and the element mask layer is generated based on the data corresponding to the identification of the visual node to be edited. In this way, the user-defined editing of the visual nodes is realized, the personalized requirements of the user are met, and the user experience is improved.

In an embodiment of the invention, on the element overlay, an editing operation of a user for a visual node to be edited is received, and the visual node to be edited is edited according to the editing operation. For example, the user may click a button on the element mask layer, e.g., a rename button, a delete button, and so forth. And when the user clicks the renaming key, renaming the visual node to be edited according to the editing operation. And when the user clicks a delete key, deleting the visual node to be edited according to the editing operation.

Fig. 3 schematically shows a flow chart of a visualization node processing method according to another embodiment of the present invention.

As shown in fig. 3, before the step S210, the method may further include steps S310 to S330.

In step S310, web page data is received, and the web page data includes visualization node data.

In step S320, the browser-based rendering engine renders the visualization node data.

In step S330, the rendered visualization node is displayed on the webpage, and the visualization node is a visualization node that can be edited.

The method can render the visualization node data based on a rendering engine of the browser, and then display the rendered visualization node on the webpage, wherein the visualization node is an editable visualization node, and the editable visualization node can be generated in the mode, so that the visualization node in the webpage can be edited on a corresponding element overlay layer subsequently.

In one embodiment of the invention, the visualization nodes may be various charts that may be edited. For example, there are many visualization forms of charts, such as echart, d3, and three.js, etc., echart and d3 are suitable for two-dimensional charts, such as line charts, pie charts, etc., and three.js are suitable for three-dimensional scene presentations.

Fig. 4 schematically shows a flow chart of a visualization node processing method according to another embodiment of the present invention. In this embodiment, the visualization node data includes the number of visualization nodes.

As shown in fig. 4, the method may further include step S410 and step S420.

In step S410, when the number of the visualization nodes is greater than a preset threshold, data of a target visualization node is determined from the visualization node data, where the target visualization node is a visualization node having an animation effect.

In step S420, the animation effect corresponding to the target visualization node is cancelled according to the data of the target visualization node.

According to the method, when the number of the visual nodes is larger than a preset threshold value, data of a target visual node are determined from the visual node data, and then an animation effect corresponding to the target visual node is cancelled according to the data of the target visual node, so that the speed of subsequent data rendering can be increased, the time required by webpage rendering is reduced, and the phenomenon of pause during rendering due to the fact that the number of the visual nodes is large is avoided.

In an embodiment of the present invention, the preset threshold may be set according to actual conditions.

In one embodiment of the invention, the animation effect corresponding to the target visualization node is cancelled according to the data of the target visualization node. For example, after the target visualization node is rendered and displayed on the webpage, when the user moves the mouse to the target visualization node, the target visualization node is enlarged, and the animation effect of the target visualization node can be cancelled by using the method, that is, the target visualization node is not enlarged any more, so that the rendering speed is increased.

In an embodiment of the present invention, when the number of the visualization nodes is greater than a preset threshold, which indicates that too many visualization nodes of the web page are present, the rendering time is long, and partial rendering is required, the visualization node data is traversed to determine a target visualization node, where the target visualization node is a visualization node having an animation effect. And (3) cancelling the animation effect corresponding to the target visualization node (for example, when the original mouse moves to a certain visualization node, the visualization node is amplified, and after the animation effect is cancelled, the amplification is not carried out any more), and then initializing the webpage to realize the rendering of the webpage. And when the number of the visualization nodes is less than or equal to a preset threshold value, the webpage is initialized normally to realize the rendering of the webpage.

Fig. 5 schematically shows a flow chart of a visualization node processing method according to another embodiment of the present invention. In this embodiment, the web page data further includes data for generating an element mask layer.

As shown in fig. 5, before the step S230, the method may further include a step S510 and a step S520.

In step S510, data corresponding to the identifier of the visualization node to be edited is determined from the data for generating the element mask layer according to the identifier of the visualization node to be edited.

In step S520, an element mask is generated based on data corresponding to the identification of the visualization node to be edited.

According to the method, the data corresponding to the identification of the visual node to be edited is determined from the data for generating the element mask layer according to the identification of the visual node to be edited, so that the element mask layer of the visual node to be edited can be rapidly generated based on the data corresponding to the identification of the visual node to be edited.

In an embodiment of the present invention, the identification of the visualization node to be edited may be the name of the visualization node to be edited.

In one embodiment of the invention, the element covering layer corresponding to each visual node in the webpage can be generated based on the data for generating the element covering layer, so that a user can edit each visual node on the element covering layer of each visual node.

Fig. 6 schematically shows a flow chart of a visualization node processing method according to another embodiment of the present invention.

As shown in fig. 6, the step 230 may include a step S610 and a step S620.

In step S610, position information of a visualization node to be edited is acquired.

In step S620, an element mask layer is added to the visual node to be edited according to the position information of the visual node to be edited.

The method can acquire the position information of the visual node to be edited, so that the element covering layer can be accurately added to the visual node to be edited corresponding to the visual node to be edited according to the position information of the visual node to be edited, and the element covering layer is effectively prevented from being added to the visual node irrelevant to the visual node.

In one embodiment of the invention, the position information of the visualization node to be edited may be coordinates in the canvas, for example, expressed in (x, y) form. In this embodiment, each visualization node in the network topology map may be rendered on a canvas with fixed height and width, and all the visualization nodes may fix the position of each visualization node and edge by setting (x, y) coordinates.

In an embodiment of the present invention, the method further includes adding a new visualization node to the web page if it is detected that the user clicks a new button in the web page. For example, a new key is arranged in a web page, and after a user clicks the new key, a new visual node can be added in a blank area of the web page, so that the adding mode is more intelligent and flexible.

Fig. 7 schematically shows a flow chart of a visualization node processing method according to another embodiment of the present invention.

As shown in fig. 7, adding a new visualization node to the web page may specifically include step S710 and step S720.

In step S710, a blank area of the web page and a network topology map of the web page are obtained.

In step S720, a new visualization node is added to the blank area of the web page according to the network topology map of the web page and the blank area of the web page.

The method can acquire the blank area of the webpage and the network topological graph of the webpage, and then adds a new visual node in the blank area of the webpage according to the network topological graph of the webpage and the blank area of the webpage, so that the adding mode is more intelligent and flexible.

In an embodiment of the present invention, the blank area of the web page may refer to an area where no visualization node is distributed in the web page. A network topology graph may be used to represent the relationships between all the visualization nodes. In this embodiment, according to the network topology map of the web page and the blank area of the web page, it may be prepared to quickly add a new visualization node to the blank area of the web page suitable for the new visualization node.

Fig. 8 schematically shows a block diagram of a visualization node processing apparatus according to an embodiment of the present invention.

As shown in fig. 8, the visualization node processing apparatus 800 may include a first receiving module 801, a first determining module 802, an element overlay adding module 803, and an editing module 804.

Specifically, the first receiving module 801 is configured to receive an input operation of a user for a visualization node in a web page.

The first determining module 802 is configured to determine a visual node to be edited in a web page according to an input operation of a user on the visual node in the web page.

And the element covering layer adding module 803 is used for adding an element covering layer on the visual node to be edited.

The editing module 804 receives, on the element layer, an editing operation of a user for the visual node to be edited, and edits the visual node to be edited according to the editing operation.

The visual node processing device 800 can receive input operation of a user on visual nodes in a webpage, determine visual nodes to be edited in the webpage according to the input operation of the user on the visual nodes in the webpage, add a layer of element covering layer on the visual nodes to be edited, receive editing operation of the user on the visual nodes to be edited, edit the visual nodes to be edited according to the editing operation, so that customized editing of the visual nodes can be achieved, personalized requirements of the user are met, and user experience is improved.

According to an embodiment of the present invention, the visualization node processing apparatus 800 may be used to implement the visualization node processing method described in the embodiment of fig. 2.

Fig. 9 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention.

As shown in fig. 9, the visualization node processing apparatus 800 may further include a second receiving module 805, a rendering module 806, and a presentation module 807.

Specifically, the second receiving module 805 is configured to receive web page data, where the web page data includes visualization node data.

And a rendering module 806 for rendering the visualization node data by the browser-based rendering engine.

The display module 807 displays the rendered visualization nodes on the web page, where the visualization nodes are editable visualization nodes.

The visualization node processing apparatus 800 may render the visualization node data based on a rendering engine of the browser, and then display the rendered visualization node on the webpage, where the visualization node is an editable visualization node, and in this way, the editable visualization node may be generated, so that the visualization node in the webpage may be subsequently edited on a corresponding element overlay.

According to an embodiment of the present invention, the visualization node processing apparatus 800 may be used to implement the visualization node processing method described in the embodiment of fig. 3.

Fig. 10 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention.

As shown in fig. 10, the visualization node processing apparatus 800 may further include a second determining module 808 and a canceling module 809.

Specifically, the second determining module 808 determines data of a target visualization node from the visualization node data when the number of visualization nodes is greater than a preset threshold, where the target visualization node is a visualization node with an animation effect.

And a canceling module 809, configured to cancel, according to the data of the target visualization node, the animation effect corresponding to the target visualization node.

In this visualization node processing apparatus 800, when the number of visualization nodes is greater than a preset threshold, the data of the target visualization node is determined from the visualization node data, and then according to the data of the target visualization node, the animation effect corresponding to the target visualization node is cancelled, so that the speed in the subsequent rendering of data can be increased, thereby reducing the time required for rendering the webpage, and avoiding the phenomenon of pause in rendering due to the large number of visualization nodes.

According to an embodiment of the present invention, the visualization node processing apparatus 800 may be used to implement the visualization node processing method described in the embodiment of fig. 4.

Fig. 11 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention.

As shown in fig. 11, the visualization node processing apparatus 800 may further include a third determining module 810 and a generating module 811.

Specifically, the third determining module 810 is configured to determine, according to the identifier of the visualization node to be edited, data corresponding to the identifier of the visualization node to be edited from the data used for generating the element masking layer.

The generating module 811 generates an element mask layer based on data corresponding to the identification of the visualization node to be edited.

This visualization node processing apparatus 800 may determine, from the data for generating the element mask layer, data corresponding to the identifier of the visualization node to be edited according to the identifier of the visualization node to be edited, so that the element mask layer of the visualization node to be edited may be rapidly generated based on the data corresponding to the identifier of the visualization node to be edited.

According to an embodiment of the present invention, the visualization node processing apparatus 800 may be used to implement the visualization node processing method described in the embodiment of fig. 5.

Fig. 12 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention.

As shown in fig. 12, the element layer adding module 803 includes a first obtaining module 8031 and a sub-module 8032 of the element layer adding module.

Specifically, the first obtaining module 8031 is configured to obtain position information of a visualization node to be edited.

The sub-module 8032 of the element covering layer adding module is configured to add the element covering layer to the visual node to be edited according to the position information of the visual node to be edited.

The element covering layer adding module 803 can acquire the position information of the visual node to be edited, so that the element covering layer can be accurately added to the corresponding visual node to be edited according to the position information of the visual node to be edited, and the element covering layer is effectively prevented from being added to the visual node which is not related to the element covering layer.

According to an embodiment of the present invention, the element layer adding module 803 may be used to implement the visualization node processing method described in the embodiment of fig. 6.

Fig. 13 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention.

As shown in fig. 13, the visualization node processing apparatus 800 further includes a visualization node adding module 812.

Specifically, the visualization node adding module 812 adds a new visualization node in the web page if it is detected that the user clicks a new button in the web page.

In the visual node processing apparatus 800, if it is detected that the user clicks a new button in the web page, a new visual node is added to the web page, and this addition mode is more intelligent and flexible.

Fig. 14 schematically shows a block diagram of a visualization node processing apparatus according to another embodiment of the present invention.

As shown in fig. 14, the visualization node adding module 812 includes a second obtaining module 8121 and a sub-module 8122 of the visualization node adding module.

Specifically, the second obtaining module 8121 is configured to obtain a blank area of a web page and a network topology map of the web page.

And a sub-module 8122 of the visualization node adding module, configured to add a new visualization node in the blank area of the web page according to the network topology map of the web page and the blank area of the web page.

The visual node adding module 812 can obtain the blank area of the webpage and the network topological graph of the webpage, and then add a new visual node in the blank area of the webpage according to the network topological graph of the webpage and the blank area of the webpage, and the adding mode is more intelligent and flexible.

According to an embodiment of the present invention, the visualization node adding module 812 may be configured to implement the visualization node processing method described in the embodiment of fig. 7.

For details that are not disclosed in the embodiments of the apparatus of the present invention, reference is made to the above-described embodiments of the method for processing a visualization node of the present invention for details that are not disclosed in the embodiments of the apparatus of the present invention, since various modules of the apparatus 800 for processing a visualization node of the present invention can be used to implement the steps of the above-described exemplary embodiments of the method for processing a visualization node described in fig. 2 to 7.

It is understood that the first receiving module 801, the first determining module 802, the element overlay adding module 803, the first obtaining module 8031, the sub-module 8032 of the element overlay adding module, the editing module 804, the second receiving module 805, the rendering module 806, the presenting module 807, the second determining module 808, the canceling module 809, the third determining module 810, the generating module 811, the visualization node adding module 812, the second obtaining module 8121, and the sub-module 8122 of the visualization node adding module may be combined to be implemented in one module, or any one of them may be split into multiple modules. Alternatively, at least part of the functionality of one or more of these modules may be combined with at least part of the functionality of the other modules and implemented in one module. According to an embodiment of the present invention, at least one of the first receiving module 801, the first determining module 802, the element layer adding module 803, the first obtaining module 8031, the sub-module 8032 of the element layer adding module, the editing module 804, the second receiving module 805, the rendering module 806, the presenting module 807, the second determining module 808, the canceling module 809, the third determining module 810, the generating module 811, the visualization node adding module 812, the second obtaining module 8121, and the sub-module 8122 of the visualization node adding module may be implemented at least in part as a hardware circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or any other reasonable manner in which a circuit may be integrated or packaged, or in a suitable combination of software, hardware and firmware implementations. Alternatively, at least one of the first receiving module 801, the first determining module 802, the element layer adding module 803, the first obtaining module 8031, the sub-module 8032 of the element layer adding module, the editing module 804, the second receiving module 805, the rendering module 806, the presentation module 807, the second determining module 808, the canceling module 809, the third determining module 810, the generating module 811, the visualization node adding module 812, the second obtaining module 8121, and the sub-module 8122 of the visualization node adding module may be at least partially implemented as a computer program module, which when executed by a computer, may perform the functions of the respective modules.

Referring now to FIG. 15, shown is a block diagram of a computer system 900 suitable for use in implementing an electronic device of an embodiment of the present invention. The computer system 900 of the electronic device shown in fig. 15 is only an example, and should not bring any limitation to the function and the scope of use of the embodiments of the present invention.

As shown in fig. 15, the computer system 900 includes a Central Processing Unit (CPU)901 that can perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)902 or a program loaded from a storage section 908 into a Random Access Memory (RAM) 903. In the RAM 903, various programs and data necessary for system operation are also stored. The CPU 901, ROM 902, and RAM 903 are connected to each other via a bus 904. An input/output (I/O) interface 905 is also connected to bus 904.

The following components are connected to the I/O interface 905: an input portion 906 including a keyboard, a mouse, and the like; an output section 907 including components such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage portion 908 including a hard disk and the like; and a communication section 909 including a network interface card such as a LAN card, a modem, or the like. The communication section 909 performs communication processing via a network such as the internet. The drive 910 is also connected to the I/O interface 905 as necessary. A removable medium 911 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 910 as necessary, so that a computer program read out therefrom is mounted into the storage section 908 as necessary.

In particular, according to an embodiment of the present invention, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the invention include a computer program product comprising a computer program embodied on a computer-readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 909, and/or installed from the removable medium 911. The above-described functions defined in the system of the present application are executed when the computer program is executed by a Central Processing Unit (CPU) 901.

It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present invention, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The units described in the embodiments of the present invention may be implemented by software, or may be implemented by hardware, and the described units may also be disposed in a processor. Wherein the names of the elements do not in some way constitute a limitation on the elements themselves.

As another aspect, the present application also provides a computer-readable medium, which may be contained in the electronic device described in the above embodiments; or may exist separately without being assembled into the electronic device. The computer readable medium carries one or more programs, which when executed by the electronic device, cause the electronic device to implement the visualization node processing method as described in the above embodiments.

For example, the electronic device may implement the following as shown in fig. 2: in step S210, an input operation of a user for a visualization node in a web page is received. In step S220, a visual node to be edited in the web page is determined according to an input operation of the user on the visual node in the web page. In step S230, an element mask layer is added on the visual node to be edited. In step S240, on the element mask layer, an editing operation of the user for the visual node to be edited is received, and the visual node to be edited is edited according to the editing operation.

It should be noted that although in the above detailed description several modules or units of the device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit, according to embodiments of the invention. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units.

Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, the technical solution according to the embodiment of the present invention can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the embodiment of the present invention.

Other embodiments of the invention will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the invention following, in general, the principles of the invention and including such departures from the present disclosure as come within known or customary practice within the art to which the invention pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the invention being indicated by the following claims.

It will be understood that the invention is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the invention is limited only by the appended claims.

Claims

1. A visualization node processing method is characterized by comprising the following steps:

receiving input operation of a user for a visual node in a webpage;

determining a visual node to be edited in a webpage according to the input operation of the user for the visual node in the webpage;

adding an element covering layer on the visual node to be edited;

and on the element overlay, receiving the editing operation of the user aiming at the visual node to be edited, and editing the visual node to be edited according to the editing operation.

2. The method of claim 1, wherein prior to receiving the user input action for a visualization node in the web page, the method further comprises:

receiving webpage data, wherein the webpage data comprise visual node data;

rendering the visualization node data based on a rendering engine of a browser;

displaying the rendered visualization nodes on the webpage, wherein the visualization nodes are editable visualization nodes.

3. The method of claim 2, wherein the visualization node data includes a number of visualization nodes, the method further comprising:

when the number of the visual nodes is larger than a preset threshold value, determining data of a target visual node from the visual node data, wherein the target visual node is a visual node with an animation effect;

and according to the data of the target visualization node, cancelling the animation effect corresponding to the target visualization node.

4. The method according to claim 2, wherein the web page data further includes data for generating an element mask layer, and before adding a layer of element mask layer on the visual node to be edited, the method further includes:

determining data corresponding to the identifier of the visual node to be edited from the data for generating the element masking layer according to the identifier of the visual node to be edited;

and generating the element covering layer based on the data corresponding to the identification of the visual node to be edited.

5. The method of claim 1, wherein adding a layer of element mask over the visualization node to be edited comprises:

acquiring the position information of the visual node to be edited;

and adding the element covering layer on the visual node to be edited according to the position information of the visual node to be edited.

6. The method of claim 1, further comprising:

and if the fact that the user clicks the newly added key in the webpage is detected, adding a new visual node in the webpage.

7. The method of claim 6, wherein adding the new visualization node in the web page comprises:

acquiring a blank area of the webpage and a network topological graph of the webpage;

and adding the new visual node in the blank area of the webpage according to the network topological graph of the webpage and the blank area of the webpage.

8. A visualization node processing apparatus, comprising:

the first receiving module is used for receiving input operation of a user for a visual node in a webpage;

the first determining module is used for determining a visual node to be edited in a webpage according to the input operation of the user for the visual node in the webpage;

the element covering layer adding module is used for adding an element covering layer on the visual node to be edited;

and the editing module receives the editing operation of the user on the visual node to be edited on the element overlay, and edits the visual node to be edited according to the editing operation.

9. An electronic device, comprising:

one or more processors; and

storage means for storing one or more programs which, when executed by the one or more processors, cause the one or more processors to carry out a method according to any one of claims 1 to 7.

10. A computer-readable medium, on which a computer program is stored, which program, when being executed by a processor, is adapted to carry out the method according to any one of claims 1 to 7.