CN106649628B - Interaction enhancement method and system for webpage visualization area - Google Patents
Interaction enhancement method and system for webpage visualization area Download PDFInfo
- Publication number
- CN106649628B CN106649628B CN201611112709.6A CN201611112709A CN106649628B CN 106649628 B CN106649628 B CN 106649628B CN 201611112709 A CN201611112709 A CN 201611112709A CN 106649628 B CN106649628 B CN 106649628B
- Authority
- CN
- China
- Prior art keywords
- visual
- elements
- visual element
- visual elements
- composite
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
The invention discloses a method and a system for interactive enhancement of a webpage visualization area, wherein the method comprises the following steps: positioning an interaction-enhanced visualization area in a webpage; extracting visual elements to obtain corresponding visual attributes; extracting composite visual elements according to the parent-child relationship; visual element classification, setting visual element groups; carrying out attribute distribution statistics on the visual element group; filtering the visual elements in the visual element group; entering a modification step or performing refiltering; and modifying the HTML attribute to realize the effect of visual highlighting. The system comprises an area positioning module, a first analysis module, a second analysis module, a grouping statistic module, a filtering unloading module, a modification module and an interaction module. The invention provides an interactive enhancement technology without coding, does not depend on the specific form, data and technology of a webpage visualization area, provides basic and universal interactive operation based on the operation of HTML and a document object model, and enhances the visual exploration capability of a user.
Description
Technical Field
The invention relates to the field of visualization and visual analysis based on a webpage, in particular to a webpage visualization area oriented interaction enhancement method and system.
Background
With the development of webpage visualization technology, the visualization on the internet is seen everywhere as an effective information expression form. Interaction is essential for understanding visualization as an important exploratory means of information. However, interaction in web page visualization often needs to be accomplished by writing code. This raises the threshold at which web page visualizations provide interactive functionality, resulting in many web page visualizations providing little to no interactive functionality. The interaction construction method proposed by the existing work is mainly oriented to visual programmers, and provides an interaction function by embedding interaction in the visual generation process through providing a simplified software package which is convenient for writing interaction. Current methods still require code to be written and do not provide interaction for existing visualizations.
Disclosure of Invention
Aiming at the defects in the prior art, the invention aims to provide a method and a system for enhancing interaction of a webpage visualization area, which can achieve the purpose of enhancing the webpage visualization by adopting a universal method in a coding-free mode on the premise of keeping the interaction function of the webpage visualization area.
In order to achieve the purpose, the invention adopts the technical scheme that:
the interaction enhancement method for the webpage visualization area comprises the following steps:
(1) positioning an interaction-enhanced visualization area in a webpage;
(2) extracting visual elements in a document object model corresponding to the positioned visual area, and analyzing tags in HTML aiming at the extracted visual elements to obtain attributes of corresponding visual codes;
(3) extracting a composite visual element according to the parent-child relationship of the visual element in the document object model tree;
(4) classifying the visual elements extracted in the step (2) and/or the composite visual elements extracted in the step (3) according to the tag types of the visual elements in the HTML, and setting the visual elements and/or the composite visual elements belonging to the same tag as a visual element group; carrying out attribute distribution statistics on the visual elements in each visual element group;
(5) filtering the visual elements or the composite visual elements in the corresponding visual element groups through the operation on the visual element groups to generate a filtering result;
(6) entering the step (7);
or the like, or, alternatively,
defining the filtering result in the step (5) as a new visual element group, and repeating the step (5);
(7) and modifying the HTML attribute of the visual element or the composite visual element corresponding to the filtering result, which is related in the webpage, so as to realize the effect of visual prominence.
Further, in the method for interactively enhancing the visual area of the webpage, in the step (1), the step of positioning the interactively enhanced visual area on the webpage is performed in a frame selection mode, and the method specifically comprises the following steps:
1.1) modifying HTML of a webpage, inserting a third-party software library required by interaction enhancement, covering an SVG element on the webpage, and setting a mouse click and drag response event function of the SVG element to intercept click and drag operations of a user on the webpage;
1.2) responding to mouse click and drag actions, and determining the selected area as an interaction enhanced visualization area.
Further, the method for enhancing interaction in the webpage visualization area further includes:
(8) deleting the SVG added in the webpage HTML in the step 1.1) and returning the webpage.
Further, in the interaction enhancement method for the webpage visualization area, in the step (2), the visual element in the document object model corresponding to the positioned visualization area is extracted, and the attribute of the corresponding visual code is obtained by analyzing the tag in the HTML aiming at the extracted visual element; the method comprises the following specific steps:
2.1) traversing elements according to depth priority from a root node according to the hierarchical structure of the document object model tree in the HTML to obtain elements intersected with the rectangular frame set in the step (1);
2.2) removing non-geometric elements from the searched elements, and extracting visual elements related to webpage visualization;
and 2.3) obtaining the corresponding visual attribute and the corresponding value through the extracted HTML attribute of the visual element.
Further, in the interaction enhancement method for the webpage visualization area, in the step (3), the composite visual element is extracted according to the parent-child relationship of the visual element in the document object model tree; the method comprises the following specific steps:
3.1) finding the positions of the visual elements extracted in the step (2) in the document object model and the relationship among the visual elements;
3.2) extracting a certain visual element in the step (2), finding out a visual element which has the same father as the visual element and all children in the father are corresponding to the visual element extracted in the step (2), wherein the certain visual element and the corresponding visual element form a composite visual element;
3.3) merging the visual attributes of all the constituent elements into the visual attribute of the composite visual element.
Further, in the interaction enhancement method for the webpage visualization area, in the step (4), the visual elements extracted in the step (2) and/or the composite visual elements extracted in the step (3) are classified according to the tag types of the visual elements in the HTML, and the visual elements and/or the composite visual elements belonging to the same tag are set as a visual element group; carrying out attribute distribution statistics on the visual elements in each visual element group; the method comprises the following specific steps:
4.1) classifying the visual elements extracted in the step (2) according to the label types of the visual elements; classifying the composite visual elements in the step (3) according to the formed label type set; visual elements and/or composite visual elements belonging to the same label form a visual element group;
4.2) aiming at the same visual element group, carrying out distribution statistics on visual attributes corresponding to the visual elements and/or the composite visual elements in the visual element group: for the category type attribute, carrying out quantity distribution statistics according to categories; for the numerical type attribute, the numerical distribution statistics is carried out after the numerical range is divided according to a certain segmentation granularity.
Further, in the interaction enhancement method for the webpage visualization area, in the step (5), the visual elements and/or the composite visual elements in the corresponding visual element group are filtered through the operation on the visual element group, and a filtering result is generated; wherein the operation on the visual element group comprises:
selecting a visual element group, wherein the visual elements or composite visual elements under the selected visual element group are used as filtering results;
or the like, or, alternatively,
and performing set operation on intersection, union and/or difference sets of different visual element groups, and taking the visual elements or composite visual elements in an operation result as a filtering result.
Further, in the interaction enhancing method for the webpage visualization area, in step (7), the HTML attribute is object transparency in HTML.
Further, in the method for enhancing interaction in the webpage visualization area, in the step, a visualization panel is used as a carrier for enhancing the webpage interaction, and the visualization panel comprises an interaction object panel and an interaction condition setting panel;
the interactive object panel includes: a name display section and an attribute distribution statistics display section;
the name display part is used for displaying the name of each visual element group;
the attribute distribution statistics display part displays attribute distribution statistics of the visual elements and/or the composite visual elements in the filtering result of the step (5);
and the interaction condition setting panel is used for receiving an operation instruction for the visual element group and defining the new visual element group name formed in the step (6).
Further, in the interaction enhancement method for the webpage visualization area, the attribute distribution statistical display part displays the attribute distribution statistical result in the form of a histogram.
Further, the present invention also provides an interaction enhancing system for a webpage visualization area, comprising:
the area positioning module is used for positioning the visualization area with enhanced interaction in the webpage;
the first analysis module is used for extracting visual elements in the document object model corresponding to the positioned visual area and acquiring the attribute of the corresponding visual code by analyzing the tags in the HTML aiming at the extracted visual elements;
the second analysis module is used for extracting the composite visual element according to the parent-child relationship of the visual element in the document object model tree;
the grouping statistic module is used for classifying the visual elements and/or the composite visual elements according to the label types of the visual elements and/or the composite visual elements in the HTML, setting the visual elements and/or the composite visual elements belonging to the same label as a visual element group, performing attribute distribution statistics on the visual elements in each visual element group, and storing the visual element groups and corresponding visual attribute data;
the filtering module is used for filtering the visual elements or the composite visual elements in the corresponding visual element group through the operation on the visual element group to generate a filtering result;
the filtering and unloading module defines the filtering result generated in the filtering module as a new visual element group and unloads the new visual element group to the grouping and counting module;
the modification module is used for modifying the HTML attribute of the visual element or the composite visual element corresponding to the filtering result, which is related in the webpage, so as to realize the effect of visual prominence;
and the interaction module is used for receiving a user instruction and displaying the attribute distribution statistics of the visual elements in the visual element group and the visual elements in the group and/or the composite visual elements.
Further, in the interaction enhancement system for the webpage visualization area, the filtering module comprises an execution module and a read-write module;
the read-write module is used for reading the instruction of the interaction module, analyzing the instruction and transmitting the analysis result to the execution module;
the read-write module is also used for receiving the result feedback of the execution module and transmitting the result feedback to the interaction module to generate a display instruction;
and the execution module is used for reading the visual element group data in the grouping counting module according to the analysis result of the reading and writing module, processing the visual element group and feeding back the processed result to the reading and writing module.
Further, the interaction enhancing system for the webpage visualization area processes the visual element group in a manner that:
selecting a visual element group, wherein the visual elements or composite visual elements under the selected visual element group are used as filtering results;
or the like, or, alternatively,
and performing set operation on intersection, union and/or difference sets of different visual element groups, and taking the visual elements or composite visual elements in an operation result as a filtering result.
The invention has the beneficial effects that: the invention provides an interaction enhancement technology without coding aiming at the common phenomenon of interaction deficiency in webpage visualization. The method does not depend on the specific form, use data and technology of the webpage visualization area, provides basic and universal interactive operation based on the operation of the HTML and the document object model on the premise of not influencing the interaction in the existing visualization, enhances the exploration capability of a user on the visualization, and provides understanding of information.
Drawings
FIG. 1 is a flowchart of a method for enhancing interaction in a visualized area of a web page according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of an interactive object panel of a web page and a visualization panel in accordance with an embodiment of the present invention;
FIG. 3 is a schematic diagram of a web page and an interactive object panel after defining the filtering result of step (5) as a new visual element group according to an embodiment of the present invention;
FIG. 4 is a diagram of an interactive condition setting panel according to an embodiment of the present invention;
FIG. 5 is a snapshot view of interaction enhancement for an existing visualization in an embodiment;
fig. 6 is a block diagram of an interaction enhancing system for a web page visualization area according to an embodiment of the present invention.
Fig. 7 is a block diagram of a filtering module according to an embodiment of the present invention.
Detailed Description
The invention is described in further detail below with reference to the drawings and the detailed description.
Fig. 1 shows a flowchart of a method for enhancing interaction in a web page visualization area according to an embodiment of the present invention, where the interaction enhancement provides a basic and general interaction technology on the premise of ensuring an interaction function in an existing visualization, and solves a defect of insufficient interaction in the existing visualization, and specifically includes the following steps:
1.1) modifying HTML of a webpage, inserting a third-party software library required by interaction enhancement, and covering an SVG element on the webpage, wherein the SVG element can cover a part of page or all pages; setting a mouse click and drag response event function of the SVG element to intercept click and drag operations of a user on a webpage; 1.2) responding to mouse click and drag actions, and determining the selected area as an interaction enhanced visualization area. Positioning an interaction enhanced visualization area in a webpage in the step (1) through the substeps, S001; as shown in the left part of the pages in fig. 2, fig. 3, and fig. 5, all are web pages selected by a mouse box, wherein the area framed by the rectangular box is the interaction-enhanced visualization area located on the web page according to the mouse action of the user.
In this embodiment, the third-party software library required for interaction enhancement refers to a third-party software library required for generating a visualization panel and SVG elements covering a visualization area of a web page, and a person skilled in the art selects from the prior art according to actual needs, for example: boottrap, d3.js (to illustrate here, the name of one or more third-party software libraries is written).
2.1) traversing elements according to depth priority from a root node (namely a body object in HTML) according to the hierarchical structure of the document object model tree in the HTML to obtain elements of the interaction-enhanced visual area positioned in the step (1); 2.2) removing non-geometric elements (such as < g >, < video > objects and the like) from the searched elements, and extracting visual elements related to webpage visualization; and 2.3) obtaining the corresponding visual attribute and the corresponding value through the extracted HTML attribute of the visual element. The substep (2) extracts the visual element in the document object model corresponding to the located visual region, and obtains the corresponding visual code attribute (such as color, size, etc.) by analyzing the tag in the HTML for the extracted visual element, S002.
3.1) finding the positions of the visual elements extracted in the step (2) in the document object model and the relationship among the visual elements; 3.2) extracting a certain visual element in the step (2), finding out a visual element which has the same father as the visual element and all children in the father are corresponding to the visual element extracted in the step (2), wherein the certain visual element and the corresponding visual element form a composite visual element; 3.3) merging the visual attributes of all the constituent elements into the visual attribute of the composite visual element. Through the steps 3.1), 3.2) and 3.3), the step (3) can be realized to extract the composite visual element according to the parent-child relationship of the visual element in the document object model tree so as to represent the composite visual design S003. By compositing the individual visual elements into a composite visual element, it is possible to cope with the case where data is expressed in a combination of a plurality of visual elements in the extracted visualization area. For example, two components in one data item are represented by two circular icons.
Through the steps S002 and S003, the visual elements or the composite visual elements in the visual area which is interactively enhanced with the frame in the HTML are extracted, so that the visual enhancement effect can be realized by modifying the attributes of the visual elements or the composite visual elements.
Based on the convenient consideration of selection, the embodiment further provides a grouping step: 4.1) classifying the visual elements extracted in the step (2) according to the label types (Tag) of the visual elements; classifying the composite visual elements in the step (3) according to the formed label type set; visual elements and/or composite visual elements belonging to the same label form a visual element group; 4.2) performing distribution statistics (for example, obtaining color distribution statistics) on the visual attributes corresponding to the visual elements and/or the composite visual elements in the visual element group aiming at the same visual element group: for numerical attributes, such as radius, according to a certain segmentation granularity (default of 20), the number distribution statistics is performed after the numerical range is divided, and for category attributes, the number distribution statistics is performed according to categories. The substep (4) is used for classifying the visual elements extracted in the step (2) and/or the composite visual elements extracted in the step (3) according to the tag types of the visual elements in the HTML, and the visual elements and/or the composite visual elements belonging to the same tag are set as visual element groups; and performing attribute distribution statistics on the visual elements in each visual element group.
(5) Filtering the visual elements or the composite visual elements in the corresponding visual element group through the operation on the visual element group to generate a filtering result, S005; wherein the operations of the respective visual element groups comprise: 1. selecting a visual element group, wherein the visual elements or composite visual elements under the selected visual element group are used as filtering results; 2. and performing set operation on intersection, union and/or difference sets of different visual element groups, and taking the visual elements or composite visual elements in an operation result as a filtering result. One of the above two operations on the visual element group is optional. And brushing the corresponding interested regions on the visual attributes by a direct selection mode, for example, brushing a specific color range on the color attributes of the visual elements and filtering out the graphic elements with specific colors. Then filtering operations with different attributes are combined by traffic calculation, and visual elements meeting various conditions are screened out;
(6) entering step (7), so that the filtering result of step (5) can directly enter the modification step as the finally determined visual element for visual interaction enhancement (i.e. the part directly entering step 7 in step 6), so as to realize the visual enhancement effect; alternatively, the filtering result in step (5) is defined as a new visual element group, and step (5) is repeated to perform re-filtering, thereby implementing a re-interactive search function, S006.
For the convenience of intuitive selection, the present embodiment uses a visualization panel as a carrier for webpage interaction enhancement, wherein the visualization panel includes an interaction object panel (as shown in fig. 2, fig. 3 and the right half of fig. 5) and an interaction condition setting panel (as shown in fig. 4); the interactive object panel includes: a name display section (shown in the upper right portion of fig. 2, 3, and 5) and an attribute distribution statistics display section (shown in the lower right portion of fig. 2, 3, and 5); the name display part is used for displaying the names of the classified visual element groups. Each visual element group can be visualized as icon display, the label names of the visual element groups and the number of elements in the groups are given in the icons, and the selection of the corresponding visual element group can be realized by clicking the icons. The attribute distribution statistics display part displays attribute distribution statistics of the visual elements and/or the composite visual elements in the filtering result of the step (5); and the interaction condition setting panel is used for receiving an operation instruction for the visual element group and defining the new visual element group name formed in the step (6). For the convenience of observation, the attribute distribution statistics display section displays the attribute distribution statistics result in the form of a histogram.
And (5) the user obtains a filtering result by operating the corresponding visual element group according to the interested region, and modifies the relevant HTML attribute of the visual element or the composite visual element in the webpage corresponding to the filtering result through the step (7) to realize the effect of the visual prominence, S007. In this embodiment, the above-mentioned related HTML attribute is object transparency in HTML, and the specific modification manner may be: and setting the transparency of the object of the visual element and/or the composite visual element which is not in the filtering result to be high (default 0.8), and setting the transparency of the visual element which is not selected to be high, so that the visual element which is not selected becomes transparent and fades out of the picture, thereby achieving the effect of highlighting the selected object.
(8) Deleting the SVG added in the webpage HTML in the step 1.1), returning the webpage, and using the self-contained interactive function of the existing interface, S008.
As shown in fig. 6, the visualized interaction enhancing system for the web page performs the above steps, the area positioning module performs interaction enhancing initialization on the web page according to the user operation, inserts a third-party software library into the web page HTML, and detects an interactive SVG object; and then, according to the circle selection action of the mouse of the user, determining the area where the existing visualization is located, and positioning the visualization area with enhanced interaction in the webpage. And the first analysis module searches visual elements in the area in the document object model according to the circled area and depth priority, extracts the visual elements in the document object model corresponding to the positioned visual area, and obtains the corresponding visual coding attribute by analyzing the tags in the HTML aiming at the extracted visual elements. And the second analysis module extracts the composite visual element based on the parent-child relationship of the visual element in the document object model. Visual elements are grouped by category, and then the distribution of the number of attributes within the group is calculated. The grouping statistic module classifies the visual elements and/or the composite visual elements according to the label types of the visual elements and/or the composite visual elements in the HTML, the visual elements and/or the composite visual elements belonging to the same label are set as visual element groups, and the grouping statistic module is further used for carrying out attribute distribution statistics on the visual elements in each visual element group. And the interaction module visualizes the visual elements and/or the composite visual elements and the attribute distribution thereof as an interaction panel. The interaction module receives a user instruction and transmits the instruction to the filtering module. The filtering module is used for identifying the operation of the user on the visual element group according to the instruction transmitted by the interaction module, and filtering the visual elements or the composite visual elements in the corresponding visual element group to generate a filtering result; the filtering module can also define the generated filtering result as a new visual element group according to the user operation instruction so as to realize filtering again. And the final modification module modifies the visual element corresponding to the final filtering result or the HTML attribute corresponding to the composite visual element in the webpage to realize the effect of visual prominence.
As shown in fig. 7, the filtering module includes an execution module and a read/write module; the read-write module reads the user instruction received by the interaction module, analyzes the instruction and transmits the analysis result to the execution module; and the execution module is used for processing the visual element group according to the analysis result of the read-write module and feeding back the processed result to the read-write module. And after receiving the result feedback of the execution module, the read-write module generates a display instruction by the result feedback code and transmits the display instruction to the interaction module to finish the filtering process.
FIG. 2 illustrates an interaction-enhanced visualization panel in an embodiment of the present invention. The left dashed box represents the circled area in the visualized webpage, the right visualization panel comprises two parts, the upper part is the label visualization for extracting the element group, and the label gives the label name of the element and the number of the elements in the group. The lower part is the visual property distribution of the selected element group, where the circular element group is selected, including the distribution of properties of radius, color, position, etc. The current state is that the visual element group labeled "circle" is selected.
FIG. 3 illustrates a save interaction results view in accordance with an embodiment of the present invention. And (4) according to the selection of the user, defining the filtering result of the step (5) as a new visual element group with a label of 'group', and storing the new visual element group into an element group label at the upper part of the panel.
Fig. 4 is a view showing an interactive condition setting panel according to an embodiment of the present invention. The view comprises several icons of new tag group names, operation expressions, operation objects and operation symbols, a user finishes the designation of the operation objects and operators in the set operation through clicking interactive operation, and the system acquires the designation and generates an operation result. The operation object is the visual element group which is extracted or constructed, and the operator is the operation of three types of intersection, union and difference in the set operation. The operation result can be saved as a new visual element group.
FIG. 5 is a snapshot view showing interaction enhancement for an existing visualization in an embodiment of the present invention, which is an interaction enhancement for a visualization area of a web page (here, a report on the New York Times using a visualization format). The visual elements and the panel of the attribute distribution of the visual elements in the visual form are displayed through the visualization of the circle-selected specific area, the condition range of the visual elements is set from multiple attributes in the panel, the interesting visual elements are screened out, and the visual elements are dynamically highlighted in the existing visualization, so that the user is helped to quickly position the elements. In the figure, the visual element or the composite visual element in the visual element group named as circle is taken as a modification object, the transparency of the object is modified, the highlighting of the corresponding graph is completed, and the visualization enhancement is realized.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is intended to include such modifications and variations.
Claims (12)
1. The interaction enhancement method for the webpage visualization area comprises the following steps:
(1) positioning an interactive enhanced visualization area in a webpage in a frame selection mode;
(2) extracting visual elements in a document object model corresponding to the positioned visual area, and analyzing tags in HTML aiming at the extracted visual elements to obtain attributes of corresponding visual codes;
(3) extracting a composite visual element according to the parent-child relationship of the visual element in the document object model tree;
(4) classifying the visual elements extracted in the step (2) and/or the composite visual elements extracted in the step (3) according to the tag types of the visual elements in the HTML, and setting the visual elements and/or the composite visual elements belonging to the same tag as a visual element group; carrying out attribute distribution statistics on the visual elements in each visual element group;
(5) filtering the visual elements or the composite visual elements in the corresponding visual element groups through the operation on the visual element groups to generate a filtering result;
(6) entering the step (7);
or the like, or, alternatively,
defining the filtering result in the step (5) as a new visual element group, and repeating the step (5);
(7) modifying the HTML attribute of the visual element or the composite visual element corresponding to the filtering result, which is related in the webpage, so as to realize the effect of visual prominence;
in the step (3), extracting a composite visual element according to the parent-child relationship of the visual element in the document object model tree; the method comprises the following specific steps:
3.1) finding the positions of the visual elements extracted in the step (2) in the document object model and the relationship among the visual elements;
3.2) extracting a certain visual element in the step (2), finding out a visual element which has the same father as the visual element and all children in the father are corresponding to the visual element extracted in the step (2), and forming a composite visual element by the certain visual element and the corresponding visual element;
3.3) merging the visual attributes of all the constituent elements into the visual attribute of the composite visual element.
2. The method for enhancing interaction in a visualization area of a web page as claimed in claim 1, wherein in the step (1), the visualization area for enhancing interaction is located on the web page by means of frame selection, and the specific steps include:
1.1) modifying HTML of a webpage, inserting a third-party software library required by interaction enhancement, covering an SVG element on the webpage, and setting a mouse click and drag response event function of the SVG element to intercept click and drag operations of a user on the webpage;
1.2) responding to mouse click and drag actions, and determining the selected area as an interaction enhanced visualization area.
3. The method for enhancing interaction with a visualization area of a web page as recited in claim 2, further comprising:
(8) deleting the SVG added in the webpage HTML in the step 1.1) and returning the webpage.
4. The method for enhancing interaction of visual areas of web pages according to claim 1, wherein in the step (2), the visual elements in the document object model corresponding to the located visual areas are extracted, and for the extracted visual elements, the attributes of the corresponding visual codes are obtained by analyzing the tags in the HTML; the method comprises the following specific steps:
2.1) traversing elements according to depth priority from a root node according to the hierarchical structure of the document object model tree in the HTML to obtain elements intersected with the rectangular frame set in the step (1);
2.2) removing non-geometric elements from the searched elements, and extracting visual elements related to webpage visualization;
and 2.3) obtaining the corresponding visual attribute and the corresponding value through the extracted HTML attribute of the visual element.
5. The method for enhancing interaction in the visual area of a web page according to claim 1, wherein in step (4), the visual elements extracted in step (2) and/or the composite visual elements extracted in step (3) are classified according to their tag types in the HTML, and the visual elements and/or the composite visual elements belonging to the same tag are set as a visual element group; carrying out attribute distribution statistics on the visual elements in each visual element group; the method comprises the following specific steps:
4.1) classifying the visual elements extracted in the step (2) according to the label types of the visual elements; classifying the composite visual elements in the step (3) according to the formed label type set; visual elements and/or composite visual elements belonging to the same label form a visual element group;
4.2) aiming at the same visual element group, carrying out distribution statistics on visual attributes corresponding to the visual elements and/or the composite visual elements in the visual element group: for the category type attribute, carrying out quantity distribution statistics according to categories; for the numerical type attribute, according to a certain segmentation granularity, carrying out quantity distribution statistics after separating the numerical range;
6. the method for enhancing interaction in the visual area of a web page according to claim 1, wherein in the step (5), the visual elements and/or the composite visual elements in the corresponding visual element group are filtered by operating the visual element group, so as to generate a filtering result; wherein the operation on the visual element group comprises:
selecting a visual element group, wherein the visual elements or composite visual elements under the selected visual element group are used as filtering results;
or the like, or, alternatively,
and performing set operation on intersection, union and/or difference sets of different visual element groups, and taking the visual elements or composite visual elements in an operation result as a filtering result.
7. The method for enhancing interaction in the visualization area of a web page as recited in claim 1, wherein in the step (7), the HTML attribute is object transparency in HTML.
8. The method for enhancing interaction in the visual area of web pages according to any one of claims 1 to 7, wherein in the above steps, a visual panel is used as a carrier for web page interaction enhancement, and the visual panel comprises an interaction object panel and an interaction condition setting panel;
the interactive object panel includes: a name display section and an attribute distribution statistics display section;
the name display part is used for displaying the name of each visual element group;
the attribute distribution statistics display part displays attribute distribution statistics of the visual elements and/or the composite visual elements in the filtering result of the step (5);
and the interaction condition setting panel is used for receiving an operation instruction for the visual element group and defining the new visual element group name formed in the step (6).
9. The method for enhancing interaction with a visualization area of a web page according to claim 8, wherein the attribute distribution statistics display section displays the attribute distribution statistics result in the form of a histogram.
10. The interaction enhancement system of the webpage visualization area is characterized by comprising the following components:
the area positioning module is used for positioning the visualization area with enhanced interaction in the webpage in a frame selection mode;
the first analysis module is used for extracting visual elements in the document object model corresponding to the positioned visual area and acquiring the attribute of the corresponding visual code by analyzing the tags in the HTML aiming at the extracted visual elements;
the second analysis module is used for extracting the composite visual element according to the parent-child relationship of the visual element in the document object model tree;
the grouping statistic module is used for classifying the visual elements and/or the composite visual elements according to the label types of the visual elements and/or the composite visual elements in the HTML, setting the visual elements and/or the composite visual elements belonging to the same label as a visual element group, performing attribute distribution statistics on the visual elements in each visual element group, and storing the visual element groups and corresponding visual attribute data;
the filtering module is used for filtering the visual elements or the composite visual elements in the corresponding visual element group through the operation on the visual element group to generate a filtering result;
the filtering and unloading module defines the filtering result generated in the filtering module as a new visual element group and unloads the new visual element group to the grouping and counting module;
the modification module is used for modifying the HTML attribute of the visual element or the composite visual element corresponding to the filtering result, which is related in the webpage, so as to realize the effect of visual prominence;
the interaction module is used for receiving a user instruction and displaying the attribute distribution statistics of the visual element groups and the visual elements in the groups and/or the composite visual elements;
in the step (3), extracting a composite visual element according to the parent-child relationship of the visual element in the document object model tree; the method comprises the following specific steps:
3.1) finding the positions of the visual elements extracted in the step (2) in the document object model and the relationship among the visual elements;
3.2) extracting a certain visual element in the step (2), finding out a visual element which has the same father as the visual element and all children in the father are corresponding to the visual element extracted in the step (2), and forming a composite visual element by the certain visual element and the corresponding visual element;
3.3) merging the visual attributes of all the constituent elements into the visual attribute of the composite visual element.
11. The system for enhancing interaction with a visualization area on a web page of claim 10, wherein the filtering module comprises an execution module and a read-write module;
the read-write module is used for reading the instruction of the interaction module, analyzing the instruction and transmitting the analysis result to the execution module;
the read-write module is also used for receiving the result feedback of the execution module, transmitting the result feedback to the modification module or the filtering dump module, and generating a display instruction to transmit the result feedback to the interaction module;
and the execution module is used for reading the visual element group data in the grouping counting module according to the analysis result of the reading and writing module, processing the visual element group and feeding back the processed result to the reading and writing module.
12. The system for enhancing interaction with a visualization area on a web page of claim 11, wherein the set of visual elements is processed in a manner comprising:
selecting a visual element group, wherein the visual elements or composite visual elements under the selected visual element group are used as filtering results;
or the like, or, alternatively,
and performing set operation on intersection, union and/or difference sets of different visual element groups, and taking the visual elements or composite visual elements in an operation result as a filtering result.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611112709.6A CN106649628B (en) | 2016-12-06 | 2016-12-06 | Interaction enhancement method and system for webpage visualization area |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611112709.6A CN106649628B (en) | 2016-12-06 | 2016-12-06 | Interaction enhancement method and system for webpage visualization area |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106649628A CN106649628A (en) | 2017-05-10 |
| CN106649628B true CN106649628B (en) | 2020-08-25 |
Family
ID=58818898
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611112709.6A Active CN106649628B (en) | 2016-12-06 | 2016-12-06 | Interaction enhancement method and system for webpage visualization area |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106649628B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113254812B (en) * | 2021-06-17 | 2021-09-28 | 浙江口碑网络技术有限公司 | Object set generation method and device |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101488143A (en) * | 2008-01-16 | 2009-07-22 | 重庆安软信息科技有限公司 | Novel web application and local application interaction mode |
| CN101984434A (en) * | 2010-11-16 | 2011-03-09 | 东北大学 | Webpage data extracting method based on extensible language query |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080007568A1 (en) * | 2006-07-06 | 2008-01-10 | International Business Machines Corporation | System and method for visualization and interaction with spatial objects |
-
2016
- 2016-12-06 CN CN201611112709.6A patent/CN106649628B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101488143A (en) * | 2008-01-16 | 2009-07-22 | 重庆安软信息科技有限公司 | Novel web application and local application interaction mode |
| CN101984434A (en) * | 2010-11-16 | 2011-03-09 | 东北大学 | Webpage data extracting method based on extensible language query |
Non-Patent Citations (3)
| Title |
|---|
| Filter+：Interaction Argument for Web-based Visualizations;Min Lu et al;《IEEE VIS 2016 Posters》;20161028;1-2 * |
| 地理空间数据可视化中的过滤;陆旻等;《计算机辅助设计与图形学学报》;20160531;第28卷(第5期);702-711 * |
| 基于网页分析的可视化系统;毛莉娜等;《广东技术师范学院学报（自然科学）》;20160110;第2015年卷(第11期);34-38 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106649628A (en) | 2017-05-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| McNabb et al. | Survey of Surveys (SoS)‐mapping the landscape of survey papers in information visualization | |
| US20230367841A1 (en) | System and method for implementing containers which extract and apply semantic page knowledge | |
| Van Den Elzen et al. | Baobabview: Interactive construction and analysis of decision trees | |
| US11860968B2 (en) | System and method for integrating user feedback into website building system services | |
| US20140189576A1 (en) | System and method for visual matching of application screenshots | |
| JP2019522838A (en) | Segmenting content displayed on a computing device based on pixels in the screenshot image that captures the content | |
| US20180004823A1 (en) | System and method for data profile driven analytics | |
| CN109976735B (en) | Knowledge graph algorithm application platform based on web visualization | |
| CN103714450A (en) | Natural language metric condition alerts generation | |
| CN103714114A (en) | Natural language metric condition alerts orchestration | |
| KR101773574B1 (en) | Method for chart visualizing of data table | |
| Krause et al. | Seekaview: An intelligent dimensionality reduction strategy for navigating high-dimensional data spaces | |
| Healey et al. | Interest driven navigation in visualization | |
| US20190065911A1 (en) | Media Intelligence Automation System | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| KR102075111B1 (en) | Ui function test system and method | |
| CN109242042B (en) | Picture training sample mining method and device, terminal and computer readable storage medium | |
| CN106649628B (en) | Interaction enhancement method and system for webpage visualization area | |
| WO2023093850A1 (en) | Component identification method and apparatus, electronic device, and storage medium | |
| CN107016044A (en) | A kind of method and device of data visualization processing | |
| JPH0713727A (en) | Information display unit | |
| CN112748917A (en) | Chart display method and device | |
| Chen et al. | ADOSMNet: a novel visual affordance detection network with object shape mask guided feature encoders | |
| CN113283248B (en) | Automatic natural language generation method and device for scatter diagram description | |
| El Meseery et al. | Geo-Coordinated Parallel Coordinates (GCPC): A case study of environmental data analysis |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |