网页可视化区域的交互增强方法及系统与流程

本发明涉及基于网页的可视化与可视分析领域，具体涉及一种面向网页可视化区域的交互增强方法及系统。

背景技术：

随着网页可视化技术的发展，互联网上的可视化作为一种有效的信息表达形式随处可见。交互作为信息的重要探索手段，对于理解可视化是不可或缺的。然而网页可视化中的交互常常需要通过编写代码来实现。这提高了网页可视化提供交互功能的门槛，从而导致很多网页可视化提供很少甚至没有交互功能。已有工作提出的交互构建的方法，主要面向可视化编程人员，通过提供简化、便于编写交互的软件包在可视化的生成过程中嵌入交互，以提供交互功能。目前的方法仍要求编写代码，且不能针对既有的可视化提供交互。

技术实现要素：

针对现有技术中存在的缺陷，本发明的目的在于提供一种网页可视化区域的交互增强方法及系统，提供通过毋需编码的方式，在保留网页可视化区域交互功能的前提下，采用通用方法达到增强页面可视化的目的。

为实现上述目的，本发明采用的技术方案为：

网页可视化区域的交互增强方法，包括以下步骤：

(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属性，实现视觉突出的效果；

交互模块，用于接收用户指令，也用于显示视觉元素组及组中视觉元素和/或复合视觉元素的属性分布统计。

进一步地，上述网页可视化区域的交互增强系统，所述过滤模块包括执行模块和读写模块；

读写模块，用于读取交互模块的指令，解析该指令并将解析结果传递给执行模块；

读写模块，还用于接收执行模块的结果反馈，并将该结果反馈生成显示指令传递给交互模块；

执行模块，用于根据读写模块的解析结果读取分组统计模块中的视觉元素组数据并对视觉元素组进行处理，并将处理后的结果反馈传递给读写模块。

进一步地，上述网页可视化区域的交互增强系统，对视觉元素组的处理方式包括：

选择视觉元素组，该被选择的视觉元素组下的视觉元素或复合视觉元素均作为过滤结果；

或，

对不同视觉元素组取交集、并集和/或差集的集合运算，将运算结果中的视觉元素或复合视觉元素作为过滤结果。

本发明的有益效果在于：本发明针对网页可视化中常见的交互缺乏的现象，提供了一种毋需编码的交互增强技术。不依赖于网页可视化区域的具体形式、使用数据和技术，基于HTML和文档对象模型的操作，在不影响既有可视化中交互的前提下，提供了基本、通用的交互操作，增强了用户对可视化的探索能力，提供了对信息的理解。

附图说明

图1为本发明具体实施方式的网页可视化区域交互增强方法的流程图；

图2为本发明具体实施方式中的网页和可视化面板的交互对象面板的示意图；

图3为本发明具体实施方式中网页和将步骤(5)的过滤结果定义为新的视觉元素组后的交互对象面板的示意图；

图4为本发明具体实施方式中交互条件设定面板的示意图；

图5为实施例中一个针对既有可视化的交互增强的快照视图；

图6为本发明具体实施方式的网页可视化区域的交互增强系统的结构框图。

图7为本发明具体实施方式的过滤模块的结构框图。

具体实施方式

下面结合说明书附图与具体实施方式对本发明做进一步的详细说明。

图1示出了本发明具体实施方式中网页可视化区域的交互增强方法的流程图，所述交互增强即在保证既有可视化中交互功能的前提下，提供基本的、通用的交互技术，解决在既有可视化中交互不足的缺陷，具体说来，包括以下步骤：

1.1)修改网页的HTML，插入交互增强所需的第三方软件库，在网页上覆盖一个的SVG元素，该SVG元素可以覆盖部分页面或全部页面；设定该SVG元素的鼠标点击、拖拽响应事件函数，用以截获用户在网页上的点击及拖拽操作；1.2)响应鼠标点击、拖拽的动作，确定框选的区域为交互增强的可视化区域。通过上述子步骤实现步骤(1)在网页中定位交互增强的可视化区域，S001；如图2、图3和图5的页面的左部所示均为通过鼠标框选中的网页，其中矩形框框住的区域即为根据用户的鼠标动作在网页上定位的交互增强的可视化区域。

本具体实施方式中，该交互增强所需的第三方软件库的是指生成可视化面板及以及覆盖网页可视化区域的SVG元素所需的第三方软件库，本领域技术人员根据实际需求从现有技术中选取，例如：Bootstrap,D3.js(这里需要举例说明，写出一个或多个第三方软件库的名称)。

2.1)按照HTML中文档对象模型树的层次结构，由根节点(即HTML中的body对象)开始，按深度优先遍历元素，获得与步骤(1)中定位的交互增强的可视化区域的元素；2.2)对查找到的元素中去除非几何元素(例如<g>,<video>对象等)，提取与网页可视化相关的视觉元素；2.3)通过提取的视觉元素的HTML属性，获得对应的视觉属性及对应取值。通过上述子步骤实现步骤(2)提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性(如颜色、大小等)，S002。

3.1)找到步骤(2)中提取的各视觉元素在文档对象模型中的位置以及相互之间的关系；3.2)抽取步骤(2)中某视觉元素，找到与该视元素具有相同父亲、并且该父亲中的所有孩子均是步骤(2)中提取的视觉元素的对应的视觉元素，该某视觉元素与对应视觉元素组成复合视觉元素；3.3)将所有组成元素的视觉属性合并为复合视觉元素的视觉属性。通过上述步骤3.1)、3.2)、3.3)能够实现步骤(3)根据视觉元素在文档对象模型树中的父子关系，提取复合视觉元素，以代表复合的可视化设计S003。通过将单个视觉元素复合成复合视觉元素，可以应对抽取可视化区域中的用多个视觉元素组合表达数据的情况。例如，用两个圆的图标来表示一个数据项中的两个分量。

通过上述步骤S002和S003，将在HTML中与框选的交互增强的可视化区域的视觉元素或复合视觉元素均提取出来，便于对修改其属性实现可视化增强效果。

基于选择便捷考虑，本实施例中还提供了分组步骤：4.1)将步骤(2)中提取的视觉元素按其标签类型(Tag)进行分类；将步骤(3)中的复合视觉元素，按照组成的标签类型集合进行分类；属于同一标签下的视觉元素和/或复合视觉元素组成视觉元素组；4.2)针对同一视觉元素组，将该视觉元素组中视觉元素和/或复合视觉元素对应的视觉属性进行分布统计(例如获得颜色分布统计等)：对于数值型属性，如半径，按照一定分割粒度(默认为20)，对数值范围分隔后进行数量分布统计对于类别型属性，按照类别进行数量分布统计。通过上述子步骤实现步骤(4)将步骤(2)中提取的视觉元素和/或步骤(3)中提取的复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组；对每个视觉元素组中的视觉元素进行属性分布统计。

(5)通过对视觉元素组的操作对相应视觉元素组中的视觉元素或复合视觉元素进行过滤，生成过滤结果，S005；其中相应视觉元素组的操作包括：1、选择视觉元素组，该被选择的视觉元素组下的视觉元素或复合视觉元素均作为过滤结果；2、对不同视觉元素组取交集、并集和/或差集的集合运算，将运算结果中的视觉元素或复合视觉元素作为过滤结果。上述两种对视觉元素组的操作可任选其一。通过直接选择的方式，在视觉属性上刷选对应的感兴趣区间，例如通过刷选视觉元素的颜色属性上的特定颜色范围，过滤出特定颜色的图元。进而不同属性的过滤操作以交运算结合，筛选出满足多种条件的视觉元素；

(6)进入步骤(7)，如此步骤(5)的过滤结果可以直接作为最终确定好的可视化交互增强的视觉元素进入修改步骤(即步骤6中直接进入步骤7的部分)，实现其可视化增强效果；或者，将步骤(5)中的过滤结果定义为新的视觉元素组，重复步骤(5),进行再次过滤，实现再次交互探索的功能，S006。

为便于直观选择，本实施例以可视化面板作为网页交互增强的载体，所述可视化面板包括交互对象面板(如图2、图3和图5右半部所示)和交互条件设定面板(如图4所示)；所述交互对象面板包括：名称显示部分(图2、图3和图5右上部所示)和属性分布统计显示部分(图2、图3和图5右下部分所示)；所述名称显示部分用于显示分类好的各视觉元素组的名称。各视觉元素组可视化为图标显示，图标中给出视觉元素组的标签名以及组中的元素个数，选择对应的视觉元素组可通过点击图标实现。所述属性分布统计显示部分显示步骤(5)的过滤结果中的视觉元素和/或复合视觉元素的属性分布统计；所述交互条件设定面板用于接收对视觉元素组的操作指令和定义步骤(6)中形成的新的视觉元素组名称。为便于观察，所述属性分布统计显示部分以直方图的形式显示属性分布统计结果。

用户根据自己感兴趣的区间通过对相应的视觉元素组操作后，得到过滤结果，通过步骤(7)修改过滤结果对应的视觉元素或复合视觉元素在网页中相关的HTML属性，实现视觉突出的效果，S007。在本实施例中，上述相关的HTML属性为在HTML中的对象透明度，具体修改方式可以是：将不存在于过滤结果中的视觉元素和/或复合视觉元素的对象透明度设高(默认0.8)，没有被选择的视觉元素透明度设高，导致没有被选择的视觉元素变的透明，从画面中淡出，从而达到高亮选择的对象的效果。

(8)删除步骤1.1)中的在网页HTML中添加的SVG，退回网页，使用既有界面自带的交互功能，S008。

如图6所示，本实施例网页可视化的交互增强系统执行上述步骤，区域定位模块根据用户操作对网页进行交互增强初始化，在网页HTML中插入第三方软件库以及检测交互的SVG对象；再根据用户鼠标的圈选动作，确定既有可视化所在的区域，在网页中定位交互增强的可视化区域。第一分析模块根据圈选的区域，在文档对象模型中按深度优先搜索区域内的视觉元素，提取被定位的可视化区域所对应的文档对象模型中的视觉元素，针对提取出的视觉元素，通过解析HTML中的标签，获得对应的视觉编码的属性。第二分析模块基于视觉元素在文档对象模型中的父子关系，提取复合视觉元素。将视觉元素按类别分组，接着计算组内的属性数量分布。分组统计模块将视觉元素和/或复合视觉元素按照其在HTML中的标签类型进行分类，属于同一标签下的视觉元素和/或复合视觉元素设定为视觉元素组，还用于对每个视觉元素组中的视觉元素进行属性分布统计。交互模块，将视觉元素和/或复合视觉元素及其属性分布可视化，作为交互的面板。交互模块接收用户指令，将指令传递给过滤模块。过滤模块，根据交互模块传递的指令识别用户对视觉元素组的操作，并对相应视觉元素组中的视觉元素或复合视觉元素进行过滤，生成过滤结果；过滤模块根据用户操作指令还可以将生成的过滤结果定义为新的视觉元素组，以实现再次过滤。最终修改模块通过修改最终过滤结果对应的视觉元素或复合视觉元素在网页中对应的HTML属性，实现视觉突出的效果。

如图7所示，过滤模块包括执行模块和读写模块；读写模块读取交互模块接收到的用户指令，解析该指令并将解析结果传递给执行模块；执行模块，用于根据读写模块的解析结果对视觉元素组进行处理，并将处理后的结果反馈传递给读写模块。读写模块接收执行模块的结果反馈后，将该结果反馈编码生成显示指令传递给交互模块，完成过滤过程。

图2示出了本发明具体实施方式中的交互增强的可视化面板。左侧虚线框表示在可视化的网页中的圈选区域，右侧可视化面板包括两个部分，上部为提取元素组的标签可视化，标签给出了元素的标签名称以及组中元素的数量。下部为所选择的元素组的视觉属性分布，此处所选择的是圆形元素组，包括了半径、颜色、位置等属性的分布。当前状态为选中了标签名为“circle”的视觉元素组。

图3示出了本发明具体实施方式中的保存交互结果视图。根据用户的选择，步骤(5)的过滤结果定义为标签为“group”的新的视觉元素组，保存入面板上部的元素组标签中。

图4示出了本发明具体实施方式交互条件设定面板的视图。视图中包括新的标签组命名、运算表达式、运算对象和运算符号几个图标，用户通过点击的交互操作完成集合运算中运算对象以及运算符的指定，系统获取该指定并生成运算结果。运算对象为提取或构造的视觉元素组，运算符为集合运算中的交、并、差三类操作。运算结果可以再保存为新的视觉元素组。

图5示为本发明实施例中一个针对既有可视化的交互增强的快照视图，对网页可视化区域(此处为纽约时报上使用可视化形式进行的报道)的交互增强。通过圈选特定区域的可视化，获得展示可视化形式中视觉元素的及其属性分布的面板，在面板中对视觉元素从多种属性上进行条件范围设定，筛选出感兴趣的视觉元素，这些视觉元素在既有可视化中动态的高亮出来，帮助用户快速定位元素。图中将名为“circle”的视觉元素组中视觉元素或复合视觉元素作为了修改对象，对其对象透明度进行了修改，完成了相应图形的高亮显示，实现了可视化增强。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其同等技术的范围之内，则本发明也意图包含这些改动和变型在内。