网页可视化区域的交互增强方法及系统技术方案

本发明专利技术公开了网页可视化区域的交互增强方法及系统，方法包括以下步骤：在网页中定位交互增强的可视化区域；提取视觉元素，获得对应的视觉属性；根据父子关系，提取复合视觉元素；视觉元素分类，设定视觉元素组；对视觉元素组进行属性分布统计；对视觉元素组中的视觉元素进行过滤；进入修改步骤或进行再过滤；修改HTML属性，实现视觉突出的效果。系统包括区域定位模块、第一分析模块、第二分析模块、分组统计模块、过滤模块、过滤转存模块、修改模块和交互模块。本发明专利技术提供了毋需编码的交互增强技术，不依赖于网页可视化区域的具体形式、数据和技术，基于HTML和文档对象模型的操作，提供了基本、通用的交互操作，增强了用户对可视化的探索能力。

Method and system for interactive enhancement of web page visual region

The invention discloses a visual interactive web area enhancement method and system. The method comprises the following steps: positioning visualization of regional interaction enhanced in the page; extraction of visual elements, visual attributes corresponding; according to the relationship between father and son, extraction of complex visual elements; visual elements, visual elements attribute set group; statistical distribution of visual elements group; filtering the visual elements of visual elements in the group; to amend steps or re filtering; modify the HTML attribute, realize the visual prominent effect. The system comprises a regional positioning module, a first analysis module, a second analysis module, a grouping statistical module, a filtering module, a filtering and storing module, a modification module and an interactive module. The present invention provides interactive encoding without enhancement techniques, does not depend on the \visual region specific form, data and technology, and the HTML document object model based on interactive operation, provides basic general, enhance the ability to explore the user for visualization.

【技术实现步骤摘要】

本专利技术涉及基于网页的可视化与可视分析领域，具体涉及一种面向网页可视化区域的交互增强方法及系统。
技术介绍
随着网页可视化技术的发展，互联网上的可视化作为一种有效的信息表达形式随处可见。交互作为信息的重要探索手段，对于理解可视化是不可或缺的。然而网页可视化中的交互常常需要通过编写代码来实现。这提高了网页可视化提供交互功能的门槛，从而导致很多网页可视化提供很少甚至没有交互功能。已有工作提出的交互构建的方法，主要面向可视化编程人员，通过提供简化、便于编写交互的软件包在可视化的生成过程中嵌入交互，以提供交互功能。目前的方法仍要求编写代码，且不能针对既有的可视化提供交互。
技术实现思路
针对现有技术中存在的缺陷，本专利技术的目的在于提供一种网页可视化区域的交互增强方法及系统，提供通过毋需编码的方式，在保留网页可视化区域交互功能的前提下，采用通用方法达到增强页面可视化的目的。为实现上述目的，本专利技术采用的技术方案为：网页可视化区域的交互增强方法，包括以下步骤：(1)在网页中定位交互增强的可视化区域；(2)提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性；(3)根据视觉元素在文档对象模型树中的父子关系，提取复合视觉元素；(4)将步骤(2)中提取的视觉元素和/或步骤(3)中提取的复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组；对每个视觉元素组中的视觉元素进行属性分布统计；(5)通过对视觉元素组的操作对相应视觉元素组中的视觉元素或复合视觉元素进行过滤，生成过滤结果；(6)进入步骤(7)；或，将步骤(5)中的过滤结果定义为新的视觉元素组，重复步骤(5)；(7)修改过滤结果对应的视觉元素或复合视觉元素在网页中相关的HTML属性，实现视觉突出的效果。进一步地，上述网页可视化区域的交互增强方法，步骤(1)中，在网页上定位交互增强的可视化区域通过框选的方式进行，其具体步骤包括：1.1)修改网页的HTML，插入交互增强所需的第三方软件库，在网页上覆盖一个的SVG元素，设定该SVG元素的鼠标点击、拖拽响应事件函数，用以截获用户在网页上的点击及拖拽操作；1.2)响应鼠标点击、拖拽的动作，确定框选的区域为交互增强的可视化区域。进一步地，上述网页可视化区域的交互增强方法，还包括：(8)删除步骤1.1)中的在网页HTML中添加的SVG，退回网页。进一步地，上述网页可视化区域的交互增强方法，步骤(2)中，提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性；具体步骤包括：2.1)按照HTML中文档对象模型树的层次结构，由根节点开始，按深度优先遍历元素，获得与步骤(1)中设定的矩形框相交的元素；2.2)对查找到的元素中去除非几何元素，提取与网页可视化相关的视觉元素；2.3)通过提取的视觉元素的HTML属性，获得对应的视觉属性及对应取值。进一步地，上述网页可视化区域的交互增强方法，步骤(3)中，根据视觉元素在文档对象模型树中的父子关系，提取复合视觉元素；其具体步骤包括：3.1)找到步骤(2)中提取的各视觉元素在文档对象模型中的位置以及相互之间的关系；3.2)抽取步骤(2)中某视觉元素，找到与该视元素具有相同父亲、并且该父亲中的所有孩子均是步骤(2)中提取的视觉元素的对应的视觉元素，该某视觉元素与对应视觉元素组成复合视觉元素；3.3)将所有组成元素的视觉属性合并为复合视觉元素的视觉属性。进一步地，上述网页可视化区域的交互增强方法，步骤(4)中将步骤(2)中提取的视觉元素和/或步骤(3)中提取的复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组；对每个视觉元素组中的视觉元素进行属性分布统计；其具体步骤为：4.1)将步骤(2)中提取的视觉元素按其标签类型进行分类；将步骤(3)中的复合视觉元素，按照组成的标签类型集合进行分类；属于同一标签下的视觉元素和/或复合视觉元素组成视觉元素组；4.2)针对同一视觉元素组，将该视觉元素组中视觉元素和/或复合视觉元素对应的视觉属性进行分布统计：对于类别型属性，按照类别进行数量分布统计；对于数值型属性，按照一定分割粒度，对数值范围分隔后进行数量分布统计。进一步地，上述网页可视化区域的交互增强方法，步骤(5)中，通过对视觉元素组的操作对相应视觉元素组中的视觉元素和/或复合视觉元素进行过滤，生成过滤结果；其中对视觉元素组的操作包括：选择视觉元素组，该被选择的视觉元素组下的视觉元素或复合视觉元素均作为过滤结果；或，对不同视觉元素组取交集、并集和/或差集的集合运算，将运算结果中的视觉元素或复合视觉元素作为过滤结果。进一步地，上述网页可视化区域的交互增强方法，步骤(7)中，所述HTML属性为在HTML中的对象透明度。进一步地，上述网页可视化区域的交互增强方法，上述步骤中，以可视化面板作为网页交互增强的载体，所述可视化面板包括交互对象面板和交互条件设定面板；所述交互对象面板包括：名称显示部分和属性分布统计显示部分；所述名称显示部分用于显示各视觉元素组的名称；所述属性分布统计显示部分显示步骤(5)的过滤结果中的视觉元素和/或复合视觉元素的属性分布统计；所述交互条件设定面板用于接收对视觉元素组的操作指令和定义步骤(6)中形成的新的视觉元素组名称。进一步地，上述网页可视化区域的交互增强方法，所述属性分布统计显示部分以直方图的形式显示属性分布统计结果。进一步地，本专利技术还提供了网页可视化区域的交互增强系统，包括：区域定位模块，用于在网页中定位交互增强的可视化区域；第一分析模块，用于提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性；第二分析模块，用于根据视觉元素在文档对象模型树中的父子关系，提取复合视觉元素；分组统计模块，用于将视觉元素和/或复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组，还用于对每个视觉元素组中的视觉元素进行属性分布统计，并且存储视觉元素组及对应的视觉属性数据；过滤模块，用于通过对视觉元素组的操作对相应视觉元素组中的视觉元素或复合视觉元素进行过滤，生成过滤结果；过滤转存模块，将过滤模块中生成的过滤结果定义为新的视觉元素组，转存至分组统计模块；修改模块，用于修改过滤结果对应的视觉元素或复合视觉元素在网页中相关的HTML属性，实现视觉突出的效果；交互模块，用于接收用户指令，也用于显示视觉元素组及组中视觉元素和/或复合视觉元素的属性分布统计。进一步地，上述网页可视化区域的交互增强系统，所述过滤模块包括执行模块和读写模块；读写模块，用于读取交互模块的指令，解析该指令并将解析结果传递给执行模块；读写模块，还用于接收执行模块的结果反馈，并将该结果反馈生成显示指令传递给交互模块；执行模块，用于根据读写模块的解析结果读取分组统计模块中的视觉元素组数据并对视觉元素组进行处理，并将处理后的结果反馈传递给读写本文档来自技高网...

【技术保护点】
网页可视化区域的交互增强方法，包括以下步骤：(1)在网页中定位交互增强的可视化区域；(2)提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性；(3)根据视觉元素在文档对象模型树中的父子关系，提取复合视觉元素；(4)将步骤(2)中提取的视觉元素和/或步骤(3)中提取的复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组；对每个视觉元素组中的视觉元素进行属性分布统计；(5)通过对视觉元素组的操作对相应视觉元素组中的视觉元素或复合视觉元素进行过滤，生成过滤结果；(6)进入步骤(7)；或，将步骤(5)中的过滤结果定义为新的视觉元素组，重复步骤(5)；(7)修改过滤结果对应的视觉元素或复合视觉元素在网页中相关的HTML属性，实现视觉突出的效果。

【技术特征摘要】
1.网页可视化区域的交互增强方法，包括以下步骤：(1)在网页中定位交互增强的可视化区域；(2)提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性；(3)根据视觉元素在文档对象模型树中的父子关系，提取复合视觉元素；(4)将步骤(2)中提取的视觉元素和/或步骤(3)中提取的复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组；对每个视觉元素组中的视觉元素进行属性分布统计；(5)通过对视觉元素组的操作对相应视觉元素组中的视觉元素或复合视觉元素进行过滤，生成过滤结果；(6)进入步骤(7)；或，将步骤(5)中的过滤结果定义为新的视觉元素组，重复步骤(5)；(7)修改过滤结果对应的视觉元素或复合视觉元素在网页中相关的HTML属性，实现视觉突出的效果。2.如权利要求1所述的网页可视化区域的交互增强方法，其特征在于，步骤(1)中，在网页上定位交互增强的可视化区域通过框选的方式进行，其具体步骤包括：1.1)修改网页的HTML，插入交互增强所需的第三方软件库，在网页上覆盖一个的SVG元素，设定该SVG元素的鼠标点击、拖拽响应事件函数，用以截获用户在网页上的点击及拖拽操作；1.2)响应鼠标点击、拖拽的动作，确定框选的区域为交互增强的可视化区域。3.如权利要求2所述的网页可视化区域的交互增强方法，其特征在于，还包括：(8)删除步骤1.1)中的在网页HTML中添加的SVG，退回网页。4.如权利要求1所述的网页可视化区域的交互增强方法，其特征在于，步骤(2)中，提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性；具体步骤包括：2.1)按照HTML中文档对象模型树的层次结构，由根节点开始，按深度优先遍历元素，获得与步骤(1)中设定的矩形框相交的元素；2.2)对查找到的元素中去除非几何元素，提取与网页可视化相关的视觉元素；2.3)通过提取的视觉元素的HTML属性，获得对应的视觉属性及对应取值。5.如权利要求1所述的网页可视化区域的交互增强方法，其特征在于，步骤(3)中，根据视觉元素在文档对象模型树中的父子关系，提取复合视觉元素；其具体步骤包括：3.1)找到步骤(2)中提取的各视觉元素在文档对象模型中的位置以及相互之间的关系；3.2)抽取步骤(2)中某视觉元素，找到与该视元素具有相同父亲、并且该父亲中的所有孩子均是步骤(2)中提取的视觉元素的对应的视觉元素，该某视觉元素与对应视觉元素组成复合视觉元素；3.3)将所有组成元素的视觉属性合并为复合视觉元素的视觉属性。6.如权利要求1所述的网页可视化区域的交互增强方法，其特征在于，步骤(4)中将步骤(2)中提取的视觉元素和/或步骤(3)中提取的复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组；对每个视觉元素组中的视觉元素进行属性分布统计；其具体步骤为：4.1)将步骤(2)中提取的视觉元素按其标签类型进行分类；将步骤(3)中的复合视觉元素，按照组成的标签类型集合进行分类；属于同一标签下的视觉元素和/或复合视觉元素组成视觉元素组；4.2)针对同一视觉元素组，将该视觉元素组中视觉元素和/或复合视觉元素对应的视觉属性进行分布统计：对于...

【专利技术属性】
技术研发人员：袁晓如，陆旻，梁婕，
申请(专利权)人：北京大学，
类型：发明
国别省市：北京;11